Online Quiz App Development using MERN Stack

Prabhat

Prabhat Kumar

Online-Quiz-App-Website (MERN)

Features:

Working with complex MongoDB, queries, schemas, models.
Separate User Interfaces for Users, Admins.
JWT Authentication and Password Hashing.
Admin can add exams with questions , options and answers.
Real time updates for all the crud operations in Questions and Exams Module.
Timer functionality for Exam Sessions.
Live Result Functionality after writting the exams.
Storing the results into Mongo DB.
Separate Reports / Analatics functionality for both Admin and User.
A leaderboard too for admin only
A light/dark theme switch
Questions with multiple correct Answers too

Tech Stack Used:

Front-End:
Back-End:
Database:

Project Structure

quiz-app/ ├── frontend/ # React app ├── backend/ # Node.js backend ├── package.json # Monorepo root package.json (for workspaces) └── README.md # This file

Installation

Step 1: Clone the repository

git clone https://github.com/Prabhat2912/Quiz-app.git

Step 2: Install dependencies

This project uses npm workspaces. To install dependencies for both frontend and backend, run:
npm install
This will install all dependencies for both the frontend and backend workspaces.

Step 3: Set up environment variables

Create a .env file in the backend/ directory and add the following environment variables:
PORT=5000
MONGO_URI=your-mongodb-uri
JWT_SECRET=your-jwt-secret
In the frontend/ directory, create a .env file with the following:
REACT_APP_API_URL=http://localhost:5000/api

Step 4: Run the application

Use the following command to start both the frontend and backend together:
npm run start
This will:
Start the frontend React app at http://localhost:3000 Start the backend Node.js server at http://localhost:5000

Step 5: Access the app

Go to http://localhost:3000 to access the homepage. Admin users can access the admin panel from /admin. Regular users can log in and take quizzes.
Like this project

Posted May 5, 2025

Developed a MERN stack online quiz app with admin and user interfaces.

Likes

0

Views

0

Timeline

Sep 11, 2024 - Sep 26, 2024