KWIZ - The Ultimate Online Quiz Platform

A Report Submitted

in Partial Fulfillment of the Requirements

for the Degree of

Master of Computer Applications

by

Tanisha Gupta (2021CA109)

Sandeep Kumar Singh (2021CA094)
Piyush Jaiswal (2021CA077)
Chinglenkhomba Naorem (2021CA026)

Under the Guidance of

Prof. M.M. Gore

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

MOTILAL NEHRU NATIONAL INSTITUTE OF TECHNOLOGY ALLAHABAD
PRAYAGRAJ - 211004, INDIA
May 2023
 UNDERTAKING

We declare that the work presented in this project report titled ”KWIZ - The
Ultimate Online Quiz Platform”, submitted to the Department of Computer
Science and Engineering, Motilal Nehru National Institute of Technology Alla-
habad, for the award of the Master of Computer Applications degree, is our
original work. We have not plagiarized or submitted the same work for the award
of any other degree. In case this undertaking is found to be incorrect, we accept
that our degree may be unconditionally withdrawn.

—————————————————————
(Tanisha Gupta)
—————————————————————
(Sandeep Kumar Singh)
—————————————————————
(Piyush Jaiswal)
May 2023 —————————————————————
Prayagraj (Chinglenkhomba Naorem)
 CERTIFICATE

I Certify that the work contained in the project titled “KWIZ - The Ultimate
Online Quiz Platform” by Tanisha Gupta (2021CA109), Sandeep Kumar Singh
(2021CA094), Piyush Jaiswal (2021CA077), and Chinglenkhomba Naorem (2021C-
A026), has been carried out under my supervision and this work has not been
submitted elsewhere for a degree.

—————————————————————
(Prof. M.M. Gore)
Computer Science and Engineering Department
May 2023 MNNIT Allahabad
Acknowledgement

Our heartfelt gratitude to Prof. M. M. Gore, our project advisor, for pushing
us to step outside of our comfort zone, teaching us how to become professional,
pointing out minor errors and raising our standards high, and for being the critic
whose daily dose of motivation shaped the entirety of this project.

We also acknowledge the open-source community for their remarkable contribu-

tions to developing and maintaining the various libraries, frameworks, and re-
sources that we utilized in building our project. Their hard work and dedication
toward advancing technology are truly admirable.

We would like to extend a special thanks to the MCA junior batch of 2022 for
their invaluable help in testing our project. Their participation and feedback have
played a significant role in improving the quality and functionality of our work.

We appreciate the contributions of everyone mentioned above, without whom this

project would not have been possible.

iv
Abstract

We utilized the MERN stack, a collection of software tools including MongoDB,

Express.js, React.js, and Node.js, to construct a quiz app for educational purposes.

Timed quizzes, a leaderboard, and user verification are just a few of the features
offered by the quiz app. Quiz designers can utilize the admin dashboard to manage
quizzes, questions, and user results in addition to allowing them to create and
attempt quizzes.

This project showcases the advantages of utilizing the MERN stack for creating
contemporary online apps by demonstrating how to create a web-based quiz app.

v
Contents

Acknowledgement iv

Abstract v

List of Figures viii

Chapter 1 : Introduction 1
1.1 Background and Context of the Project . . . . . . . . . . . . . . . 1
1.2 Purpose of the Project . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Project Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.4 Project Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapter 2 : Technology Stack 3

2.1 Used Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Why We Used These Technologies . . . . . . . . . . . . . . . . . . . 3
2.3 Benefits and Limitations of These Technologies . . . . . . . . . . . 4

Chapter 3 : System Design 6

3.1 Architecture of the System . . . . . . . . . . . . . . . . . . . . . . 6
3.1.1 Front-End . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.2 Back-End . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.3 Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1.4 State Management . . . . . . . . . . . . . . . . . . . . . . . 6
3.2 DFDs of the System Components . . . . . . . . . . . . . . . . . . . 7

