1

Heaven’s Light is Our Guide

Department of Electronics & Telecommunication Engineering

Rajshahi University of Engineering & Technology, Bangladesh

EduQuiz Master

Author
S.M. Shihab Sharar
Roll No. 2004024

Supervised by
Sharaf Tasnim
Lecturer
Department of Electronics & Telecommunication Engineering
Rajshahi University of Engineering & Technology
 2

Heaven’s Light is Our Guide

Department of Electronics & Telecommunication Engineering
Rajshahi University of Engineering & Technology, Bangladesh

CERTIFICATE
This is to certify that the project entitled "EduQuiz Master" has been carried out by S.M. Shihab
Sharar under the supervision of Sharaf Tasnim, Lecturer, Department of Electronics & Telecom-
munication Engineering, Rajshahi University of Engineering & Technology.

Supervisor,

---------------------------
(Sharaf Tasnim)
Lecturer
Department of Electronics &
Telecommunication Engineering
RUET, Rajshahi-6204.

Head,

---------------------------
(Dr. Mst. Fateha Samad)
Professor
Department of Electronics &
Telecommunication Engineering
RUET, Rajshahi-6204.
 3
Declaration

I hereby declare that this submission is my own work and, to the best of my knowledge and belief,
it contains no material previously published or written by another person, nor material that has been
accepted for publication to a substantial extent for the award of any other degree or diploma at ETE,
RUET or any other educational institution, except where due acknowledgment is made in the thesis.
Any contribution made to the research by colleagues with whom I have worked at RUET or else-
where during my candidacy is fully acknowledged. I also declare that the intellectual content of this
thesis is the product of my work, except to the extent that assistance from others is acknowledged.

Author

..................................................
(S.M.Shihab Sharar)
Roll No. 2004024
Department of Electronics & Telecommunication Engineering
Rajshahi University of Engineering & Technology
Rajshahi-6204, Bangladesh.
 4
Abstract

The rapid evolution of digital learning tools has transformed how learners engage with educational
content. QuizMaster is a full-stack web application built with the MERN stack (MongoDB, Ex-
press.js, React.js, Node.js), designed to offer a personalized, AI-integrated quiz experience. This
project aims to simplify quiz creation, exploration, and tracking by combining modern web devel-
opment practices with the power of artificial intelligence.

The application architecture follows a modular design, where the frontend and backend are devel-
oped independently, ensuring better scalability, code management, and performance. The fron-
tend is developed using React.js, a powerful JavaScript library for building dynamic user inter-
faces. For styling and UI consistency, Tailwind CSS — a modern utility-first CSS framework — is
used, which allows rapid development of responsive and aesthetically pleasing components.

To handle user authentication and security, Firebase Authentication is implemented, allowing

users to register, log in, and manage their personalized quiz data. The backend is powered by Ex-
press.js and Node.js, which manage the server-side logic, routing, and communication with both
the frontend and the database. MongoDB, a NoSQL database, is used to efficiently store user pro-
files, custom quizzes, quiz results, and AI-generated quiz records.

A standout feature of QuizMaster is its integration with the Gemini API, which leverages artificial
intelligence to dynamically generate quiz questions based on any topic input by the user. This sys-
tem allows users to define the number of questions and desired difficulty level, making learning
more personalized and adaptive. The AI functionality enhances user engagement and transforms
static content into a dynamic learning experience.

In addition to quiz generation, the application features a dashboard where users can view their quiz
history, track performance, and revisit completed quizzes. This supports continuous learning and
self-assessment.

In conclusion, QuizMaster is a powerful and flexible quiz platform that bridges traditional learning
with modern technology. By utilizing the full MERN stack, separating concerns across frontend and
backend, and incorporating AI for content generation, it provides a scalable, secure, and highly in-
teractive solution for learners and educators alike.
 5
Acknowledgement

First and foremost, I would like to express my deepest gratitude to Sharf Tasnim, my respected
project supervisor, for her constant support, valuable guidance, and encouragement throughout the
development of this project, QuizMaster.

Her insightful suggestions, constructive feedback, and continuous motivation played a pivotal role
in shaping the direction and quality of this work. From the initial planning to the final implementa -
tion, her expertise and mentorship have been instrumental in helping me overcome challenges and
stay focused on my goals.

It has been a great privilege to work under her supervision, and I am sincerely thankful for the
knowledge and inspiration she has shared with me during this journey

S.M. Shihab Sharar

 6
Contents

Certificate………………………………………………………………………………………...2

Declaration………………………………………………………………………………………..3

Abstract……………………………………………………………………………………………4

Acknowledgment………………………………………………………………………………….5

List of Figures
Introduction………………………………………………………………………………………..9

Motivation…………………………………………………………………………………………..9

Objectives…………………………………………………………………………………………..10

Thesis Outline………………………………………………………………………………………
11

Abbreviations

List of Symbols………………………………………………………………...

Background and Preliminaries……………………………………………12

