A full-featured MERN stack web application where users can browse courses, enroll with seat limits, and manage their enrolled courses. Built with React, Tailwind CSS, Firebase, Express.js, MongoDB, and JWT.
The Course Management System helps users explore and enroll in various courses. Admins or users can add and manage their own courses. This project demonstrates skills in authentication (JWT + Firebase), route protection, CRUD operations, MongoDB, dynamic UI, and secure deployments.
- 🔐 User Authentication (Firebase + JWT)
- 🧭 Role-based Navigation & Route Protection
- 🎓 Add, Edit, Delete & Manage Own Courses
- ✅ Enroll in Courses (Max 3 Per User)
- 📉 Limited Seat Handling with Real-Time Updates
- 📌 Enrolled Courses Page with Remove Option
- 📦 MongoDB Database Integration
- 🌈 Responsive UI with Dark/Light Mode
- 🎬 Banner Slider with framer-motion Animations
- 🔍 Popular & Latest Courses Section
- 🚫 Custom 404 Page
- 🔁 Persistent Login on Refresh (No Redirect Issue)
- 🧠 Dynamic Title Based on Route
- 🔔 Toast Notifications for All Actions
- ⏳ Loading Spinners on Data Fetch
- 📃 Form Validation on Register & Add/Edit Course
- 🔗 Social Login (Google, GitHub)
⚠️ .env Security for Firebase and MongoDB Keys
Frontend:
- React.js
- Tailwind CSS
- framer-motion
- react-slick
- react-icons
- react-router-dom
- react-hot-toast
- shadcn/ui
Backend:
- Node.js
- Express.js
- MongoDB
- JWT (jsonwebtoken)
- CORS
- dotenv
Authentication:
- Firebase Authentication (Email/Password, Google, GitHub)
- JWT Token-Based API Protection