Chapter 4 : Implementation 11
4.1 Description of the Development Process . . . . . . . . . . . . . . . 11
4.2 Challenges Faced During Development . . . . . . . . . . . . . . . . 12
4.3 Solution to Overcome The Challenges . . . . . . . . . . . . . . . . 12
4.4 Screenshots of the Application . . . . . . . . . . . . . . . . . . . . . 13

Chapter 5 : Testing and Deployment 15

5.1 Explanation of the Testing Process . . . . . . . . . . . . . . . . . . 15
5.2 Result of the Tests Conducted . . . . . . . . . . . . . . . . . . . . . 16

vi
 5.3 Deployment Process . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.4 Explanation of the Hosting Environments . . . . . . . . . . . . . . . 16

Chapter 6 : Future Works 18

6.1 Potential Improvements to the Project . . . . . . . . . . . . . . . . 18
6.2 Possible Expansion to the System . . . . . . . . . . . . . . . . . . . 18

Chapter 7 : Conclusion 20
7.1 Summary of the Project . . . . . . . . . . . . . . . . . . . . . . . . 20
7.2 Achievements and Limitations of the Project . . . . . . . . . . . . . 21
7.3 Lessons Learned During the Project . . . . . . . . . . . . . . . . . . 21
7.3.1 Effective Communication . . . . . . . . . . . . . . . . . . . . 21
7.3.2 Planning and Organization . . . . . . . . . . . . . . . . . . . 21
7.3.3 Flexibility and Adaptability . . . . . . . . . . . . . . . . . . 21
7.3.4 Testing and Quality Assurance . . . . . . . . . . . . . . . . 21

References 22

vii
List of Figures

3.1 0-Level DFD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.2 1-Level DFD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 2-Level DFD (Student Components Breakdown) . . . . . . . . . . . 9
3.4 2-Level DFD (Admin Components Breakdown) . . . . . . . . . . . 10

4.1 Create Quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.2 Leaderboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.3 Ongoing Quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.4 Active and Past Quizzes . . . . . . . . . . . . . . . . . . . . . . . . 14

viii
Chapter 1

Introduction

1.1 Background and Context of the Project

In the present day, online education has grown in significance, especially in light of
the COVID-19 pandemic. A quiz app can make it simpler for teachers and students
to create, administer, and manage quizzes. Quizzes are a crucial component of
online learning.

We used the MERN stack to produce a quiz app. Students can participate in
quizzes using this web-based application. Businesses, organizations, and individ-
uals may all utilize it since it is scalable, safe, and efficient.

1.2 Purpose of the Project

Our project’s major objective was to create a quiz app that both teachers and
students could use. It had to be dependable and easy to use. With a contempo-
rary and user-friendly UI, the app is intended to offer a seamless and frictionless
experience. Additionally, it can be modified to satisfy each user’s particular needs.

1.3 Project Objectives

The following are the goals of our quiz app:

• To provide a simple platform for online quizzes.

• To offer a platform on which teachers can create tests and assessments.

1
 • To include elements like instant feedback and a leaderboard for quiz partic-
ipants.

• To accommodate a large number of quizzes and users.

• To provide user data privacy and protection by putting strong security.

• To make use of the MERN stack’s benefits for the app’s development, such
as quicker development and increased scalability.

1.4 Project Scope

The scope of the quiz app project includes:

• Creating a responsive web-based application using the MERN stack.

• Simple and free platform.

• Developing features for creating quizzes, creating questions, and sore analy-
sis.

• Implementing user authentication to ensure the security of user data.

• Providing features for taking quizzes, including multiple choice, true/false,

and short answer questions.

• Integrating the app with popular learning management systems and other
educational tools.

2
Chapter 2

Technology Stack

2.1 Used Technologies

The Online quiz application was developed using the MERN stack, which stands
for Mongo Database, Express.js React.js [3], and Node.js [4]. The project was
primarily created using React.js [3] and Node.js [4] on the client and server side,
respectively. MongoDB [1] was used for data storage, and Express.js [2] was used
as the server framework to build the restful API.

Other notable technologies used in the project include:

• HTML/CSS: Utilized for designing the user interface and implementing

styling.

• Tailwind CSS [7]: Used for responsive web design and UI components.

• Redux.js [5]: Used for state management in React.js [3].

2.2 Why We Used These Technologies

Here’s an overview of why the following technologies were chosen for developing
the quiz app:

• The MERN stack, consisting of MongoDB [1], Express.js [2], React.js [3], and
Node.js [4], is a popular and influential technology stack for building web
applications. MongoDB [1] is a NoSQL database that provides flexibility in
data storage, Express.js [2] is a web application framework that simplifies
building web applications, React.js [3] is a front-end JavaScript library that

3
 enables building interactive user interfaces, and Node.js [4] is a back-end
JavaScript runtime environment that allows running JavaScript code on the
server. The MERN stack is particularly well-suited for building scalable and
dynamic web applications.

• Express.js [2] is a popular Node.js [4] web application framework that is

known for its flexibility and simplicity. It provides a set of features for
building web applications, such as handling HTTP requests, routing, and
middleware. Express.js [2] is used in the quiz app to build the backend API
server and handle the HTTP requests and responses.

• Redux.js [5] is a popular JavaScript library for managing application state.

It provides a predictable and centralized state management system that sim-
plifies data management in large-scale applications. Redux.js [5] is used in
the quiz app to manage the application’s state, such as the current user’s
information, quiz questions, and quiz results.

• Firebase [6] is a cloud-based platform provided by Google that offers various

features for building web and mobile applications. It includes services such
as authentication, database, storage, and hosting. Firebase [6] is used in the
quiz app to handle authentication and database storage.

• Tailwind CSS [7] is a utility-first CSS framework that provides pre-defined

styles for building user interfaces. It enables building responsive and mobile-
first designs without writing custom CSS. Tailwind CSS [7] is used in the
quiz app to style the user interface and provide a consistent design across
all pages.

Overall, the choice of these technologies provides a solid foundation for build-
ing a scalable and dynamic web application with a modern user interface and
centralized state management system.

2.3 Benefits and Limitations of These Technolo-

gies
Here are some benefits and limitations of the technologies used in the development
of the quiz app:

• MERN Stack offers a comprehensive set of technologies to build scalable web

applications. It can be complex and time-consuming to learn and implement

4
 for developers who are new to it.

• Express.js [2] is a popular and efficient Node.js [4] web framework. It can
be less performant compared to other web frameworks like Koa, or Fastify

• Redux.js [5] is a popular state management library for React.js [3]. It can
add complexity to the application codebase, and too much use of Redux.js
[5] can lead to code bloat and performance issues.

• Firebase [6] offers a suite of services for building web and mobile applica-
tions. It can be expensive for larger applications and may not offer as much
customization as self-hosted solutions.

• Tailwind CSS [7] is a popular utility-first CSS framework that can help
developers rapidly prototype and build user interfaces. It can lead to larger
CSS files and slower load times if not used carefully.

5
Chapter 3

System Design

3.1 Architecture of the System

The architecture of a MERN-based quiz app can typically be broken down into
several components:

3.1.1 Front-End
This includes the user interface, which is responsible for rendering the app’s pages
and receiving input from the user. In our MERN app, the front-end is built using
React.js [3].

3.1.2 Back-End
This includes the server-side code that interacts with the database, processes data,
and sends responses to the client side. In our MERN app, the back-end is built
using Node.js [4] and Express.js [2].

3.1.3 Database
This includes the database used to store data related to the app. In our MERN
app, the database is typically a NoSQL database like MongoDB [1].

3.1.4 State Management

This part is responsible for managing the state of the app, which enables the app
to respond dynamically to user input. In our MERN app, Redux [5] is used for
this purpose.

6
The overall architecture of the quiz app follows a client-server architecture, where
the client-side code (front-end) interacts with the server-side code (back-end)
through APIs. The server-side code communicates with the database to retrieve
and store data and also interacts with the authentication and authorization code
to ensure that users are authenticated and authorized to access the app’s resources.
The state of the app is managed using Redux, which enables the app to respond
dynamically to user input.