Block diagram…………………………………………………………………………………..13

Required Software………………………………………………………………………………14

Description of Software………………………………………………………………………….15

Python (Programming Language)……………………………………………………………….16

OpenCv (Programming Library)………………………………………………………………..17

Cmake & Dlib Tool ……………………………………………………………………………….18

Face_Recognition (Inbuilt Python Library)……………………………………………………..19

NumPy ( Inbuilt Python Library )………………………………………………………………..20

SupaBase (A Database Management System)

…………………………………………………....21

Web Camera ( Laptop )…………………………………………………………………………...22

 7

Design and Implementation

System Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …………………………..23

Pseudo code Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ………………………..24

VS code IDE Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …………………………..25

Code for Getting Images…………………………………………………………………….26

Code for Adding Data to Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ………………….27

Code for Image Detection, Image Classification & Identification

Operating Principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …………………………..28

Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ……………………………..32

Limitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ……………………………….32

Conclusions

Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ……………………………..33

Directions of Future Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ……………………...33

Bibliography…………………………………………………………………………………..34
 8

List of Figures
Chapter 2
Block diagram of the project……………………………………………………………...5

Flow Chart of the project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …………….7

Python (Programming Language)………………………………………………………...8

OpenCv (Programming Library). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …………..8

Cmake, CvZone & Dlib Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ……….9

Face_Recognition (Inbuilt Python Library). . . . . . . . . . . . . . . . . . . . . . . . . . . . . ……...10

SupaBase (A Database Management System) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …..10

Pickle, OS (Python File Handling Tools ). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . …….11

Date and Time , Client Server (Others Tools) . . . . . . . . . . . . . . . . . . . . ………………...13

 9

Chapter 1

Introduction

In today’s fast-paced digital world, education is rapidly transforming from traditional classroom-
based methods to more interactive, technology-driven approaches. Among these, quiz-based learn-
ing platforms are becoming increasingly popular for their ability to reinforce knowledge, evaluate
understanding, and make learning fun and engaging. To align with this trend, the Edu Quiz App
has been developed as a smart and responsive quiz platform designed for learners of all levels.

Edu Quiz App is a feature-rich web application built using the MERN stack (MongoDB, Ex-
press.js, React.js, Node.js) for seamless performance and modern UI responsiveness, integrated
with Firebase Authentication for secure user login and management. The platform empowers
users to register, create their own quizzes with custom questions and answers, generate quizzes us-
ing artificial intelligence based on any topic, and attempt a variety of ready-made quizzes on educa -
tional subjects like HTML, CSS, Python, and more.

One of the key strengths of the app lies in its AI-powered quiz generator, which allows users to gen-
erate topic-specific quizzes based on selected difficulty and question count — making the learning
process more personalized and efficient. Additionally, each user's activities and quiz attempts are
saved to their profile, allowing them to review past performance at any time. A dedicated dashboard
visually presents their progress and performance through graphs, making it easier to identify
strengths and areas for improvement.

By combining interactivity, personalization, and performance analytics, Edu Quiz App serves as a
powerful educational companion. Whether for self-study, academic practice, or skills assessment,
the platform provides a dynamic environment where users can learn, revise, and grow — all at their
own pace.

Motivation

The motivation behind developing the Edu Quiz App stems from the growing demand for flexible,
engaging, and accessible educational tools that promote active learning and self-assessment. In the
current era of digital education, students often struggle to find reliable platforms where they can
practice, test, and track their understanding of various topics in an interactive and personalized man-
ner.

Traditional learning systems often focus more on passive content consumption rather than active
participation. Quizzes, on the other hand, help learners reinforce concepts, identify gaps in knowl-
edge, and retain information more effectively. However, many existing quiz platforms either lack
customization, AI integration, or performance tracking features that make learning more adaptive
and meaningful.

We wanted to create a solution that not only allows users to create their own quizzes but also gen-
erate topic-specific quizzes using AI, access ready-made quizzes, and visually track their per-
 10
formance over time. Moreover, we aimed to make the platform intuitive, responsive, and accessible
from any device, ensuring a smooth experience for students and educators alike.

By developing the Edu Quiz App, we hope to contribute a valuable tool to the modern e-learning
ecosystem—one that blends education with technology to make learning smarter, faster, and more
interactive.

Objectives

The Edu Quiz App has been developed with the aim of enhancing the digital learning experience
by providing a flexible, intelligent, and interactive quiz platform. The core objectives of this project
are elaborated below:

