E-Learning Platform with Gamification

A comprehensive full-stack e-learning platform with built-in gamification features to boost student engagement and motivation.

🌟 Features

👤 User Module

• Student Registration & Login: Secure authentication with JWT
• View Courses: Browse all available courses
• Watch Lessons: Access video and text-based lessons
• Attempt Quizzes: Take quizzes and get instant feedback
• Earn Points & Badges: Gain rewards for completing activities
• View Profile: Manage personal information and achievements

📚 Course Module

• Course List: Browse all available courses by category and level
• Video/Text Lessons: Rich multimedia learning content
• Progress Tracking: Monitor your learning journey
• Resource Management: Access supplementary materials

🎮 Gamification Module

• Points System: Earn points for quiz completion
• Badges: Collect achievements based on milestones
• Levels: Progress through levels based on total points
• Leaderboard: Compete with other learners globally

🧑‍🏫 Admin Module

• Add Courses & Lessons: Create comprehensive course content
• Add Quizzes: Design assessments for lessons
• Manage Badges: Create achievement milestones
• View Student Performance: Track individual and class progress
• Dashboard Statistics: Overview of platform metrics

🛠️ Tech Stack

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB
• Authentication: JWT
• Password Hashing: bcryptjs

Frontend

• Library: React 18
• Routing: React Router v6
• HTTP Client: Axios
• Icons: React Icons
• Styling: CSS3

📁 Project Structure

e-learn/
├── backend/
│   ├── models/
│   │   ├── User.js
│   │   ├── Course.js
│   │   ├── Lesson.js
│   │   ├── Quiz.js
│   │   ├── QuizAttempt.js
│   │   ├── Badge.js
│   │   └── Progress.js
│   ├── controllers/
│   │   ├── authController.js
│   │   ├── userController.js
│   │   ├── courseController.js
│   │   ├── gamificationController.js
│   │   └── adminController.js
│   ├── routes/
│   │   ├── auth.js
│   │   ├── users.js
│   │   ├── courses.js
│   │   ├── quizzes.js
│   │   ├── gamification.js
│   │   └── admin.js
│   ├── middleware/
│   │   └── auth.js
│   ├── server.js
│   ├── package.json
│   └── .env.example
└── frontend/
    ├── src/
    │   ├── pages/
    │   │   ├── Login.js
    │   │   ├── Register.js
    │   │   ├── Dashboard.js
    │   │   ├── Courses.js
    │   │   ├── CourseDetail.js
    │   │   ├── Quiz.js
    │   │   ├── Profile.js
    │   │   ├── Leaderboard.js
    │   │   └── AdminDashboard.js
    │   ├── components/
    │   │   └── Navbar.js
    │   ├── services/
    │   ├── App.js
    │   ├── App.css
    │   ├── index.js
    │   └── index.css
    ├── public/
    │   └── index.html
    └── package.json

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or cloud instance)
• npm or yarn

Backend Setup

1. Navigate to backend directory

   cd backend

2. Install dependencies

   npm install

3. Create .env file

   cp .env.example .env

4. Update .env with your configuration

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/elearn
   JWT_SECRET=your_secret_key_here
   NODE_ENV=development
   FRONTEND_URL=http://localhost:3000
   

5. Start MongoDB (if local)

   mongod

6. Run backend server

   npm start        # production
   npm run dev      # development with auto-reload

Frontend Setup

1. Navigate to frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Start development server

   npm start

4. Build for production

   npm run build

The app will open at http://localhost:3000

📡 API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user

Users

• GET /api/users/profile - Get user profile
• PUT /api/users/profile - Update profile
• POST /api/users/enroll - Enroll in course
• GET /api/users/courses - Get enrolled courses

Courses

• GET /api/courses - Get all courses
• GET /api/courses/:id - Get course details
• GET /api/courses/:courseId/progress - Get course progress
• POST /api/courses/mark-complete - Mark lesson complete

Gamification

• POST /api/gamification/submit-quiz - Submit quiz answers
• GET /api/gamification/attempts/:quizId - Get quiz attempts
• GET /api/gamification/leaderboard - Get leaderboard
• GET /api/gamification/rank - Get user rank

Admin

• POST /api/admin/course - Create course
• POST /api/admin/lesson - Create lesson
• POST /api/admin/quiz - Create quiz
• POST /api/admin/badge - Create badge
• GET /api/admin/students - Get all students
• GET /api/admin/students/:studentId/performance - Get student performance
• GET /api/admin/dashboard/stats - Get dashboard statistics

🎯 Key Features Explained

Points System

Students earn points when they:

• Complete quizzes successfully
• Points are calculated based on quiz difficulty
• Points contribute to level progression

Badge System

Badges are awarded for:

• Reaching certain point milestones (100, 500, 1000, etc.)
• Completing specific number of quizzes
• Custom achievements set by admin

Level System

• Level 1: Starting level
• Each 100 points = 1 level increase
• Levels displayed on leaderboard

Leaderboard

• Shows top 100 students globally
• Ranked by total points
• Displays user level and badges
• Shows user's current rank

🔐 Security Features

• JWT Authentication: Secure token-based authentication
• Password Hashing: Passwords hashed with bcryptjs
• Authorization Middleware: Role-based access control
• CORS Enabled: Cross-origin requests handled safely
• Environment Variables: Sensitive data in .env files

📊 Database Schema

User

• name: String
• email: String (unique)
• password: String (hashed)
• role: String ('student' or 'admin')
• points: Number
• level: Number
• badges: Array of Badge IDs
• enrolledCourses: Array of Course IDs

Course

• title: String
• description: String
• category: String
• level: String
• instructor: ObjectId (User)
• lessons: Array of Lesson IDs
• studentCount: Number

Lesson

• title: String
• course: ObjectId
• content: String
• contentType: String
• videoUrl: String (optional)
• quiz: ObjectId (optional)

Quiz

• lesson: ObjectId
• questions: Array of questions
• passingScore: Number
• totalPoints: Number

QuizAttempt

• student: ObjectId
• quiz: ObjectId
• answers: Array of answers
• score: Number
• percentage: Number
• pointsEarned: Number

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support, email support@elearn.com or open an issue in the repository.

🎓 Learning Resources

• Express.js Documentation
• React Documentation
• MongoDB Documentation
• JWT Introduction

🚀 Future Enhancements

• Real-time notifications
• Video streaming optimization
• Social features (comments, discussions)
• Mobile app
• Advanced analytics
• Payment integration
• Certification system
• AI-powered recommendations

---

Made with ❤️ for educators and learners