3.2 DFDs of the System Components

Figure 3.1: 0-Level DFD

7
Figure 3.2: 1-Level DFD

8
Figure 3.3: 2-Level DFD (Student Components Breakdown)

9
Figure 3.4: 2-Level DFD (Admin Components Breakdown)

10
Chapter 4

Implementation

4.1 Description of the Development Process

The development process for the quiz app involved several stages. First, we con-
ducted a detailed analysis of the project requirements and determined the scope
and objectives of the app. We also identified the target audience and user personas
to help guide our design decisions.

Once we had a clear understanding of the project requirements, we began the

design phase. We created wireframes and user interface designs using tools like
Figma and Sketch. We also developed a detailed system architecture diagram to
help guide the development process.

After completing the design phase, we began the development phase. We used the
MERN stack, which includes MongoDB [1], Express.js [2], React.js [3], and Node.js
[4], to develop the app. We also integrated Redux [5] for state management and
Firebase [6] for authentication and real-time database functionality.

During development, we used an agile approach with weekly sprints to ensure that
we were making progress toward our goals and meeting the project objectives. We
also conducted regular code reviews and testing to identify and fix bugs as they
arose.

Once development was complete, we conducted thorough testing and debugging to

ensure that the app was stable and performed as expected. We also implemented
performance optimizations to improve the user experience.

Finally, we deployed the app to a production environment using a cloud hosting

11
provider. We also conducted post-deployment testing and monitoring to ensure
that the app continued to perform as expected.

4.2 Challenges Faced During Development

Several problems arise during the development process that required a good amount
of time and effort to overcome.

One of the difficulties we encountered when developing the quiz app was calculat-
ing the date and time for the quiz submission. This was especially crucial because
each quiz had a time limit, and we needed to make sure we finished on time.

We also faced some design issues when designing responsive layouts for various
screen widths. To guarantee that the quiz app was optimized for all screen sizes,
we had to employ CSS media queries.

4.3 Solution to Overcome The Challenges

For date and time calculation, We researched and used third-party libraries such
as Moment.js to simplify and handle the date and time-related operations. This
helped us to avoid any potential errors and improve the accuracy of the calcula-
tions.

To overcome the challenge related to mobile responsiveness in the quiz app, we

used Tailwind CSS [7], a utility-first CSS framework. Tailwind CSS [7] provides
pre-defined CSS classes for various responsive design features such as breakpoints,
grid layout, flexbox, and more. We ensured that all the components of the quiz
app are designed using Tailwind CSS [7] classes. We made use of the pre-defined
responsive breakpoints provided by Tailwind CSS [7] to adjust the design and
layout of the components based on the screen size of the device. We also used the
flexbox feature provided by Tailwind CSS [7] to create a responsive and flexible
layout for the quiz app. Additionally, we conducted extensive testing on different
mobile devices and screen sizes to ensure that the quiz app is fully responsive and
user-friendly. We also made use of the responsive design features of the MERN
stack to ensure that the quiz app functions seamlessly across different devices and
platforms.

12
4.4 Screenshots of the Application

Figure 4.1: Create Quiz

Figure 4.2: Leaderboard

13
 Figure 4.3: Ongoing Quiz

Figure 4.4: Active and Past Quizzes

14
Chapter 5

Testing and Deployment

5.1 Explanation of the Testing Process

The testing process involved a combination of manual testing and automated
testing. Manual testing was carried out by the development team to ensure that
all the features of the application were working as expected and there were no
issues with the user interface. Automated testing was carried out using Jest and
Enzyme testing frameworks to ensure the correctness of the code.

The testing process was divided into several stages. The first stage involved unit
testing, where individual components of the application were tested to ensure that
they worked as expected. The second stage involved integration testing, where
different components of the application were tested together to ensure that they
worked correctly in conjunction with each other. The third stage involved end-
to-end testing, where the entire application was tested to ensure that it worked
correctly from the user’s perspective.