1. To develop an intuitive and responsive quiz application that is accessible across multiple
devices and screen sizes. The application is designed to offer a smooth and consistent user
experience, enabling learners to engage with quizzes effortlessly whether on a desktop,
tablet, or smartphone.
2. To integrate artificial intelligence into the quiz creation process, allowing users to gener-
ate customized quizzes based on their chosen topic, question difficulty, and number of ques-
tions. This feature enhances the learning experience by making it personalized and adaptive
to the user’s needs.
3. To ensure secure user management through Firebase Authentication, enabling each
user to register, log in, and maintain a personalized profile. This profile securely stores their
created quizzes, quiz attempts, and performance data for future reference.
4. To offer a dual-mode quiz system that includes both user-generated quizzes and ready-
made quizzes on predefined topics such as HTML, CSS, and Python. This ensures that users
have the flexibility to practice either with their own content or by choosing from a curated
list of subjects.
5. To implement a comprehensive performance analysis dashboard, where users can track
their learning progress over time. The dashboard includes graphical representations of quiz
scores, attempt frequency, and improvements, helping users to identify their strengths and
areas needing improvement.
6. To maintain a structured data storage system using MongoDB, where all user activities,
including quiz content and results, are saved in a secure and organized manner. This allows
users to revisit previous quizzes and analyze their past performance.
7. To promote active and self-paced learning, providing a platform that supports both casual
learning and targeted exam preparation. The app encourages continuous learning and self-
assessment, which are essential for effective knowledge retention.
 11
Thesis Outline

1. Introduction
o Background of the Study
o Problem Statement
o Motivation
o Objectives
o Scope of the Project
o Organization of the Report
2. Literature Review
o Overview of Existing Quiz Applications
o Technologies Used in Similar Projects
o Role of AI in Quiz Generation
o Gaps in Current Solutions
3. System Analysis and Design
o Requirement Analysis
o Functional Requirements
o Non-functional Requirements
o System Architecture
o Data Flow Diagrams (DFD) / Use Case Diagrams
o Database Design
4. Implementation
o Technology Stack (MERN + Firebase)
o User Authentication Module
o Quiz Creation Module
o AI Quiz Generation Module
o Ready-made Quiz Module
o Dashboard and Performance Tracking
o Responsive Design Implementation
5. Testing and Evaluation
o Testing Strategy and Methods
o Test Cases and Results
o User Feedback
o Performance Evaluation
6. Conclusion and Future Work
o Summary of the Project
o Achievements and Limitations
o Possible Improvements and Future Enhancements
7. References
8. Appendices
o Source Code Snippets
o Screenshots
o Additional Documentation
 12

Chapter 2
Background and Preliminaries

In the evolving landscape of education, the integration of digital tools and technologies has become
essential to meet the demands of modern learners. Traditional classroom-based teaching methods,
though foundational, often face challenges in providing personalized learning experiences and real-
time assessment feedback. To overcome these challenges, digital learning platforms—especially
those featuring quizzes and interactive assessments—have gained immense popularity worldwide.

Quizzes serve as an effective learning tool by encouraging active engagement, reinforcing knowl-
edge, and helping learners self-assess their understanding of various subjects. Unlike traditional ex-
ams, quizzes provide instant feedback, which motivates learners to identify their strengths and
weaknesses promptly. This immediate evaluation facilitates better knowledge retention and helps
learners focus on areas requiring improvement.

However, despite the availability of numerous quiz applications, many lack advanced features such
as customization, adaptive learning, and performance analytics. Users often face limitations in cre-
ating personalized quizzes, and many platforms do not offer comprehensive tracking of learning
progress. Furthermore, as learning content and user needs diversify, static quizzes fail to provide the
flexibility required for effective learning.

With the rapid advancement of Artificial Intelligence (AI), there is significant potential to transform
quiz applications by making them smarter and more adaptive. AI can dynamically generate quiz
questions based on a user’s chosen topic, difficulty level, and the number of questions desired. This
allows for a highly personalized learning experience that adapts to individual learning goals and
knowledge levels.

The Edu Quiz App is developed in response to these educational needs and technological opportu-
nities. Built on the MERN stack—MongoDB, Express.js, React.js, and Node.js—along with Fire-
base Authentication for secure user management, the platform combines robust web technologies
with AI-powered features. Users can register and log in securely, create custom quizzes tailored to
their own topics, generate AI-based quizzes on virtually any subject, and access pre-made quizzes
covering various educational fields such as HTML, CSS, and Python.

Additionally, the app includes a detailed performance dashboard, where users can monitor their
quiz attempts, scores, and progress over time through engaging graphs and analytics. This data-
driven insight encourages continuous improvement and promotes effective, self-paced learning.

In essence, the Edu Quiz App seeks to bridge the gap between conventional learning assessment
and modern, interactive, and personalized educational tools. By leveraging advanced web technolo-
gies and AI, it aims to enhance the learning experience and support learners in achieving better aca -
demic and personal development outcomes.
 13
Required Softwares

Development Environment

1. Node.js
o Required to run JavaScript on the backend and use npm/yarn.
o Download Node.js
2. MongoDB
o NoSQL database for storing quiz data and user information.
o You can use:
 MongoDB Atlas (cloud-based) – recommended
 MongoDB Compass (GUI for local DB)
3. Code Editor
o Visual Studio Code (VS Code) – Best for JavaScript/React/Node development
o Download VS Code

Description of Software

