Project Report

ON
MindSprint (quiz app)
Submitted by
Kanupriya (24MCA20508)
Submitted to
Ms. Winky
Date: 10/04/2025
In partial fulfilment for the award of the degree of
Masters Of Computer Application
IN
UNIVERSITY INSTITUTE OF COMPUTING (UIC)

Chandigarh University

April-2025
 Acknowledgment
In performing our project, I would like to show our gratitude to all the faculty members of
University Institute of Computing, Chandigarh University for giving me a good guideline for the
project throughout numerous consultations. I would also like to expand our deepest gratitude
to all those who have directly and indirectly guided me in completion of this project.

In addition, a thank you to Ms. Winky, my mentor who introduced me to the Art of Computer
Programming, and her passion for the “underlying structures” had lasting effect. I also thank the
University of Chandigarh for consent to include copyright pictures as a part of our paper.

I thank all the people for their help directly and indirectly to complete my assignment.
 Table of Contents

S. No. Particulars Page No. Remarks

1. Introduction

2. Technology used

3. Folder Structure

4. Workflow

5. Security and Authentication

6. Benefits

7. Code

8. Output

9. Findings

10. Conclusion
 1. Introduction
The Quiz App is a web-based application that allows users to take multiple-choice quizzes,
record their scores, and view their performance on a leaderboard. It is designed using the
MERN stack (MongoDB, Express.js, React, Node.js) and emphasizes:

• Modern frontend experience

• Secure backend with token-based authentication

• Scalable database for user data and quiz records

• Modular architecture for maintainability and performance

The main goals of the project are:

• To build a real-world, full-stack application

• To understand frontend-backend integration

• To implement secure authentication using JWT

• To learn database modeling with Mongoose

1. Technologies Used
❖ Frontend (React + Vite)
• React is a component-based JavaScript library used to build the UI.

• Vite is a build tool that serves as a faster alternative to Create React App.

• Routing is handled by react-router-dom, allowing navigation between pages.

• Data fetching is done using the Fetch API or Axios for backend communication.

• JWT Authentication is implemented by storing the token in local Storage.

Frontend Pages Overview:

• Home: Welcomes users and guides them to login or start quiz

• Register: New users sign up

• Login: Existing users authenticate

• Quiz: Interactive quiz screen where questions are answered

• Result: Shows final score

1
 • Leaderboard: Displays top scores of all users

✓ React (Library for Building UI)

React is the core of your frontend. It's a JavaScript library used to build user interfaces in a
component-based architecture.

Key Concepts Used:

• JSX (JavaScript XML): Lets you write HTML inside JavaScript.

• Components: UI parts built as functions (e.g., <Quiz />, <Login />, <Leaderboard />).

• Props and State: Control dynamic content and behavior.

• Hooks: Like useState() and useEffect() to manage data and side effects.

React Router (Navigation & Routing)

Used for client-side navigation, enabling SPA (Single Page Application) behavior without page
reloads.

Defined Routes:

• / → Home

• /register → Register page

• /login → Login page

• /quiz → Quiz screen

• /result → Final score page

• /leaderboard → Leaderboard rankings

Example:

jsx

<Routes>

<Route path="/" element={<Home />} />

<Route path="/login" element={<Login />} />

</Routes>

2
 Features Used:

• Dynamic routing

• Route protection (e.g., redirecting unauthorized users)

• Navigation via useNavigate()

✓ HTTP Communication (Fetch API or Axios)

Used to connect the frontend with the backend Express API.

Tasks Handled:

• GET /questions/random/10 – fetch 10 quiz questions.

• POST /register and POST /login – user authentication.

• POST /attempts – submit score after quiz.

• GET /attempts/leaderboard – display leaderboard.

✓ Component-Based Page System

• Each page (Login, Register, Quiz, etc.) is a separate component in the /src/pages/
folder.

Folder Structure:

vite-frontend/

├── src/

│ ├── pages/

│ │ ├── Home.jsx

│ │ ├── Register.jsx

│ │ ├── Login.jsx

│ │ ├── Quiz.jsx

│ │ ├── Result.jsx

│ │ └── Leaderboard.jsx

Example Component: Quiz.jsx

3
Handles:

• Fetching questions
• Rendering question and options
• Tracking user score
• Submitting the result

✓ Frontend Flow Summary

1. User lands on Home page.

2. Registers or logs in → receives JWT.

3. JWT stored in local Storage.

4. Starts quiz → fetches questions via API.

5. Answers tracked → submitted at the end.

6. Result shown → leaderboard displayed.

❖ Backend (Node.js + Express)

• Express.js is used to create RESTful APIs to handle user registration, login, question
fetching, and score submission.

• dotenv manages environment variables securely.

• JWT is used for secure, stateless authentication.

• Middleware: Custom middleware verifies JWT tokens before protected routes are
accessed.

2. Folder Structure Overview

The project is divided into two main directories: backend/ and vite-frontend/.

• Backend:

o controllers/: Logic for login, registration, quiz handling