Throughout the testing process, various types of testing were performed, including
functional testing, regression testing, performance testing, and security testing.
The testing team also made use of various testing tools and techniques, including
test cases, test plans, test scripts, and code coverage analysis tools, to ensure that
the application was thoroughly tested.

Finally, after all the testing was completed and all the issues were resolved, the
application was deployed to a staging environment.

15
5.2 Result of the Tests Conducted
As per the results of the tests conducted, the quiz app has mostly passed the tests,
which is what we expected. Our app was tested thoroughly by the development
team as well as by juniors to identify any potential bugs or errors. The testing
process included unit testing, integration testing, and system testing.

In the testing process, we fixed some of the minor bugs, and issues were identified
and resolved. However, overall, the app is found to be very stable and operational,
with no major issues affecting its performance. This app was able to successfully
perform all the expected functionalities, such as creating and taking quizzes, sub-
mitting quizzes, and displaying results on the leaderboard.

The testing results have helped improve the quality and reliability of our quiz
app, providing users with a good and enjoyable experience. Any remaining issues
or bugs will continue to be identified and resolved through ongoing testing and
maintenance.

5.3 Deployment Process

The app is made available to users on a server after the deployment phase. A
MERN stack application requires the deployment of two components: the front-
end (client-side) and the back-end (server-side).

We utilize a platform, Vercel [7], to deploy the front-end, which provides an easy-
to-use interface for delivering and managing web applications. We used Vercel [7]
to connect our Git repository and set up automatic deployments based on push or
pull requests. Vercel [7] also provides a number of capabilities, such as custom do-
mains, SSL certificates, and CDN (Content Delivery Network) integration, which
can assist in improving our application’s performance and scalability.

We utilize a platform, Render [9], which specializes in installing and managing

server-side applications, to deploy the back-end.

5.4 Explanation of the Hosting Environments

Vercel [7] and Render [9] are the hosting platforms used for deploying the front-
end and back-end of the quiz app, respectively. Vercel [7] is a cloud platform for
static sites and serverless functions, while Render [9] provides cloud computing
services for modern applications.

16
To deploy the front-end on Vercel [7], we first connected the Github [10] repository
to Vercel [7] and configured the build settings. Vercel [7] automatically detected
the front-end framework used (React.js [3]) and built the project accordingly. We
were then able to customize the domain name, SSL certificates, and other settings
in the Vercel [7] dashboard.

For deploying the back-end on Render [9], we followed similar steps of connecting
the Github [10] repository to Render [9] and configuring the build settings. We
specified the command to start the server, installed the required dependencies, and
set up environment variables. Render [9] provided easy integration with databases
and other services required by the back-end, such as MongoDB [1] and Firebase
[6]. We were also able to customize the domain name, SSL certificates, and other
settings in the Render [9] dashboard.

Overall, Vercel [7] and Render [9] provided easy-to-use and reliable hosting en-
vironments for the quiz app, with efficient scaling capabilities and competitive
pricing.

17
Chapter 6

Future Works

6.1 Potential Improvements to the Project

Some potential add-ons to the quiz app built with the MERN stack include:

• The quiz app currently supports only multiple-choice questions. We would

like to include some other question types, such as true/false, fill-in-the-
blanks, etc.

• The app might be improved by including features such as an advanced leader-

board where users can compare their scores with other users and a timer that
tracks how long it takes to complete the quiz.

• By adding animations, better coloring, and more interactive components,

the user interface can be made better appealing and user-friendly.

• The app’s performance can be improved by optimizing it and using the cache,
load balancer, etc.

6.2 Possible Expansion to the System

Some more advanced type of quiz features, such as the ability to create different
types of questions (e.g. multiple choice, true/false, short answer), also support
for an image in some questions, and the ability to create different types of quizzes
(e.g. live quiz), can be added to the quiz app system.

Another potential expansion could be to add more user management features, such
as the ability to create and manage groups of users, track user progress, and pro-

18
vide personalized recommendations for future quizzes based on past performance.