💻 1. Node.js
Description:
Node.js is a JavaScript runtime built on Chrome’s V8 engine. It allows you to run JavaScript code
on the server (backend), making it possible to build full-stack applications using JavaScript alone. It
also comes with npm (Node Package Manager), which is essential for installing and managing
project dependencies.

Why we Need It:

 Runs your Express server (backend).

 Enables package installation using npm.
 Supports asynchronous operations and real-time data handling.

Fig 2.1:Logo of Node

 14

🧱 2. MongoDB
Description:
MongoDB is a NoSQL document-based database. Unlike relational databases, it stores data in flexi-
ble, JSON-like documents, making it ideal for handling unstructured data like quizzes, user profiles,
etc.

Why You Need It:

 Stores quizzes, questions, user attempts, scores, and dashboard data.

 Offers easy scalability and flexibility.
 Works seamlessly with Mongoose (ODM).

Options:

 MongoDB Atlas (Cloud-based) – Easy to set up and use.

 MongoDB Compass (GUI) – Visual tool to manage your data locally.

Fig 2.2:Logo Of mongDB

Link: https://www.mongodb.com/

🖊️3. Visual Studio Code (VS Code)

Description:
VS Code is a lightweight but powerful source code editor developed by Microsoft. It supports
JavaScript, React, Node, and many other languages with intelligent code completion, debugging,
and Git integration.

Why You Need It:

 15
 Write and manage frontend (React) and backend (Node/Express) code.
 Easy plugin support (Prettier, ESLint, Git, etc.).
 Integrated terminal for quick command execution.

Download: https://code.visualstudio.com/

🔥 4. Firebase
Description:
Firebase is a Backend-as-a-Service (BaaS) developed by Google. In your project, Firebase Authen-
tication is used to handle user login, signup, and session management securely.

Why You Need It:

 Simplifies authentication with Email/Password, Google, etc.

 Real-time database and Firestore available if needed.
 Easy to integrate with React apps.

🌐 5. Express.js
Description:
Express.js is a lightweight web framework for Node.js. It simplifies the process of building backend
APIs, handling HTTP requests, routing, and middleware integration.

Why You Need It:

 Handles all backend routes (e.g., user, quiz, dashboard).

 Manages API endpoints to communicate with the frontend.
 Works with MongoDB through Mongoose.
 16

🧩 6. Mongoose
Description:
Mongoose is an ODM (Object Data Modeling) library for MongoDB and Node.js. It helps you de-
fine schemas and models for your data.

Why You Need It:

 Structure your quiz and user data.

 Simplifies database operations (CRUD).
 Validates and sanitizes user inputs.

🌍 7. React.js
Description:
React.js is a frontend JavaScript library developed by Facebook. It enables you to build interactive
UIs using components, which makes your app fast and modular.

Why You Need It:

 Builds a responsive and dynamic UI for your quiz app.

 Handles routing using react-router-dom.
 Integrates with Firebase, backend APIs, and chart libraries easily.

Installation:

bash
CopyEdit
npx create-react-app quizapp

📊 8. Chart Libraries (Chart.js / Recharts)

Description:
Libraries like Chart.js or Recharts allow you to display quiz performance data graphically.

Why You Need It:

 Visualize scores, attempts, and performance trends on the dashboard.

 Make user experience more interactive and data-driven.
 17

🔐 9. openai (for AI Quiz Generation)

Description:
If you're using AI to generate quiz questions based on user inputs (like topic, difficulty, etc.), the
openai library allows you to connect to OpenAI’s GPT models.

Why You Need It:

 Automatically generate quiz content from AI.

 Enhances user experience by reducing manual effort.

Installation:

bash
CopyEdit
npm install openai

Link: https://platform.openai.com/

🚀 10. Vercel
Description:
Vercel is a cloud platform for hosting frontend applications. It’s optimized for React and Next.js but
works well with any static site.

Why You Need It:

 Deploys your React frontend with one click.

 Provides custom domains, fast CDN, and HTTPS.

Link: https://vercel.com/

🔁 11. Render / Railway / Cyclic

Description:
These platforms host your backend (Node.js + Express) and connect with MongoDB Atlas easily.

Why You Need It:

 Deploy your server and make API routes available online.

 Connect frontend and backend through REST APIs.

Popular Choices:

 Render
 Railway
 18
 Cyclic

🧰 12. Git & GitHub

Description:
Git is a version control system to manage your codebase. GitHub is a platform to host and share
your repositories online.

Why You Need It:

 Track code changes and collaborate.

 Deploy directly from GitHub to Vercel or Render.
 Backup and showcase your project.

Download Git: https://git-scm.com/

 19

Chapter 3
Design and Implementation
The QuizApp is built on the MERN stack (MongoDB, Express.js, React.js, Node.js), with Firebase
for authentication and OpenAI’s API for AI-powered quiz generation. This design offers a scalable,
maintainable, and responsive web application.

 Frontend (React.js): The user interface is developed with React, leveraging components to
