🎓 SkillForge - SAAS Course Platform

A full-stack course management platform built with the MERN stack. Features include course creation, student enrollment, lesson management, progress tracking, and a beautiful dark mode interface.

✨ Features

👨‍🏫 For Teachers/Creators

• 📚 Create and manage multiple courses
• 🎬 Upload video lessons with Cloudinary integration
• 👥 View enrolled students and their progress
• 📊 Dashboard with course statistics
• ✏️ Edit and update course content

👨‍🎓 For Students

• 🔍 Browse available courses
• 📖 Enroll in courses
• ▶️ Watch video lessons
• 📈 Track learning progress
• 🆓 Preview free lessons
• 🎯 View personalized dashboard

🎨 General Features

• 🌙 Dark Mode - Full dark mode support with smooth transitions
• 🔐 JWT-based authentication
• 🎨 Modern UI with Tailwind CSS
• 📱 Responsive design (mobile, tablet, desktop)
• 🔔 Notification system
• ⚙️ User settings & preferences
• 💳 Payment integration with Razorpay

🛠️ Tech Stack

Frontend

• React.js - UI library
• React Router - Navigation
• Tailwind CSS - Styling
• Lucide React - Icons
• Axios - HTTP client
• React Toastify - Notifications

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• Bcrypt - Password hashing
• Cloudinary - Media storage
• Razorpay - Payment gateway

📋 Prerequisites

Before you begin, ensure you have installed:

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

🚀 Installation & Setup

1. Clone the repository

git clone https://github.com/Aditya_Gadbail/saas-course-platform.git
cd saas-course-platform

2. Backend Setup

cd SERVER
npm install

Create a .env file in the SERVER directory:

cp .env.example .env

Fill in your environment variables in .env:

PORT=3000
MONGO_URI=your_mongodb_connection_string
JWT_SECRETE=your_jwt_secret_key
NODE_ENV=development

# Cloudinary (for video/image uploads)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Razorpay (for payments)
RAZORPAY_KEY_ID=your_razorpay_key
RAZORPAY_KEY_SECRET=your_razorpay_secret

3. Frontend Setup

cd FRONTEND
npm install

Create a .env file in the FRONTEND directory:

cp .env.example .env

Fill in your environment variables:

REACT_APP_BACKEND_URL=http://localhost:3000
REACT_APP_API_URL=http://localhost:3000/api

4. Run the Application

Start the backend server:

cd SERVER
npm start

Server will run on http://localhost:3000

Start the frontend (in a new terminal):

cd FRONTEND
npm start

Frontend will run on http://localhost:3002

📁 Project Structure

SAAS-COURSE-PLATFORM/
├── FRONTEND/
│   ├── src/
│   │   ├── components/        # Reusable components
│   │   │   ├── Layout/        # Sidebar, Header, DashboardLayout
│   │   │   ├── Card.jsx
│   │   │   └── Button.jsx
│   │   ├── pages/             # Page components
│   │   │   ├── Student/       # Student pages
│   │   │   ├── Teacher/       # Teacher pages
│   │   │   ├── Auth/          # Login, Register
│   │   │   ├── Profile.jsx
│   │   │   └── Settings.jsx
│   │   ├── context/           # Context providers
│   │   │   ├── AuthContext.jsx
│   │   │   └── apiService.js
│   │   └── App.js             # Main app component
│   └── package.json
│
├── SERVER/
│   ├── Controllers/           # Route controllers
│   │   ├── authController.js
│   │   ├── courseController.js
│   │   └── lessonController.js
│   ├── Models/                # Database models
│   │   ├── userSchema.js
│   │   ├── courseSchema.js
│   │   └── lessonSchema.js
│   ├── Routes/                # API routes
│   ├── Middlewares/           # Auth middleware
│   ├── Config/                # Configuration files
│   │   ├── db.js
│   │   ├── cloudinary.js
│   │   └── razorpay.js
│   └── server.js              # Entry point
│
├── .gitignore
└── README.md

🔑 Environment Variables

Server (.env)

Variable	Description	Required
PORT	Server port number	Yes
MONGO_URI	MongoDB connection string	Yes
JWT_SECRETE	Secret key for JWT tokens	Yes
NODE_ENV	Environment (development/production)	Yes
CLOUDINARY_CLOUD_NAME	Cloudinary cloud name	Yes
CLOUDINARY_API_KEY	Cloudinary API key	Yes
CLOUDINARY_API_SECRET	Cloudinary API secret	Yes
RAZORPAY_KEY_ID	Razorpay key ID	Optional
RAZORPAY_KEY_SECRET	Razorpay key secret	Optional

Frontend (.env)

Variable	Description	Required
REACT_APP_BACKEND_URL	Backend API URL	Yes
REACT_APP_API_URL	Backend API endpoint	Yes

🎯 API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• POST /api/auth/logout - Logout user
• GET /api/auth/user-details - Get user details
• GET /api/auth/is-auth - Check authentication

Courses

• GET /api/course - Get all courses
• GET /api/course/:id - Get course by ID
• POST /api/course/create - Create new course
• PUT /api/course/:id - Update course
• DELETE /api/course/:id - Delete course

Lessons

• GET /api/lessons/course/:id - Get lessons by course
• POST /api/lessons/create - Create new lesson
• PUT /api/lessons/:id - Update lesson
• DELETE /api/lessons/:id - Delete lesson

Enrollment

• POST /api/enroll/:courseId - Enroll in course
• GET /api/enroll/check/:courseId - Check enrollment
• GET /api/enroll/courses - Get enrolled courses

Progress

• GET /api/progress/:courseId - Get course progress
• POST /api/progress/update - Update lesson progress

🌙 Dark Mode

The application features a comprehensive dark mode:

• Toggle dark mode from Settings page
• Preference saved in localStorage
• Smooth transitions between themes
• All components support dark mode

👥 User Roles

Student

• Browse and enroll in courses
• Watch video lessons
• Track progress
• View dashboard

Teacher/Creator

• Create and manage courses
• Upload lessons
• View student enrollments
• Manage course content

Admin

• Full system access
• User management
• Course oversight

🤝 Contributing

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

This project is licensed under the MIT License.

🙏 Acknowledgments

• React documentation
• Tailwind CSS
• MongoDB documentation
• Cloudinary for media storage
• Lucide for beautiful icons

---

Made with ❤️ by [Aditya Gadbail]