SkillBridge - Modern Learning Platform

A full-stack online learning platform built with React, Express, MongoDB, and integrated with Clerk authentication, Cloudinary for media storage, and Stripe for payments.

Features

For Students

• 🎓 Browse and search courses
• 📚 Enroll in courses with Stripe payment
• 🎥 Watch video lectures with progress tracking
• ⭐ Rate and review courses
• 📊 Track learning progress
• 💳 Secure payment processing

For Educators

• 📝 Create and manage courses
• 🎬 Upload video content via Cloudinary
• 📊 View dashboard with earnings and statistics
• 👥 Track enrolled students
• ✏️ Edit course content and pricing
• 🗑️ Delete courses

Tech Stack

Frontend

• React 18 - UI framework
• React Router v6 - Navigation
• Clerk - Authentication and user management
• Axios - HTTP client
• Tailwind CSS - Styling
• Quill - Rich text editor for course descriptions
• React Toastify - Toast notifications
• Vite - Build tool

Backend

• Node.js - Runtime
• Express 5 - Web framework
• MongoDB - Database
• Mongoose - ODM for MongoDB
• Clerk Express - Server-side authentication
• Cloudinary - Media storage and CDN
• Stripe - Payment processing
• Multer - File upload handling
• Svix - Webhook verification

Project Structure

SkillBridge/
├── client/                 # Frontend React app
│   ├── src/
│   │   ├── components/    # Reusable components
│   │   │   ├── educator/  # Educator-specific components
│   │   │   └── student/   # Student-specific components
│   │   ├── context/       # React context providers
│   │   ├── pages/         # Page components
│   │   │   ├── educator/  # Educator pages
│   │   │   └── student/   # Student pages
│   │   └── assets/        # Static assets
│   ├── public/            # Public assets
│   └── dist/              # Production build
│
├── server/                # Backend Express API
│   ├── config/            # Configuration files
│   ├── controllers/       # Request handlers
│   ├── middlewares/       # Custom middleware
│   ├── models/            # Mongoose models
│   └── routes/            # API routes
│
├── DEPLOYMENT.md          # Deployment guide
└── ENV_README.md          # Environment setup guide

Getting Started

Prerequisites

• Node.js 18+ installed
• MongoDB (local or MongoDB Atlas)
• Clerk account for authentication
• Cloudinary account for media storage
• Stripe account (optional, for payments)

Installation

1. Clone the repository

git clone <your-repo-url>
cd LMS

2. Install dependencies

# Install client dependencies
cd client
npm install

# Install server dependencies
cd ../server
npm install

3. Configure environment variables

Client (client/.env.local):

VITE_BACKEND_URL=http://localhost:5000
VITE_CLERK_PUBLISHABLE_KEY=pk_test_your_key_here

Server (server/.env):

PORT=5000
MONGODB_URI=mongodb://localhost:27017
CLERK_SECRET_KEY=sk_test_your_key_here
CLERK_WEBHOOK_SECRET=whk_your_secret_here
CLOUDINARY_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_SECRET_KEY=your_secret_key
STRIPE_SECRET_KEY=sk_test_your_stripe_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

See ENV_README.md for detailed setup instructions.

4. Start development servers

Terminal 1 - Backend:

cd server
npm run server

Terminal 2 - Frontend:

cd client
npm run dev

The frontend will be available at http://localhost:5173 and the backend at http://localhost:5000.

API Endpoints

Public Routes

• GET / - Health check
• GET /api/course/all - Get all courses
• GET /api/course/:courseId - Get course details

Protected User Routes

• GET /api/user/data - Get user data
• GET /api/user/enrolled-courses - Get user's enrolled courses
• POST /api/user/checkout - Create Stripe checkout session
• PUT /api/user/update-progress - Update course progress
• GET /api/user/course-progress/:courseId - Get course progress

Protected Educator Routes

• POST /api/educator/update-role - Update user role to educator
• POST /api/educator/add-course - Add new course
• GET /api/educator/courses - Get educator's courses
• GET /api/educator/course/:courseId - Get single course for editing
• PUT /api/educator/course/:courseId - Update course
• DELETE /api/educator/course/:courseId - Delete course
• GET /api/educator/dashboard - Get dashboard data
• GET /api/educator/enrolled-students - Get enrolled students

Webhook Routes

• POST /clerk - Clerk user sync webhook
• POST /stripe - Stripe payment webhook

Database Models

User

• Stores user information synced from Clerk
• Tracks enrolled courses
• References: enrolledCourses (Course)

Course

• Course details (title, description, price, discount)
• Course content (chapters and lectures)
• Enrolled students
• Ratings and reviews
• References: educator (User), enrolledStudents (User)

Purchase

• Payment records
• Links courses to users
• Status tracking (pending, completed, failed)
• References: userId (User), courseId (Course)

CourseProgress

• Tracks user progress in courses
• Completed lectures tracking
• References: userId (User), courseId (Course)

Deployment

See DEPLOYMENT.md for detailed deployment instructions covering:

• Environment variable setup
• Building for production
• Deployment to Vercel/Netlify
• Webhook configuration
• Security checklist

Quick Production Build

# Build client
cd client
npm run build

# Preview production build
npm run preview

# Start production server
cd ../server
NODE_ENV=production node server.js

Development Tips

Running in Development

• Use npm run server (nodemon) for auto-restart on server changes
• Use npm run dev (Vite) for hot module replacement on client changes

Debugging

• Check browser console for client-side errors
• Check server terminal for API errors
• Use MongoDB Compass to inspect database
• Use Stripe CLI for webhook testing locally

Code Quality

• ESLint configured for both client and server
• All debug console.log statements removed for production
• Proper error handling with user-facing messages
• Environment variables for all secrets

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

License

This project is licensed under the ISC License.

Support

For issues and questions:

• Check DEPLOYMENT.md for deployment issues
• Review ENV_README.md for environment setup
• Open an issue on GitHub

Acknowledgments

• Clerk for authentication
• Stripe for payment processing
• Cloudinary for media management
• MongoDB Atlas for database hosting