DemoBuy

Installation

Last updated on 2026-09-13

This guide walks you through setting up the Full-Stack LMS Kit from scratch, including Supabase database configuration and optional OAuth setup.

System Requirements

  • Node.js 18.17 or later
  • pnpm (recommended), npm, or yarn
  • Git for cloning the repository

Step 1 -- Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> lms-fullstack
cd lms-fullstack

Step 2 -- Install Dependencies

pnpm install

Key Dependencies

Package Purpose
next 16.x React framework
react 19.x UI library
tailwindcss 4.x CSS framework with oklch tokens
@supabase/supabase-js Supabase client
@supabase/ssr Server-side Supabase with cookies
recharts Analytics and progress charts
date-fns Date formatting
cmdk Command palette (Cmd+K)

Step 3 -- Create a Supabase Project

  1. Go to supabase.com and create a new project
  2. Wait for the project to finish provisioning
  3. Go to Settings > API and copy:
    • Project URL (e.g., https://xxxxxxxxxxx.supabase.co)
    • anon public key (safe for client-side)
    • service_role key (server-side only, never expose to client)

Step 4 -- Configure Environment Variables

Copy the example file:

cp .env.example .env.local

Fill in your keys:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# App
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Step 5 -- Run Database Migrations

Go to your Supabase project's SQL Editor and run these migration files in order:

  1. supabase/migrations/001_schema.sql -- Creates all 38 tables (profiles, categories, courses, modules, lessons, enrollments, lesson_completions, course_reviews, quizzes, quiz_results, assignments, assignment_submissions, certificates, badges, user_badges, discussion_threads, discussion_replies, live_sessions, live_session_registrations, study_groups, study_group_members, messages, bookmarks, notes, notifications, calendar_events, learning_paths, learning_path_progress, course_approvals, coupons, announcements, support_tickets, ticket_messages, audit_log, site_settings, billing_records, payment_methods, instructor_payouts, daily_metrics), plus indexes
  2. supabase/migrations/002_rls.sql -- Sets up row-level security policies with three-tier access (student, instructor, admin), including helper functions is_student_or_above(), is_instructor_or_above(), and is_admin()
  3. supabase/migrations/003_triggers.sql -- Adds triggers for profile auto-creation on signup (default role: student), updated_at auto-update, and course stats recalculation
  4. supabase/migrations/004_storage.sql -- Creates the lms-assets storage bucket for course thumbnails, lesson content, avatars, and assignment files

Then run the seed data:

  1. supabase/seed.sql -- Inserts 8 users (3 students, 3 instructors, 2 admins), 8 categories, 12 courses with modules and lessons, enrollments, reviews, quizzes with JSONB questions, assignments, certificates, badges, discussion threads, live sessions, study groups, messages, bookmarks, notes, notifications, coupons, announcements, billing records, and daily metrics

Tip: You can also use the Supabase CLI: supabase db push if you have it set up locally.

Step 6 -- Configure OAuth Providers (Optional)

For Google and GitHub social login:

Google OAuth

  1. Go to Google Cloud Console
  2. Create OAuth 2.0 credentials
  3. Set redirect URI: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > Google

GitHub OAuth

  1. Go to GitHub Developer Settings
  2. Create a new OAuth App
  3. Set callback URL: https://your-project.supabase.co/auth/v1/callback
  4. Add client ID and secret in Supabase Dashboard > Auth > Providers > GitHub

Step 7 -- Start the Dev Server

pnpm dev

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

Step 8 -- Verify the Setup

Navigate through key pages to confirm everything is connected:

  • /dashboard -- Student dashboard with stats from Supabase
  • /courses -- Course catalog with categories and search
  • /courses/[slug] -- Course detail with enrollment
  • /lessons/[id] -- Lesson player with completion tracking
  • /discussions -- Discussion forums
  • /instructor/dashboard -- Instructor analytics
  • /admin/dashboard -- Admin overview
  • /login -- Sign in with email or OAuth

Available Scripts

Command Description
pnpm dev Start dev server
pnpm build Create production build
pnpm start Run production server
pnpm lint Run ESLint checks

Troubleshooting

Supabase connection errors:

Verify your .env.local has the correct NEXT_PUBLIC_SUPABASE_URL and keys. The anon key is safe for client-side use.

Empty dashboard or missing data:

Make sure you ran all four migration files and seed.sql in order. The seed data depends on the schema, RLS, and triggers being in place.

OAuth redirect errors:

Check that your OAuth callback URL in the provider settings matches your Supabase project URL exactly: https://your-project.supabase.co/auth/v1/callback.

Enrollment not persisting:

Confirm the Supabase environment variables are set in .env.local. All mutations use the admin client with service role key to bypass RLS.

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.

Previous

Getting Started

Next

Project Structure