EduHub: Fullstack Learning Management System

Overview

EduHub is a modern, full-stack Learning Management System (LMS) built to empower free education and community-driven learning. Designed to deliver an intuitive experience for both students and instructors, EduHub provides comprehensive course discovery, interactive video streaming, detailed progress tracking, rich text chapter content, seamless file attachments, and complete course publishing workflows with Stripe checkout.

⭐ Key Features

🎓 Student Experience & Learning

• Course Discovery & Filtering: Browse, search, and filter published courses by category, title, and popularity.
• Interactive Video Player: Fast, buffer-free video playback powered by Mux with adaptive HLS streaming.
• Chapter Progress Tracking: Automatically track course completion rates, mark chapters as completed or uncompleted, and calculate overall progress.
• Rich Text Notes & Resources: Read formatted chapter descriptions and notes built with React Quill, and download course attachments.
• Student Dashboard: Personalized dashboard displaying all enrolled courses, active progress bars, and recent activity.

👨‍🏫 Teacher Mode & Course Management

• Teacher Dashboard: Dedicated instructor portal for managing, drafting, and publishing courses.
• Course Creation & Customization: Create courses with custom titles, descriptions, pricing, categories, and cover images.
• Chapter Builder & Reordering: Create chapters with drag-and-drop position reordering for effortless curriculum structuring.
• Media & File Attachments: Upload course thumbnails, PDF attachments, and video lectures using UploadThing.
• Automated Video Processing: Automatic background transcoding and thumbnail generation via Mux Video API.

💳 Stripe Payments & Monetization

• Stripe Checkout: Integrated checkout flow allowing students to purchase premium courses securely.
• Webhook Synchronization: Real-time webhook listeners ensuring instant course unlocking upon successful payment.
• Purchase History: Complete record of student transactions and lifetime course access.

🔐 Authentication & Access Control

• Clerk Authentication: Secure user login, registration, and profile management.
• Role-Based Access: Seamless toggling between student mode and instructor/teacher mode with permission checks.

🗄️ Database & Infrastructure

• Prisma ORM: Type-safe database queries and automated schema migrations.
• Neon DB (PostgreSQL): Scalable serverless PostgreSQL database.
• Docker Containerization: Containerized development and deployment readiness.

⚙️ Tech Stack

Frontend

• Next.js 13: App Router, Server Components, and optimized rendering.
• React: Dynamic component architecture and state management.
• TypeScript: Strict end-to-end type safety.
• Tailwind CSS: Utility-first responsive styling.
• shadcn/ui: Accessible and modern UI components.
• React Quill: Rich text editor for chapter content and descriptions.

Backend & Database

• Next.js API Routes: Robust serverless backend endpoints.
• Prisma ORM: Type-safe database client and automated migrations.
• PostgreSQL (Neon DB): High-performance cloud PostgreSQL database.
• Docker: Containerized environment for consistent setups.

Media & Integrations

• Mux: High-quality video processing and HLS streaming player.
• UploadThing: High-speed file, image, and attachment uploads.
• Stripe: Secure global payment gateway and webhook processing.
• Clerk: Comprehensive user authentication and role management.

🧪 Demo Account & Test Data

You can explore the application using the testing credentials and test payment details below:

Test User Credentials

• Username / Email: tester
• Password: tester

Test Card Details (for purchasing courses)

• Card Number: 4242 4242 4242 4242
• Expiry Date: Any future date (e.g. 12/30)
• CVC / ZIP: Any random 3-digit code

📚 Getting Started and Local Setup

Follow these steps to set up the project locally on your machine:

1. Clone the Repository

git clone https://github.com/Souvik-223/edu-hub.git
cd edu-hub

2. Install Packages

npm install

3. Setup Environment Variables

Create a .env or .env.local file in the project root:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# PostgreSQL Database (Neon DB / Prisma)
DATABASE_URL=
DIRECT_URL=

# UploadThing
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

# Mux Video API
MUX_TOKEN_ID=
MUX_TOKEN_SECRET=

# Stripe Payments
STRIPE_API_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Teacher Access
NEXT_PUBLIC_TEACHER_ID=

4. Setup Prisma Database

npx prisma generate
npx prisma db push

5. Start the Application

npm run dev

Open http://localhost:3000 with your browser to explore EduHub!