CourseHub - Professional Course Selling Platform

A full-stack, feature-rich platform for selling coding courses with modules, exercises, projects, and comprehensive notes.

🚀 Features

• Comprehensive Course Structure

  • Organized modules
  • Hands-on coding exercises with test cases
  • Real-world projects for skill building
  • Detailed notes at beginner and advanced levels

• User Management

  • User registration and authentication
  • Student dashboards with progress tracking
  • Instructor profiles and course management
  • Role-based access control

• Learning Features

  • Code exercises with solution validation
  • Project assignments
  • Progress tracking and statistics
  • Certificates upon completion

• Professional UI

  • Responsive design (mobile, tablet, desktop)
  • Modern professional styling with Tailwind CSS
  • Smooth animations and transitions
  • Intuitive navigation

• Payment Integration (Ready for implementation)

  • Stripe integration support
  • Course pricing with discounts
  • Student enrollment tracking

📋 Tech Stack

Frontend

• Next.js 14 - React framework with SSR/SSG
• React 18 - UI library
• Tailwind CSS - Utility-first CSS framework
• Axios - HTTP client
• Zustand - State management (optional)

Backend

• Node.js - JavaScript runtime
• Express - Web framework
• MongoDB - NoSQL database
• Mongoose - MongoDB ORM
• JWT - Authentication
• Bcrypt - Password hashing
• Stripe - Payment processing (optional)

🛠️ Installation & Setup

Prerequisites

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

Frontend Setup

1. Install dependencies:

   npm install
   

2. Create .env.local file from .env.local.example:

   cp .env.local.example .env.local
   

3. Update environment variables in .env.local:

   MONGODB_URI=mongodb://localhost:27017/course-platform
   MONGODB_DB=course-platform
   JWT_SECRET=your_secure_secret_key
   BACKEND_URL=http://localhost:3001
   NEXT_PUBLIC_API_URL=http://localhost:3001
   

4. Run development server:

   npm run dev
   

Frontend will be available at http://localhost:3000

Backend Setup

1. Install backend dependencies from the project root:

   npm install
   

2. Start the backend server from the root with the built-in npm script:

   npm run backend:dev
   

Backend API will be available at http://localhost:3001

If you prefer a single command for both frontend and backend, use:

npm run dev:full

MongoDB Setup

Option 1: Local MongoDB

# Make sure MongoDB is running locally
mongod

Option 2: MongoDB Atlas (Cloud)

• Create account at mongodb.com/cloud/atlas
• Update MONGODB_URI in .env.local

📁 Project Structure

course-platform/
├── src/
│   ├── app/              # Next.js app directory
│   │   ├── page.js       # Homepage
│   │   ├── courses/      # Courses pages
│   │   └── layout.js     # Root layout
│   ├── components/       # Reusable React components
│   │   ├── Header.js
│   │   ├── Hero.js
│   │   ├── CourseGrid.js
│   │   ├── Features.js
│   │   ├── CTA.js
│   │   └── Footer.js
│   ├── lib/              # Utility functions
│   └── styles/           # Global styles
├── backend/
│   ├── models/           # MongoDB schemas
│   │   ├── User.js
│   │   ├── Course.js
│   │   ├── Module.js
│   │   ├── Lesson.js
│   │   ├── Exercise.js
│   │   └── Project.js
│   ├── routes/           # API routes
│   │   ├── auth.js
│   │   ├── courses.js
│   │   ├── users.js
│   │   ├── enrollments.js
│   │   └── progress.js
│   ├── middleware/       # Express middleware
│   ├── server.js         # Express server entry point
│   └── package.json
├── public/               # Static assets
├── package.json          # Frontend dependencies
├── next.config.js        # Next.js configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
└── README.md             # This file

🔌 API Endpoints

Authentication

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

Courses

• GET /api/courses - Get all courses
• GET /api/courses/:id - Get single course
• POST /api/courses - Create course (instructor only)
• PUT /api/courses/:id - Update course
• DELETE /api/courses/:id - Delete course

Users

• GET /api/users/:id - Get user profile
• PUT /api/users/:id - Update profile

Enrollments

• POST /api/enrollments/:courseId/enroll - Enroll in course
• GET /api/enrollments/user/:userId - Get user enrollments

Progress

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

🚀 Running Full Stack

To run both frontend and backend concurrently:

npm run dev:full

This requires concurrently package (already included in dependencies).

📝 Adding Your Courses

1. Start the backend server
2. Use MongoDB client or your favorite API tool (Postman, Insomnia)
3. Create courses using POST /api/courses:

{
  "title": "JavaScript Basics",
  "description": "Learn JavaScript from scratch",
  "category": "JavaScript",
  "price": 29.99,
  "level": "beginner",
  "instructor": "your_instructor_id"
}

1. Add modules, lessons, exercises, and projects similarly

🎨 Customization

Colors & Styling

• Edit tailwind.config.js to customize colors and themes
• Modify src/styles/globals.css for global styles

Components

• All React components are in src/components/
• Pages are in src/app/
• Customize freely for your branding

Content

• Update company name "CourseHub" to your brand name
• Replace placeholder content with your actual courses
• Add your logo and branding assets

🔐 Security Features

• JWT-based authentication
• Password hashing with bcrypt
• CORS configuration
• Environment variable protection
• Secure API routes

📦 Deployment

Frontend (Vercel)

# Build optimized production version
npm run build

# Deploy to Vercel
vercel deploy

Backend (Heroku/Railway/Render)

• Push backend to hosting platform
• Set environment variables
• MongoDB should be accessible

🤝 Contributing

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

📄 License

This project is open source and available under the MIT License.

🎯 Roadmap

• [ ] Payment gateway integration (Stripe)
• [ ] Discussion forums
• [ ] Peer code review system
• [ ] Gamification (badges, leaderboards)
• [ ] Advanced analytics
• [ ] Mobile app (React Native)
• [ ] Live coding sessions
• [ ] AI-powered code suggestions
• [ ] Multi-language support

---

Built with ❤️ for developers who want to learn and teach

Built With

• c++
• cmake
• css
• javascript