How to vibe codeLearnWorlds

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack framework and package manager.

• GitHubfree

  Source control and deployment pipeline integration for hosting.

• Supabase Accountfree

  Managed PostgreSQL database with built-in row-level security and file storage buckets.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic CLI for scaffolding complex database models, API routes, and frontend views across the entire Next.js codebase.

• Cursor

  AI-native code editor ideal for iterative UI polish on video player components and course authoring dashboards.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Supabase with better-auth tables and relational schemas for Schools, Users, Courses, Sections, Lessons, and Enrollments.

   Initialize a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication connected to a Supabase PostgreSQL database using Prisma or Drizzle ORM. Write the core database migration for a multi-tenant LMS: tables for 'schools' (id, name, subdomain), 'users' (id, school_id, role), 'courses' (id, school_id, title, description, price), 'sections' (id, course_id, title, order), 'lessons' (id, section_id, title, type: video|quiz|text, content_url, order), and 'enrollments' (id, user_id, course_id, progress_percentage). Ensure foreign key constraints and indexes are correctly applied. Provide test seed data scripts to verify relationships.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02School Creator & Admin Dashboard

   Build the admin dashboard where course creators can manage schools, create courses, organize curriculum structures via drag-and-drop lists, and upload lesson materials.

   Build a comprehensive admin dashboard in Next.js under `/admin/courses` that lets authenticated instructors create and manage courses, sections, and lessons. Implement a nested tree-view UI using shadcn/ui components where creators can add sections and drag-and-drop lessons within sections to reorder them. Include form validation using Zod and React Hook Form for course details (title, description, pricing, thumbnail). Implement Server Actions to handle database mutations securely with proper user role authorization checks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Interactive Video Player Integration

   Integrate Mux video upload and player components, supporting time-triggered interactive question overlays and synchronized timestamp tracking.

   Integrate Mux video upload and streaming into the lesson authoring and student viewing views. In the lesson editor, allow creators to attach interactive timestamps to a video where a popup quiz question triggers automatically when the video reaches that second. In the student course player (`/courses/[courseId]/watch/[lessonId]`), embed the Mux player, track playback progress via webhooks or state polling, pause playback when an interactive timestamp is hit, render a modal quiz question, and only resume playback once answered correctly. Store interactive quiz events in a `video_interactions` table linked to the lesson.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Assessment & Quiz Builder Engine

   Implement a robust assessment builder supporting multiple choice, open-ended questions, automatic scoring, and completion rules.

   Build an assessment builder module in the admin panel allowing creators to add graded quizzes to lessons with multiple-choice, true/false, and open-ended question types. Implement a student-facing quiz runner view that grades submissions instantly, calculates pass/fail status based on a configurable threshold percentage, and logs student scorecards in a `quiz_attempts` table. Update the student progress tracker when a quiz is passed successfully, unlocking subsequent lessons if sequential navigation rules are enabled.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05E-Commerce Checkout & Enrollment Engine

   Integrate Stripe checkout sessions to allow users to purchase courses, handle webhook fulfillment, and automatically enroll buyers.

   Implement Stripe Checkout integration for paid courses. Create a public course sales landing page (`/courses/[courseId]`) with an 'Enroll Now' button that initiates a Stripe Checkout Session via a Server Action. Set up a Stripe webhook API route (`/api/webhooks/stripe`) that listens for `checkout.session.completed` events, extracts metadata (user_id and course_id), provisions a record in the `enrollments` table, and sends a welcome receipt email via Resend. Include proper webhook signature verification and error logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Automation Engine & Polish

   Build an event-driven automation rules engine to trigger emails and tag users upon course completion or inactivity.

   Build a lightweight automation engine that triggers background workflows based on user events (e.g., course enrollment, lesson completion, 30 days inactivity). Create an automation rules table and a background cron job route that evaluates trigger conditions, sends personalized emails using Resend React Email templates, and updates user tags. Polish the entire web application with responsive UI layouts, clean loading states, Sentry error tracking, and comprehensive end-to-end tests for the core learning loop.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for LearnWorlds