DemoBuy

Getting Started with Full-Stack LMS Kit

Last updated on 2026-09-13

The Full-Stack LMS Kit is a production-ready Next.js learning management system wired to a real Supabase backend. It includes 55 routes covering three portals -- Student, Instructor, and Admin -- with 38 database tables, Supabase Auth, row-level security for three roles, gamification, community features, and analytics.

What's Included

  • 55 routes -- student dashboard, course catalog, lesson player, quizzes, assignments, discussions, live sessions, achievements, certificates, leaderboard, bookmarks, notes, messages, calendar, instructor course management, curriculum builder, student analytics, revenue, admin user management, approvals, coupons, announcements, audit log, and more
  • 38 database tables -- with migrations, row-level security, triggers, and seed data
  • Supabase Auth -- email/password, Google OAuth, and GitHub OAuth
  • Three-role model -- student, instructor, and admin with scoped data access via RLS
  • Course management -- full CRUD for courses, modules, and lessons with slug-based routing
  • Quiz engine -- JSONB questions, scoring, time tracking, and pass/fail results
  • Gamification -- XP, badges, certificates, leaderboard, and streak tracking
  • Community -- discussion forums, live sessions, study groups, direct messages
  • Server Actions -- secure mutations for all CRUD operations across 17 action files
  • Analytics -- enrollment trends, revenue, student progress, and daily metrics
  • Light & dark mode -- oklch design tokens with automatic theme switching
  • WCAG AA -- accessible across every screen

How It's Different from the Frontend-Only Kit

Aspect Frontend-Only Kit Full-Stack Kit (this)
Routes 39 55
Data source data/seed.ts (hardcoded) Supabase database
Auth Mock login forms Supabase Auth with OAuth
Enrollment Client-side state only Database persistence via Server Actions
Quizzes Static questions JSONB questions with scored results in DB
Progress Local state Lesson completions and enrollment progress tracked
Community Static lists Real CRUD for discussions, messages, study groups
Certificates Mock data Generated and stored in database
Instructor tools UI-only Full CRUD for courses, modules, lessons
Admin panel UI-only Real user management, approvals, audit log
Gamification Static badges XP, badges, and certificates from real data

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • Supabase account -- free at supabase.com
  • A code editor -- VS Code recommended

No Stripe account is needed. This kit does not include payment processing.

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> lms-fullstack
cd lms-fullstack

# 2. Install dependencies
pnpm install

# 3. Copy environment variables
cp .env.example .env.local

# 4. Fill in your Supabase keys in .env.local

# 5. Run the Supabase migrations (see Installation guide)

# 6. Start the dev server
pnpm dev

Open http://localhost:3000 to see the LMS dashboard.

Kit Overview

Area Routes Key Features
Student Dashboard 1 KPI stats, enrolled courses, continue learning, upcoming deadlines, achievements
Course Catalog 2 Browse courses with category filters, course detail with modules and reviews
Learning 6 Lesson player, quiz engine, quiz results, assignments, my learning, progress
Gamification 3 Achievements with badges, certificates, leaderboard
Community 5 Discussions, live sessions, study groups, messages, calendar
Student Tools 4 Bookmarks, notes, notifications, billing
Student Account 2 Profile, settings
Instructor Portal 11 Dashboard, courses, curriculum builder, students, assignments, analytics, revenue, Q&A, reviews, live sessions, profile
Admin Portal 12 Dashboard, users, courses, categories, approvals, coupons, revenue, announcements, reports, tickets, audit log, settings
Auth 3 Login, register, forgot password
Public 3+ Landing, pricing, terms, privacy

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Supabase Database, auth, and storage
@supabase/ssr Server-side Supabase client with cookies
Recharts Charts for analytics and progress tracking
date-fns Date formatting and utilities
Lucide React Icon library
next-themes Dark mode support
sonner Toast notifications
cmdk Command palette (Cmd+K)

Next Steps

Next

Installation