📚 E-Learning Quiz Generator (Full-Stack Web App)

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.

---

🧠 Features

👨‍🏫 For Educators

• 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.

👩‍🎓 For Students

• Register and take quizzes assigned by educators.
• Real-time score tracking and quiz result viewing.
• View quiz history and performance analytics.

---

🛠️ Tech Stack

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

---

📂 Project Structure

root/
├── client/             # React frontend
│   ├── src/
│   │   ├── components/
│   │   ├── context/
│   │   ├── screens/
│   │   └── App.js
├── server/             # Node.js backend
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   ├── config/
│   └── server.js

---

⚙️ Setup Instructions

🧪 Prerequisites

• Node.js >= 18
• MongoDB (local or Atlas)
• npm or yarn

---

🚀 Installation

1. Clone the Repository

git clone https://github.com/yourusername/e-learning-quiz-app.git
cd e-learning-quiz-app

2. Setup Environment Variables

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

---

3. Install Dependencies

# Backend
cd server
npm install

# Frontend
cd ../client
npm install

---

📦 Run the App

Development (Concurrent Servers)

# Terminal 1
cd server
npm run server

# Terminal 2
cd client
npm start

Visit http://localhost:3000

---

👥 User Roles

Role	Access
Educator	Create/manage quizzes, view attempts, access quiz stats
Student	Take quizzes, view results, see personal attempt history

---

🔐 Authentication

• Implemented using JWT (JSON Web Tokens)
• Tokens stored in localStorage
• Protected routes using middleware (protect, authorizeRoles)
• Context-based user session management on frontend

---

📊 Statistics and Attempts

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

---

📤 API Endpoints Overview

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)

---

📸 UI Highlights

• Responsive and clean interface
• Form validation with error feedback
• Interactive dashboards for both user roles
• Conditional rendering based on login state

---

🚧 Future Enhancements

• Add support for image-based questions
• Export reports in PDF/CSV format
• Password reset flow

---

🤝 Contributing

1. Fork the repo
2. Create your feature branch: git checkout -b feature/my-feature
3. Commit changes: git commit -am 'Add feature'
4. Push to branch: git push origin feature/my-feature
5. Open a Pull Request 🚀

---

📝 License

This project is open-source under the MIT License.

---

👨‍💻 Author

Wali Mohammad Kadri
LinkedIn | GitHub

---

Built with ❤️ to simplify digital learning and assessment.