A comprehensive E-Learning MERN Fullstack Application built with React, Node.js, Express, TypeScript, and MongoDB. Features complete authentication system, role-based access control, and modern UI with Tailwind CSS.
- ⚡ TypeScript-powered Express server
- 🗄️ MongoDB (Atlas) integration with Mongoose
- 🔐 Complete JWT authentication system
- 👥 Role-based access control (Student, Instructor, Admin)
- 🛡️ Secure password hashing with bcrypt
- ⚙️ Environment validation with Zod
- 🚨 Centralized error handling
- 📝 Shared TypeScript interfaces
- ⚛️ React 19 with TypeScript
- ⚡ Vite for fast development
- 🎨 Tailwind CSS for styling
- 📱 Responsive design ready
- 🔧 ESLint configuration
- Framework: Express.js
- Language: TypeScript
- Database: MongoDB (Atlas)
- ODM: Mongoose
- Authentication: JWT + bcrypt
- Validation: Zod
- Environment: dotenv
- Framework: React 19
- Language: TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- Linting: ESLint
git clone https://github.com/Boaz-marube/E-Learning-App.git
cd E-Learning-Appcd server
npm installEnvironment Configuration
Create a .env file in the server directory:
MONGO_USERNAME=yourMongoUsername
MONGO_PASSWORD=yourMongoPassword
SERVER_PORT=8090
SERVER_ROUNDS=10
JWT_SECRET=your-super-secure-jwt-secret-key-at-least-32-characters-long
JWT_EXPIRES_IN=7dStart Backend Server
npm run dev👉 Backend runs on: http://localhost:8090
cd ../client
npm installStart Frontend Server
npm run dev👉 Frontend runs on: http://localhost:5173
POST /api/auth/signup- User registrationPOST /api/auth/login- User authenticationPOST /api/auth/reset-password- Password resetGET /api/auth/profile- Get user profile (Protected)
GET /health- Server health status
E-Learning-App/
├── client/ # React Frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom hooks
│ │ ├── utils/ # Utility functions
│ │ ├── App.tsx # Main App component
│ │ └── main.tsx # Entry point
│ ├── public/ # Static assets
│ ├── tailwind.config.js # Tailwind configuration
│ ├── vite.config.ts # Vite configuration
│ └── package.json # Frontend dependencies
│
├── server/ # Node.js Backend
│ ├── src/
│ │ ├── config/ # Configuration files
│ │ │ └── config.ts # Environment & DB config
│ │ ├── controllers/ # Route controllers
│ │ │ └── authController.ts
│ │ ├── middleware/ # Custom middleware
│ │ │ ├── authMiddleware.ts
│ │ │ ├── roleMiddleware.ts
│ │ │ └── errorMiddleware.ts
│ │ ├── models/ # Mongoose schemas
│ │ │ ├── userModel.ts
│ │ │ ├── courseModel.ts
│ │ │ └── enrollmentModel.ts
│ │ ├── routes/ # API routes
│ │ │ ├── authRoutes.ts
│ │ │ └── index.ts
│ │ ├── utils/ # Utility functions
│ │ │ ├── jwt.ts # JWT utilities
│ │ │ └── errorHandler.ts
│ │ └── server.ts # Entry point
│ ├── .env # Environment variables
│ └── package.json # Backend dependencies
│
├── types/ # Shared TypeScript types
│ └── shared.ts # Common interfaces
│
└── README.md # Project documentation# Health Check
curl http://localhost:8090/health
# User Signup
curl -X POST http://localhost:8090/api/auth/signup \
-H "Content-Type: application/json" \
-d '{"name":"John Doe","email":"john@example.com","password":"password123","role":"student"}'
# User Login
curl -X POST http://localhost:8090/api/auth/login \
-H "Content-Type: application/json" \
-d '{"email":"john@example.com","password":"password123"}'This project is licensed under the MIT License.
| Name | Role | GitHub |
|---|---|---|
| [Boaz Marube] | Full Stack Developer | @Boaz-marube |
| [Bereket Eshete] | Full Stack Developer | @Bereket-Eshete |
| [Sena Kebede] | Gen AI Developer | @SenaKebe |
| [Mahder Hawaz] | Full Stack Developer | @mahderhawaz |
| [June Kwamboka] | UI/UX Designer | |
| [Solomon Nderitu] | Gen AI Developer | @Solomon-Nderit |
| [Nuhamin W] | UI/UX Designer | |
| [Finlay Ndung'u] | UI/UX Designer |