📌 Project Overview
The Online Course / LMS template is a complete learning management system designed for educators, coaches, and online course creators who want to deliver professional video-based courses with built-in progress tracking, quiz assessments, and automated certificate generation. Powered by Mux for adaptive video streaming, Stripe for one-time and subscription payments, and Supabase for enrollment and progress data, this template covers the full student lifecycle from course discovery to certified completion.
From solo instructors launching their first course to multi-instructor platforms managing a full catalog, the template provides the scalable, student-centric experience that modern learners expect — with every technical detail handled from day one.
🧩 Core Features
1. Mux Video Streaming
Lesson videos are uploaded to Mux for professional adaptive streaming. The Mux Player component provides a polished playback experience with automatic quality adjustment, and a progress hook auto-marks lessons complete when the video reaches 90%.
2. Multi-Step Course Enrollment & Payment
A Course Detail page showcases the full curriculum in an expandable accordion, instructor bio, and a preview video. Enrolled students go through a Stripe checkout for one-time purchase or subscription tier access before gaining lesson access.
3. Timed Quizzes with Auto-Grading
Quiz pages present timed multiple-choice questions, auto-grade responses on submission, and save scores to Supabase. Instructors can set passing thresholds and require quiz completion before advancing.
4. Student Dashboard with Progress Charts
The Student Dashboard shows enrolled courses, completion percentages, and Recharts-powered progress charts — giving students a clear view of their learning journey and motivating continued engagement.
5. Certificate Generation on Completion
When a student completes all lessons and passes all quizzes, a Supabase Edge Function generates a personalized PDF certificate and emails it via Resend — providing a shareable credential for LinkedIn and portfolios.
6. Lesson Sidebar with Progress State
The Lesson Player includes a persistent sidebar listing all modules and lessons with checkboxes tracking completion status. Students can jump to any lesson they've accessed and pick up exactly where they left off.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Course catalog SSG + lesson SSR |
| Styling & UI | Tailwind CSS + shadcn/ui | Dashboard & lesson player UI |
| Video Streaming | Mux Player (@mux/mux-player-react) | Adaptive video lesson playback |
| Charts | Recharts | Student progress visualization |
| Forms | React Hook Form + Zod | Quiz & assignment forms |
| Payments | Stripe API | One-time purchase & subscriptions |
| Database | Supabase (PostgreSQL) | Courses, lessons, enrollments, progress |
| Auth & Access | Supabase Auth + RLS | Student/instructor access control |
| Certificates | Supabase Edge Function + PDF | Auto-generated completion certificates |
| Resend | Welcome & certificate delivery | |
| Hosting | Vercel + Supabase Edge | Scalable global deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Featured courses, instructor highlights, trust signals, enroll CTA |
| Course Catalog | SSG grid with category filter, difficulty badge, enrollment status |
| Course Detail [slug] | Curriculum accordion, instructor bio, preview video, purchase CTA |
| Lesson Player | Mux video, lesson sidebar with progress checkboxes, next/prev nav |
| Quiz | Timed MCQ questions, auto-grade, Supabase score save |
| Student Dashboard | Enrolled course cards, Recharts progress charts |
| Certificates | Generated PDF certificates with student name and course details |
| Profile | Student info, learning history, and account settings |
🔒 Key Technical Highlights
- Mux upload and playback integration with signed URL support
- Certificate generation Supabase Edge Function with PDF output
- Auto-mark lesson complete when video reaches 90% playback threshold
- Stripe webhook handler for one-time purchase and subscription events
- Supabase schema: courses, modules, lessons, enrollments, lesson_progress, quiz_attempts, certificates