create a dynamic and responsive experience. React Router manages navigation between dif-
ferent pages like Login, Dashboard, Quiz Creation, and Results.
 Backend (Node.js + Express.js): The backend server handles API requests, manages data-
base operations, and integrates with third-party services like Firebase and OpenAI.
 Database (MongoDB): MongoDB stores user profiles, quizzes, questions, and quiz at-
tempts. Mongoose schemas enforce data structure and relationships.
 Authentication (Firebase): Firebase Authentication provides secure user login and registra-
tion with email/password, maintaining user sessions and credentials securely.
 AI Integration (OpenAI API): The backend uses OpenAI API to generate quiz questions
based on user input for AI quizzes.
 Deployment: Frontend hosted on Vercel; backend hosted on platforms like Render or Rail-
way; database hosted on MongoDB Atlas.

2. Frontend Design

 Component-Based Architecture: Each feature (Login, Register, Dashboard, Quiz Cre-

ation, AI Quiz Generation, Quiz Attempt, Performance Visualization) is implemented as a
reusable React component.
 Routing: React Router enables smooth page transitions and protects private routes, ensuring
only authenticated users access the dashboard and quizzes.
 Responsive Design: CSS Flexbox and Grid, along with media queries, ensure the app works
well on mobile, tablet, and desktop devices.
 State Management: React’s built-in state and context APIs manage UI states, user data,
and quiz information efficiently.
 Visualization: Uses Chart.js or Recharts libraries to display quiz performance metrics in
graphs, allowing users to track scores visually.

3. Backend Design

 RESTful API: The Express server provides endpoints to create quizzes, fetch quizzes, sub-
mit quiz attempts, and retrieve user data.
 Middleware: Authentication middleware verifies Firebase tokens to ensure only logged-in
users can access protected routes.
 OpenAI API Integration: When users request an AI-generated quiz, the backend sends the
request with user parameters to the OpenAI API, processes the response, and returns quiz
questions to the frontend.
 20
 Error Handling: The backend has centralized error handling to respond with appropriate
status codes and messages.

4. Database Design

 User Collection: Stores user information such as UID (from Firebase), email, display name,
and references to quizzes and attempts.
 Quiz Collection: Stores quiz metadata (title, creator ID, creation date), questions array
(each with question text, options, correct answer), and type (custom, AI-generated, or ready-
made).
 Attempt Collection: Records each user’s quiz attempts, including quiz ID, user ID, score,
answers submitted, and timestamp.

The database design supports efficient querying for user quizzes, quiz attempts, and performance
data.

5. AI Quiz Generation Workflow

 The user inputs the topic, number of questions, and difficulty level on the frontend.
 This data is sent to the backend API, which calls OpenAI’s GPT API with a prompt to gen-
erate relevant quiz questions.
 The backend receives AI-generated questions and options, formats them, and sends the quiz
back to the frontend.
 Users can immediately attempt the AI-generated quiz or save it for later use.

6. Security Measures

 Firebase Authentication: Ensures secure user sign-in and registration with email/password
or third-party providers.
 Token Verification: Backend verifies Firebase ID tokens in each API request to confirm
user identity.
 Input Validation: Both frontend and backend validate inputs to prevent SQL/NoSQL injec-
tions and other malicious attacks.
 HTTPS Protocol: Secure communication between client and server is enforced in produc-
tion.
 Data Privacy: User data is stored securely with proper access controls.

7. Deployment Strategy

 Frontend Deployment: React app is deployed on Vercel, ensuring fast loading and global
CDN distribution.
 Backend Deployment: Express server is deployed on platforms like Render or Railway for
scalability and ease of management.
 21
 Database Hosting: MongoDB Atlas manages the cloud-hosted database, with backups and
monitoring.
 Continuous Integration/Deployment (CI/CD): Automates deployment workflows on code
changes for both frontend and backend repositories.

System Design

Fig 3.1:Home Page of QuizMaster App

Fig 3.2:AI Generated Quizzes

 22

Fig 3.3:AI Generated Quizzes of Your Own Topic

Fig 3.4: Dashboard of an User

 23
Description of System of Design

The QuizApp is thoughtfully designed using a modular and scalable architecture that ensures a
seamless and efficient user experience. The system is divided into four main components: the fron-
tend (client-side), backend (server-side), database, and third-party services such as Firebase Authen-
tication and OpenAI API.

On the frontend, the application is built using React.js, which enables a dynamic and interactive
user interface. The design follows a component-based approach, where each part of the applica-
tion—such as login, dashboard, quiz creation, quiz participation, and performance charts—is struc-
tured as a reusable and independent component. This not only simplifies development but also
makes the app easier to maintain and extend. The navigation between different views is handled
smoothly using React Router, which supports single-page application (SPA) routing. The interface
is fully responsive, using CSS Flexbox and Grid along with media queries, making it adaptable to
all screen sizes, including desktops, tablets, and smartphones. For a better user experience, intuitive
layouts and interactive elements are used to guide users through each step of the application.

