CourseHub is a comprehensive full-stack learning platform built with React.js and Node.js, enabling teachers to create and manage courses while students can discover, enroll, and access learning materials with an intuitive dashboard experience. Now featuring AI-powered course assistance for enhanced learning!
๐ View Live Demo
- User Registration & Login with JWT authentication
- Role-based Access Control (Teacher/Student)
- Secure Route Protection with middleware
- Profile Management with image upload via Cloudinary
- Password Update & Account Deletion with comprehensive data cleanup
- Complete Data Integrity - Removes all user references from courses and enrollments
- Orphaned Reference Prevention - Cleans up course enrollments and student lists
- OAuth Integration with Google (Auth0)
- Course Creation with rich descriptions, thumbnails, and categories
- Course Management - Edit, update.
- Dashboard with Stats - ApexCharts integration for analytics (hard coded as of now)
- Created Courses Overview with search functionality
- Image Upload for course thumbnails via Cloudinary
- Course Discovery - Browse all available courses with search
- Course Enrollment with Razorpay payment integration
- Learning Dashboard with comprehensive stats and charts (hard coded as of now)
- Course Details with instructor information
- AI Course Assistant - Get instant help with course-related questions
- Google Gemini AI Integration for intelligent course assistance
- Course-Specific Chatbot that understands course context
- Conversation Memory - Remembers previous interactions
- Smart Responses with course-specific explanations
- User-Friendly Interface with real-time chat experience
- Context-Aware Assistance - Only helps with course-related questions
- Auto-cleanup - Chat history expires after 30 days
- Razorpay Payment Gateway for secure transactions
- Order Creation and verification system
- Automatic Enrollment upon successful payment
- Payment Receipts will be created in future with unique identifiers
- Dark/Light Theme Toggle with persistent storage
- Responsive Design - Mobile-first approach
- Modern UI Components - Tailwind CSS with custom design system
- Smooth Animations - Framer Motion integration
- Professional Navigation - Headless UI components
- Toast Notifications - Real-time user feedback
- Loading States throughout the application
- Interactive Modals for confirmations and forms
- Beautiful Blob Backgrounds for enhanced visual appeal
- ApexCharts Integration - Line and Donut charts
- Dashboard Stats - Role-based comprehensive metrics (hard coded)
- RESTful API with Express.js backend
- MongoDB with Mongoose ODM
- Data Integrity Management - Complete cleanup of orphaned references
- Cloudinary Integration for image uploads and management
- Razorpay Integration for payment processing
- Google Gemini AI for intelligent assistance
- Zod Schema Validation on both client and server
- Axios Interceptors for seamless API calls
- LocalStorage Management for user data persistence
- Error Handling with comprehensive user feedback
- File Upload with Multer middleware
- JWT Token Management with automatic role detection
- Database Cleanup - Automatic removal of orphaned data
- React.js 19 with Vite for fast development
- Tailwind CSS 4 with custom design system
- React Router v7 for navigation
- ApexCharts for data visualization
- Framer Motion for smooth animations
- Headless UI for accessible components
- Lucide React for modern icons
- React Toastify for notifications
- JWT Decode for token management
- Node.js with Express.js framework
- MongoDB with Mongoose ODM
- JWT for secure authentication
- Zod for schema validation
- Cloudinary for image storage and management
- Razorpay for payment processing
- Google Generative AI for chatbot functionality
- bcrypt for password hashing
- Multer for file uploads
- Nanoid for unique ID generation
- Nodemailer for email functionality
CourseHub/
โโโ ๐ client/ # React Frontend
โ โโโ ๐ public/
โ โโโ ๐ src/
โ โ โโโ ๐ assets/ # Images & SVGs
โ โ โโโ ๐ components/ # UI Components
โ โ โโโ ๐ context/ # React Context
โ โ โโโ ๐ hooks/ # Custom Hooks
โ โ โโโ ๐ layout/ # Route Layouts
โ โ โโโ ๐ pages/ # Page Components
โ โ โโโ ๐ providers/ # Context Providers
โ โ โโโ ๐ router/ # Routing
โ โ โโโ ๐ services/ # API Services
โ โ โโโ ๐ utils/ # Utilities
โ โ โโโ App.jsx
โ โ โโโ main.jsx
โ โ โโโ index.css
โ โโโ package.json
โ โโโ vite.config.js
โ
โโโ ๐ server/ # Node.js Backend
โโโ ๐ public/
โโโ ๐ src/
โ โโโ ๐ controllers/ # Request Handlers
โ โโโ ๐ middlewares/ # Custom Middlewares
โ โโโ ๐ models/ # Database Schemas
โ โโโ ๐ routes/ # API Routes
โ โโโ ๐ schemas/ # Validation Schemas
โ โโโ ๐ services/ # Business Logic
โ โโโ ๐ utils/ # Server Utilities
โ โโโ ๐ config/ # Configuration
โ โโโ app.js
โ โโโ server.js
โโโ package.json
โโโ eslint.config.mjs
- Node.js (v16 or higher)
- MongoDB (local or Atlas)
- Cloudinary account for image uploads
- Razorpay account for payment processing
- Google Gemini API key for AI chatbot functionality
-
Clone the repository
git clone https://github.com/Y-Shivansh/CourseHub.git cd CourseHub
-
Backend Setup
cd server npm install # Create .env file with: # MONGODB_URI=your_mongodb_connection # JWT_SECRET=your_jwt_secret # CLOUDINARY_CLOUD_NAME=your_cloudinary_name # CLOUDINARY_API_KEY=your_api_key # CLOUDINARY_API_SECRET=your_api_secret # RAZORPAY_KEY_ID=your_razorpay_key_id # RAZORPAY_KEY_SECRET=your_razorpay_key_secret # GEMINI_API_KEY=your_gemini_api_key # EMAIL_USER=your_gmail_address # EMAIL_PASS=your_gmail_app_password npm run dev
-
Frontend Setup
cd client npm install # Create .env file with: # VITE_API_BASE_URL=http://localhost:3000/api/v1 # VITE_RAZORPAY_KEY_ID=your_razorpay_key_id # VITE_AUTH0_DOMAIN=your_auth0_domain # VITE_AUTH0_CLIENT_ID=your_auth0_client_id npm run dev
-
Access the Application
- Frontend: http://localhost:5173
- Backend API: http://localhost:3000
- Multi-Modal AI Support - Image and document analysis
- Automated Course Summaries and key points extraction
- AI-powered Course Recommendations
- Intelligent Content Analysis for course quality assessment
- Voice-based AI Assistant for hands-free learning
- Multiple Payment Gateways (Stripe, PayPal)
- Subscription Models for premium courses and features
- Refund Management with automated processing
- Video Lecture Upload with streaming capabilities
- Progress Tracking with completion certificates
- Video Streaming for lecture classes
- Docker Containerization for easy deployment
- CI/CD Pipeline with GitHub Actions
- Load Balancing and auto-scaling
- Microservices Architecture as the platform grows
- Mobile Application (React Native/Flutter)
- Voice Assistant Integration (Alexa or Google Assistant)
POST /signup - Register new user
POST /signin - User login
POST /oauth-login - OAuth user registration/login
GET /me - Get current user (Protected)
PUT /update - Update user profile (Protected)
DELETE /delete - Delete user account with complete data
GET /sync-indexes - Database index synchronization (Development) (not always active)
# Public Routes
GET /all - Get all courses
GET /:id - Get course by ID
GET /teacher/:id - Get courses by specific teacher
# Student Routes (Protected)
GET /unenrolled - Get courses not enrolled by student
GET /enrolled - Get student's enrolled courses
GET /enrolled/:id - Get enrolled course details
# Teacher Routes (Protected)
POST /create - Create new course
GET /my-courses - Get teacher's created courses
PUT /update/:id - Update course details
POST /create-order - Create Razorpay order (Protected)
POST /verify-payment - Verify payment and enroll (Protected)
POST /chat - AI chatbot conversation (Protected)
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
- Follow the existing code style and conventions
- Add proper error handling and validation
- Include comprehensive tests for new features
- Update documentation for any API changes
- Ensure responsive design for all new components
This project is licensed under the MIT License - see the LICENSE file for details.
Shivansh Sharma - Reach me at:
- GitHub: @Y-Shivansh
- Email: sharma.shivansh1305@gmail.com
- LinkedIn: Shivansh Sharma
- Twitter: @shivansh_Zz
- React.js Community for the robust frontend framework
- Node.js & Express for the powerful backend foundation
- MongoDB for flexible data storage
- Tailwind CSS for the beautiful UI system
- ApexCharts for stunning data visualizations
- Cloudinary for seamless image management
- Razorpay for secure payment processing
- Google Gemini AI for intelligent assistance capabilities
- Vercel for seamless deployment and hosting
- โญ Stars: Growing daily
- ๐ Forks: Contributing to the community
- ** Issues**: Actively maintained
- ๐ Users: Global reach
โญ Star this repository if you find it helpful!
๐ Ready to revolutionize online learning? Start building with CourseHub today!