o middleware/: JWT auth logic

o models/: Mongoose schemas for User, Question, and Quiz Attempt

o routes/: API endpoints (login, fetch questions, submit attempt)

4
• Frontend:

o pages/: React pages (e.g., Login, Quiz, Result)

o components/: Optional reusable UI elements

o utils/: Utility functions (like API calls)

3. Workflow
1. User Registers or Logs In

o User fills out form → frontend sends data to backend via POST /api/register or
/api/login

o On success, backend returns a JWT token

o Token is saved in local Storage

2. Starting a Quiz

o User clicks “Start Quiz” → frontend fetches 10 questions via GET

/api/questions/random/10

o Questions are displayed one by on

3. Quiz Interaction

o Answers are stored in React state

o After last question, final score is calculated

4. Submitting Score

o Frontend sends score to backend via POST /api/attempts

o Backend saves score under the logged-in user ID

5. Leaderboard

o Frontend fetches scores via GET /api/attempts/leaderboard

o Scores are sorted and displayed

4. Security & Authentication

• JWT ensures that only authenticated users can submit scores or view sensitive data.

• Passwords are hashed using bcrypt before saving in the database.

5
 • Protected Routes: Middleware checks the JWT before granting access to routes like
/api/attempts.

Example:
If a user tries to submit a quiz without logging in, the backend will reject the request.

5. Benefits
Easy Registration & Login

• Simple and intuitive forms for signing up and logging in.

Interactive Quiz Flow

• Presents questions one-by-one with score tracking.

• Provides immediate results, improving user engagement.

Leaderboard Motivation

• Competitive element encourages repeated engagement and improvement.

Responsive Design

• Can be optimized for desktop, tablet, and mobile devices.

Reusable Platform

• Can be turned into a SaaS product for training, HR assessments, or e-learning.

Admin Dashboard (Extendable)

• Future versions could include an admin panel to manage questions and users.

Performance Insights

• With slight enhancement, can generate analytics on question difficulty and user trends.

6. Code
✓ Quiz
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
const BASE_URL = import.meta.env.VITE_API_BASE_URL;
function Quiz() {
useEffect(() => {
fetch(`${BASE_URL}/questions/random/10`)

6
 }, []);
useEffect(() => {
if (timer === 0) {
handleAnswer(null); // auto-skip if no answer
}
const interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
return () => clearInterval(interval);
}, [timer]);

useEffect(() => {
setTimer(10); // reset timer when moving to next question
}, [current]);
const handleAnswer = (option) => {
const correct = questions[current]?.correctAnswer;
if (option === correct) setScore((prev) => prev + 1);

if (current + 1 < questions.length) {

setCurrent((prev) => prev + 1);
} else {
navigate("/result", { state: { score, total: questions.length } });
}
};

if (questions.length === 0) return <p>Loading quiz...</p>;

const q = questions[current];

export default Quiz;

✓ Result
import { useLocation, useNavigate } from "react-router-dom";
import { useState } from "react";
function Result() {
const handleSubmit = async () => {
if (!username) return alert("Please enter your name");
try {
await fetch(`${BASE_URL}/leaderboard`, {
method: "POST",
headers: {
"Content-Type": "application/json",

7
 },
body: JSON.stringify({ username, score, total }),
});
navigate("/leaderboard");
} catch (err) {
console.error(err);
alert("Error saving score");
}
};
return (
<div style={{ padding: "1rem" }}>
<h2>Quiz Completed!</h2>
<p>
Your Score: {score} / {total}
</p>
<input
type="text"
placeholder="Enter your name"
value={username}
onChange={(e) => setUsername(e.target.value)}
style={{
body: "100vw",
margin: "1rem 0",
padding: "0.5rem",
width: "200px",
}}
/>
<br />
<button onClick={handleSubmit}>Submit Score</button>
</div>
);
}
export default Result;
✓ login
import { useState } from "react";
import { useNavigate } from "react-router-dom"
const BASE_URL = import.meta.env.VITE_API_BASE_URL;
function Login() {

8
 const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const navigate = useNavigate();
const handleLogin = async (e) => {
e.preventDefault();
localStorage.setItem("token", data.token);
navigate("/quiz");
}
export default Login;
7. Output

9
10
8. Conclusion
The Quiz App project successfully demonstrates the integration of modern web
development technologies to create an interactive, secure, and scalable platform for
conducting online quizzes. The frontend, built with React and Vite, provides a fast and
responsive user interface, while the backend, powered by Node.js and Express, handles
authentication, data processing, and API routing efficiently.
Data persistence is achieved through MongoDB, with Mongoose ensuring a structured
and consistent schema across collections. The use of JWT for authentication and bcrypt
for password hashing ensures secure access and user data protection.
Overall, this system can be expanded further into a more feature-rich learning platform
by introducing features like admin dashboards, category-based quizzes, user analytics,
and timer-based assessments. It stands as a solid foundation for both educational
purposes and real-world deployment.

11