An intuitive full-stack application that enables educators to create quizzes and students to attempt them in a streamlined digital environment. Built with MERN Stack (MongoDB, Express, React, Node.js) and fully equipped with authentication, quiz tracking, attempt analytics, and role-based dashboards.
- Create and manage quizzes from a question bank.
- Organize questions by category and difficulty.
- Choose between standard or timed quizzes.
- View detailed statistics and student attempts.
- Register and take quizzes assigned by educators.
- Real-time score tracking and quiz result viewing.
- View quiz history and performance analytics.
Layer | Tech |
---|---|
Frontend | React, React Router DOM |
Backend | Express.js, Node.js |
Database | MongoDB (Mongoose ODM) |
Auth | JWT + Context API |
Styling | CSS, inline styles |
API Handling | Axios |
Dev Tools | Nodemon, ESLint, dotenv |
root/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ ├── context/
│ │ ├── screens/
│ │ └── App.js
├── server/ # Node.js backend
│ ├── models/
│ ├── routes/
│ ├── middleware/
│ ├── config/
│ └── server.js
- Node.js >= 18
- MongoDB (local or Atlas)
- npm or yarn
git clone https://github.com/yourusername/e-learning-quiz-app.git
cd e-learning-quiz-app
Create a .env
file in the server/
directory with the following:
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
NODE_ENV=development
PORT=5000
# Backend
cd server
npm install
# Frontend
cd ../client
npm install
# Terminal 1
cd server
npm run server
# Terminal 2
cd client
npm start
Visit http://localhost:3000
Role | Access |
---|---|
Educator | Create/manage quizzes, view attempts, access quiz stats |
Student | Take quizzes, view results, see personal attempt history |
- Implemented using JWT (JSON Web Tokens)
- Tokens stored in localStorage
- Protected routes using middleware (
protect
,authorizeRoles
) - Context-based user session management on frontend
Educators can:
- View total attempts, average, highest, and lowest scores
- Review each attempt’s detailed answers and correctness
- Monitor student progress via
/api/attempts/stats/:quizId
Method | Endpoint | Access | Description |
---|---|---|---|
POST | /api/auth/login |
Public | Login |
POST | /api/auth/register |
Public | Register |
GET | /api/quizzes/available |
Student | List quizzes |
POST | /api/quizzes/ |
Educator | Create quiz |
GET | /api/quizzes/my-quizzes |
Educator | View created quizzes |
POST | /api/quizzes/questions |
Educator | Add question |
GET | /api/quizzes/questions |
Educator | View question bank |
POST | /api/attempts/start |
Student | Start quiz |
POST | /api/attempts/submit |
Student | Submit attempt |
GET | /api/attempts/stats/:quizId |
Educator | View quiz stats |
(Full API details in server/routes
directory)
- Responsive and clean interface
- Form validation with error feedback
- Interactive dashboards for both user roles
- Conditional rendering based on login state
- Add support for image-based questions
- Export reports in PDF/CSV format
- Password reset flow
- Fork the repo
- Create your feature branch:
git checkout -b feature/my-feature
- Commit changes:
git commit -am 'Add feature'
- Push to branch:
git push origin feature/my-feature
- Open a Pull Request 🚀
This project is open-source under the MIT License.
Wali Mohammad Kadri
LinkedIn | GitHub
Built with ❤️ to simplify digital learning and assessment.