The backend is powered by Node.js and Express.js, forming the server-side part of the system. It
exposes various RESTful API endpoints for handling quiz creation, quiz retrieval, AI quiz genera-
tion, answer submission, and performance retrieval. The backend is also responsible for communi-
cating with the OpenAI API, which allows users to generate quizzes by simply providing a topic,
number of questions, and difficulty level. The server processes the response from OpenAI and sends
a formatted quiz to the frontend. In terms of security, the backend includes middleware functions
that validate Firebase ID tokens to ensure that only authenticated users can access protected routes.
This layer also includes proper error handling to manage invalid requests or server issues grace-
fully.

The database layer uses MongoDB, hosted on MongoDB Atlas, for storing persistent data. There
are several key collections including users, quizzes, questions, and attempts. Each user has a unique
profile stored with details such as name, email, and UID from Firebase. When a quiz is created—ei-
ther manually or using AI—it is stored with a title, list of questions, options, correct answers, and
the creator’s ID. Quiz attempts are recorded with the user’s ID, selected answers, score, and the
time of the attempt. The database is designed to support one-to-many relationships, for example,
one user can have many quizzes and many attempts. This structure ensures fast data retrieval and
smooth user experiences.

Firebase Authentication is used to handle user registration and login securely. When a user signs
up or logs in, Firebase generates a secure token that is passed to the backend for verification. This
ensures that only authorized users can create quizzes, view past attempts, or generate AI quizzes.
This approach removes the burden of handling passwords and security from the developer and pro-
vides a reliable and scalable solution for authentication.

To make the learning and testing process more engaging, the app includes data visualization fea-
tures. Using libraries such as Chart.js or Recharts, the application displays performance metrics in
the form of pie charts, bar graphs, and line graphs. These charts help users track their scores and an-
alyze their progress over time. This not only motivates them but also provides a sense of achieve-
ment and areas for improvement.

Finally, the entire system is deployed online for public use. The frontend React application is hosted
on Vercel, offering fast and reliable delivery with global CDN support. The backend server is de-
 24
ployed on Render or Railway, allowing for scalable and managed hosting. The database runs on
MongoDB Atlas, which offers backups, monitoring, and secure data access in the cloud.

In summary, the system design of QuizApp ensures a balance between performance, security, and
user experience. Each component—whether it’s user authentication, quiz generation, or result visu-
alization—works together cohesively to offer a complete and intelligent quiz-taking platform.

Fig 3.5: Figure of the Fierbase

 25
Fig 3.6: MongDb

Fig 3.7: Vs Code Structure

Fig 3.7: Vs Code Structure

 26

Project Architecture
The QuizApp follows a Modular, Layered Architecture built on the MERN stack (MongoDB,
Express.js, React.js, Node.js) with integrations for Firebase Authentication and OpenAI API. The
architecture is divided into four main layers:

1. Client Layer (Frontend - React.js)

 Description: The frontend is responsible for the user interface and user experience.
 Technology: React.js, CSS, HTML, JavaScript, Chart.js or Recharts.
 Responsibilities:
o User registration and login (via Firebase)
o Navigating between pages (React Router)
o Creating quizzes (manual and AI-generated)
o Attempting quizzes and submitting answers
o Viewing quiz performance and results
 Features:
o Responsive UI for mobile, tablet, and desktop
o Dashboard with performance tracking
o Form validations
o Interactive data visualization

2. Authentication Layer (Firebase)

 Description: Handles secure login and user identity management.

 Technology: Firebase Authentication
 Responsibilities:
o User sign-up and login using email/password
o Token generation for authenticated sessions
o Firebase UID used as a unique user reference in the database
 Security:
o JSON Web Tokens (JWT) for backend verification
o Role-based access control (if implemented)

3. Server Layer (Backend - Node.js + Express.js)

 Description: Manages business logic and API services.

 Technology: Node.js, Express.js, Axios (for OpenAI API)
 Responsibilities:
o Handling API requests from the frontend
o Interfacing with Firebase to validate user tokens
o Communicating with OpenAI API to generate quizzes
o Sending and receiving data from MongoDB
 27
o Error handling and data validation

Key API Endpoints:

 POST /api/create-quiz – Save manual quiz

 POST /api/generate-quiz – Fetch AI quiz from OpenAI
 GET /api/quizzes – Retrieve quizzes
 POST /api/submit-quiz – Submit and evaluate user answers
 GET /api/results – Get past performance

4. Data Layer (Database - MongoDB Atlas)

 Description: Stores persistent user data and quiz-related records.

 Technology: MongoDB with Mongoose (ODM)
 Collections:
o Users: UID, email, username, quiz history
o Quizzes: Title, type (custom/AI), questions, creator ID
o Questions: Embedded inside quizzes, include text, options, and answer
o Attempts: Stores user submissions, score, answers, timestamps
 Data Flow:
