The goal of this project is to create a seamless and intelligent tool for educators, students, and life-long learners.
Users can paste any block of text from an article about history to a chapter from a science textbook and receive a well-formed quiz to test their knowledge and comprehension.
The application is designed to be fast, user-friendly, and robust, handling AI model loading and database interactions efficiently on the backend.
- React.js – For building a dynamic and responsive user interface.
- Axios – For making asynchronous API requests to the backend.
- Node.js – JavaScript runtime environment.
- Express.js – Lightweight framework for building RESTful APIs.
- Mongoose – ODM for MongoDB.
- Hugging Face Transformers.js – Running
Xenova/flan-t5-smallmodel directly in Node.js.
- MongoDB Atlas – Cloud-hosted NoSQL database to store quizzes and user inputs.
quiz-generator-app/ ├── backend/ │ ├── api/ │ │ ├── controllers/ │ │ │ └── QuizController.js │ │ ├── models/ │ │ │ └── QuizModel.js │ │ ├── routes/ │ │ │ └── QuizRoutes.js │ │ └── services/ │ │ └── nlpService.js │ ├── .env │ ├── package.json │ └── server.js │ └── frontend/ ├── public/ ├── src/ │ ├── components/ │ │ ├── QuizForm.js │ │ └── QuizDisplay.js │ ├── services/ │ │ └── quizApi.js │ ├── App.css │ ├── App.js │ └── index.js └── package.json
Before you begin, make sure you have the following installed:
- Node.js (v16 or later) – Download Node.js
- npm – Comes bundled with Node.js
- MongoDB Atlas – Create a free account
git clone https://github.com/MisterStranger03/Quiz-Generator.git
cd Quiz-Generator-appStep 2: Setup the Backend
Navigate to the backend directory:
cd backendInstall backend dependencies:
npm installCreate a .env file in the backend directory and add your MongoDB URI:
MONGO_URI=mongodb+srv://<username>:<password>@<cluster-url>/<database-name>Example:
MONGO_URI=mongodb+srv://abc:abc123@cluster0.abcde.mongodb.net/quizdbStep 3: Setup the Frontend
Navigate to the frontend directory:
cd ../frontendInstall frontend dependencies:
npm installStep 4: Run the Application
Start the Backend Server
In a terminal window, from the backend directory:
npm startYou should see:
Server is running on http://localhost:5001
Connected to MongoDBStart the Frontend Server
Open a second terminal, navigate to the frontend directory, and run:
npm startYour browser should open automatically to:
http://localhost:3000
- User enters a block of text in the frontend form.
- Text is sent to the backend API using Axios.
- The NLP service (
nlpService.js) runs the Hugging Face model to generate questions based on the input. - The resulting quiz is stored in MongoDB and returned to the frontend.
- Quiz is displayed on the UI with options to modify or retake it.
QuizController.js– Handles incoming HTTP requests (text submission, quiz retrieval).QuizModel.js– Mongoose schema for storing quiz questions and metadata.QuizRoutes.js– Defines routes like/generate,/quizzes, etc.nlpService.js– Invokes and loads the Transformer model for quiz generation.
QuizForm.js– UI component for text input and quiz generation button.QuizDisplay.js– Displays the returned quiz questions.quizApi.js– Handles HTTP requests to the backend using Axios.App.js– Main React component.App.css– Custom styles.
Create a .env file inside the backend/ directory with the following key:
MONGO_URI=mongodb+srv://<username>:<password>@<cluster-url>/<database-name>- Ensure MongoDB Atlas allows connections from your IP (whitelist it in the Atlas dashboard).
- The AI model (
flan-t5-small) runs inside Node.js using@xenova/transformers. - You can upgrade to larger models if needed (make sure your system has enough resources).
- User authentication and login (JWT).
- Track user scores and progress.
- Export quiz to PDF.
- Support for multiple languages.
- Deploy to cloud platforms like Render, Vercel, or Heroku.
This project is open source and available under the MIT License.
Created by Raman – feel free to reach out on GitHub.