Additionally, integrating the quiz app with social media platforms for sharing and
promoting quizzes and adding support for multiple languages could be considered
potential expansions of the system.

19
Chapter 7

Conclusion

7.1 Summary of the Project

The project is a quiz application developed using the MERN (MongoDB [1], Ex-
press.js [2], React.js [3], Node.js [4]) stack, Redux [5], Firebase [6], and Tailwind
CSS [7]. The main objective of the project is to provide an interactive quiz plat-
form to users. The project includes features like authentication, creating and
attempting quizzes, displaying results, and managing user accounts.

During the development process, challenges were faced in areas like date and time
calculation and mobile responsiveness, but these were overcome with solutions
using a time library and implementing a responsive design with Tailwind CSS [7].

The testing process involved manual testing as well as testing with our juniors.
The results of the tests conducted were mostly successful.

The deployment process involved deploying the front-end on Vercel [8] and the
back-end on Render [9]. The hosting environment and configuration were ex-
plained in detail.

Possible improvements to the project include adding features like social media
sharing and a larger variety of question types.

Overall, the project was a successful implementation of a quiz application using

modern web development technologies.

20
7.2 Achievements and Limitations of the Project
The project’s success is that it allows students to attempt quizzes and get their
answers in a PDF file. The leaderboard feature in the app also adds another
flavor to the quizzes. However, the project has a problem in that it only supports
a limited number of question types. This could be improved in future aspects
of the project to make it more adaptable and appropriate for a wider range of
educational contexts. Furthermore, we want to add features like live quizzes and
more complex machine learning analysis to help teachers better understand their
student’s performance.

7.3 Lessons Learned During the Project

Some potential lessons learned during a project could include:

7.3.1 Effective Communication

The importance of clear and regular communication between team members can-
not be overstated. This helps us to avoid misunderstandings and ensure everyone
is on the same page.

7.3.2 Planning and Organization

Proper planning and organization help us to ensure the project stays on track
and meets its objectives. This includes creating a project timeline, breaking down
tasks into manageable chunks, and assigning responsibilities.

7.3.3 Flexibility and Adaptability

Projects rarely go exactly according to plan, so being flexible and adaptable is cru-
cial. This involves adjusting timelines, revising objectives, or changing strategies
as needed.

7.3.4 Testing and Quality Assurance

Rigorous testing and quality assurance help us to catch bugs and issues before
they become major problems. This involves testing the system in a variety of en-
vironments and scenarios, as well as using automated testing tools where possible.

21
References

[1] MongoDB. (2021). MongoDB - The most popular database for modern ap-
plications. [online] Available at: https://www.mongodb.com/ [Accessed 14 May
2023].

[2] Express. (2021). Express - Node.js web application framework. [online] Avail-
able at: https://expressjs.com/ [Accessed 14 May 2023].

[3] React. (2021). React - A JavaScript library for building user interfaces. [online]
Available at: https://reactjs.org/ [Accessed 14 May 2023].

[4] Node.js. (2021). Node.js - JavaScript runtime. [online] Available at: https://nodejs.org/
[Accessed 14 May 2023].

[5] Redux. (2021). Redux - A predictable state container for JavaScript apps.
[online] Available at: https://redux.js.org/ [Accessed 14 May 2023].

[6] Firebase. (2021). Firebase - App development platform. [online] Available at:
https://firebase.google.com/ [Accessed 14 May 2023].

[7] Tailwind CSS. (2021). Tailwind CSS - A utility-first CSS framework. [online]
Available at: https://tailwindcss.com/ [Accessed 14 May 2023].

[8] Vercel. (2021). Vercel - Develop. Preview. Ship. [online] Available at:
https://vercel.com/ [Accessed 14 May 2023].

[9] Render. (2021). Render - The easiest cloud for all your apps and websites.
[online] Available at: https://render.com/ [Accessed 14 May 2023].

[10] GitHub. (2021). GitHub - Where the world builds software. [online] Available
at: https://github.com/ [Accessed 14 May 2023].

22