o Each quiz is associated with a user
o Each quiz can have multiple attempts
o Every attempt is stored for performance tracking

5. AI Integration Layer (OpenAI API)

 Description: Powers AI quiz generation.

 Technology: OpenAI GPT (via API)
 Responsibilities:
o Accepting user input (topic, difficulty, number of questions)
o Sending prompts to OpenAI
o Receiving and formatting AI-generated questions
o Returning quiz to frontend for user interaction
 28

Operating Principle

The QuizApp operates on a modular and interactive principle where users can create, attempt, and
analyze quizzes using both manual input and AI-powered automation. The system relies on seam-
less integration between frontend and backend technologies, along with cloud services like Fire-
base Authentication, OpenAI API, and MongoDB Atlas for real-time data storage and process-
ing.

1. User Authentication

The user journey begins with authentication, where Firebase handles the login and registration
process. Upon successful login, a JWT token is generated and stored, which is later used to verify
and authorize user actions within the app.

2. Dashboard Interaction

Once authenticated, the user is directed to a dashboard where they can:

 Create their own quizzes by inputting custom questions and options.

 Generate quizzes using AI by specifying a topic, number of questions, and difficulty level.
 Select from a list of ready-made quizzes on common topics like HTML, CSS, and Python.
 View previously attempted quizzes and performance summaries.

3. Quiz Generation

There are two methods to generate quizzes:

 Manual Quiz Creation:

Users manually enter quiz questions, multiple-choice options, and correct answers. This data
is stored in MongoDB.
 AI Quiz Generation:
Users input a topic, number of questions, and difficulty level. The system then sends a re-
quest to OpenAI’s API, which returns generated quiz content. These questions are parsed
and displayed for the user to attempt.

4. Quiz Attempt & Submission

Users can attempt any quiz (custom, AI, or ready-made). As the user selects answers and submits
the quiz:

 The system calculates the score by comparing submitted answers with the correct ones.
 29
 The score, timestamp, and answer details are saved to MongoDB as a new attempt under the
user’s profile.

5. Performance Analysis

After submission, the user is presented with detailed feedback on their performance:

 The score is displayed immediately.

 Graphs and charts (using Chart.js or Recharts) show performance trends across all past
quizzes.
 Users can revisit or retake any quiz stored in their history.

6. Data Management

All user data—quizzes, attempts, scores, and account details—are stored securely in MongoDB At-
las and linked via the user’s Firebase UID. The database ensures that data is retrievable for analysis
and reporting at any time.

7. Logout and Session Control

Users can log out at any point, which clears their session and securely ends access to protected
pages. Upon next login, all their quizzes and performance data remain intact and accessible.

Conclusion

The QuizApp’s operating principle is based on user-friendly interaction, intelligent automation

through AI, and efficient performance tracking. By combining robust authentication, flexible quiz
creation, and insightful analytics, the system provides a complete platform for self-assessment,
learning, and fun.
 30

Limitations of the System

While the QuizApp successfully delivers a dynamic and user-friendly quiz platform powered by
both manual input and AI-generated content, there are still several limitations and areas for im -
provement that need to be acknowledged:

1. Dependency on Internet Connectivity

Since the application is fully web-based and relies on services like Firebase, MongoDB Atlas, and
OpenAI's API, it requires a stable internet connection at all times. Users with poor or no connec-
tivity will not be able to access features such as logging in, creating quizzes, or attempting them.

2. Limited AI Customization

Although the AI-powered quiz generation is a standout feature, the level of customization for gener-
ated quizzes is relatively basic. Users can only select the topic, number of questions, and difficulty
level. However, they cannot define question types (e.g., true/false vs. MCQ), format, or content
style. This limits the flexibility of generated content.

3. OpenAI API Costs and Rate Limits

The system relies on the OpenAI API for AI-generated quizzes, which may introduce cost-related
constraints in real-world deployment. Additionally, there are rate limits imposed by the API,
which could affect user experience during high traffic periods, especially if multiple users attempt
to generate quizzes simultaneously.

4. Lack of Real-Time Collaboration or Multiplayer Mode

The application is designed for individual users only. There is no feature to allow multiple users to
attempt a quiz simultaneously or compete in real-time. A collaborative or competitive mode could
enhance user engagement but is currently not supported.

5. No Offline Functionality

All data storage and processing are cloud-based (Firebase and MongoDB), meaning that the app
does not support offline access. Users cannot attempt or create quizzes without being connected to
the internet.
 31
6. Limited Question Format Support

Currently, the platform supports only multiple-choice questions (MCQs). Other formats such as
fill-in-the-blanks, short answer questions, or image-based questions are not available. This restricts
the diversity and depth of quizzes that can be created.

7. Minimal Role-Based Access Control

The app only supports one type of user role — the general user. There is no admin dashboard to
manage quizzes globally, moderate content, or oversee overall user performance. Role-based access
(admin, teacher, student, etc.) could improve the app’s usability in an academic or organizational
setting.

8. Basic Error Handling and Validation

Although the app includes basic input validation, it lacks robust error handling, especially when
dealing with server issues, API failures, or invalid user actions. This could potentially affect the
user experience if not handled gracefully.

9. Limited Analytics Scope

The performance dashboard provides users with scores and basic graphs, but there is a lack of in-
depth analytics, such as topic-wise strength/weakness, time taken per question, or improvement
trends. Advanced analytics would make the platform more insightful.
 32

Chapter 4
Conclusions
The QuizApp project successfully demonstrates the power and flexibility of modern web develop-
ment using the MERN stack (MongoDB, Express.js, React.js, Node.js) combined with Firebase
Authentication and OpenAI’s GPT API. It provides an engaging and interactive platform where
users can create, generate, and attempt quizzes with ease.

The app offers a seamless user experience, allowing individuals to register, log in, and build person-
alized quizzes or instantly generate them using AI. The integration of charts for performance analy-
sis enhances the learning process by giving users visual insights into their progress. Moreover, the
responsive design ensures that the platform is accessible across a wide range of devices.

While the project includes powerful features such as AI quiz generation and score tracking, it also
presents opportunities for future improvements. These include support for more diverse question
formats, real-time multiplayer quizzes, and offline functionality.

In conclusion, QuizApp is a practical example of how intelligent, full-stack web applications can
be built to offer real-world learning solutions. It serves not only as a personal skill-building tool but
also has the potential to be scaled into a collaborative educational platform for schools, training cen-
ters, or online learning communities.

Future Work and Recommendation of the System

Future Work and Recommendations

The QuizApp provides a solid foundation for interactive quiz creation and participation, leveraging
AI and modern web technologies. However, there are several enhancements that can be imple-
mented in future versions to improve the functionality, scalability, and overall user experience.

1. Support for Multiple Question Types

Currently, the system only supports multiple-choice questions (MCQs). Future versions should in-
clude support for:

 True/False
 Fill in the blanks
 Short answers
 Matching-type
This will make the quizzes more versatile and useful for academic and professional assess-
ments.
 33

2. Role-Based Access and Admin Panel

Introducing different user roles, such as:

 Admin: Manage users, quizzes, and content

 Teachers/Creators: Design and assign quizzes to specific groups
 Students: Attempt quizzes and track progress

An admin dashboard will enable better management, moderation, and user control.

3. Real-Time Multiplayer Quiz Mode

To enhance engagement, a live quiz mode can be developed where:

 Multiple users participate simultaneously

 Scores are updated in real-time
 Time limits and leaderboards are used for competition

This would be especially beneficial for classrooms, group training, or online events.

4. Mobile App Integration

Creating a dedicated mobile app (using React Native or Flutter) will improve accessibility and
user retention, especially in regions with limited desktop usage.

5. Offline Quiz Mode

Future updates can include offline quiz capabilities, allowing users to:

 Download quizzes in advance

 Attempt them without internet
 Sync results once back online

This would be particularly useful in rural or low-connectivity areas.

6. AI Quiz Feedback and Difficulty Adjustment

Incorporating smarter AI features such as:

 Personalized feedback after each quiz attempt

 Adaptive difficulty levels based on performance history
 Topic recommendations for weak areas
 34
This will provide a more intelligent and tailored learning experience.

7. Enhanced Analytics and Reporting

Expanding the analytics dashboard to include:

 Time spent per question

 Comparison with average user performance
 Strengths and weaknesses by topic
 Performance trends over time

These insights will help users better understand their learning progress.

8. Multi-Language Support

To make the app more inclusive and globally accessible, future versions should support multiple
languages so that users can create and take quizzes in their native language.

9. Integration with Educational Platforms

Integrating with platforms like Google Classroom, Moodle, or Microsoft Teams could allow in-
stitutions to adopt QuizApp easily for classroom assessments.

10. Improved Error Handling and Notifications

Enhancing the system’s resilience by adding:

 Robust error messages

 Email or push notifications for quiz updates, results, or reminders
 Logging and monitoring tools to track system health
 35
Bibliography

1. Firebase Authentication Documentation

https://firebase.google.com/docs/auth
2. React.js Official Documentation
https://reactjs.org/docs/getting-started.html
3. Node.js Official Documentation
https://nodejs.org/en/docs
4. Express.js Guide
https://expressjs.com/en/starter/installing.html
5. MongoDB (Atlas) Documentation
https://www.mongodb.com/docs/atlas/
6. OpenAI API Documentation (for GPT quiz generation)
https://platform.openai.com/docs
7. Chart.js Documentation (for performance graphs)
https://www.chartjs.org/docs/latest/
8. Recharts (React chart library)
https://recharts.org/en-US
9. Vercel (Frontend deployment platform)
https://vercel.com/docs
10. GitHub (for version control and collaboration)
https://docs.github.com/en