How to vibe codeTeachable

Prerequisites

• Node.jsFree

  Runtime environment for executing the full-stack TypeScript framework and package ecosystem.

• GitHubFree

  Source control repository hosting for managing code iterations with AI coding agents.

• Supabase AccountFree

  Managed PostgreSQL instance for relational data storage, authentication, and file storage buckets.

AI coding tools

• Claude Code

  Autonomous terminal agent capable of reasoning through multi-file course architecture and complex database migrations.

• Cursor

  AI-native code editor for reviewing visual diffs and fine-tuning the student LMS interface.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Supabase database connections, and create the core relational tables for users, schools, courses, sections, lessons, and enrollments.

   Initialize a new Next.js project using App Router and TypeScript. Install Tailwind CSS and configure the design tokens for a clean creator SaaS aesthetic. Set up a Supabase client library and create migration files for the relational schema: schools (id, name, slug, owner_id), courses (id, school_id, title, description, price, published), sections (id, course_id, title, position), lessons (id, section_id, title, video_url, content_type, position), and enrollments (id, user_id, course_id, created_at). Ensure foreign keys have proper cascading deletes and indexing on lookup fields. Write an initial seed script to verify database connectivity and test queries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Multi-Tenant School Setup

   Integrate better-auth to handle user registration, secure session management, and tenant school routing for creators and students.

   Integrate better-auth into the Next.js application supporting email/password and Google OAuth logins. Configure the schema to support multi-tenant user roles ('creator' and 'student'). Build an onboarding flow where a new creator can register and provision their unique school subdomain/slug. Implement middleware to scope admin dashboard routes to the authenticated school owner and student portal routes to enrolled learners. Create the corresponding profile management screens and test session persistence across browser refreshes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Creator Admin Dashboard & Course Builder

   Build the drag-and-drop course structure manager and administrative interface allowing creators to configure curriculum hierarchies and lesson content.

   Build a creator admin dashboard with a course management interface. Implement server actions to create, update, reorder, and delete courses, sections, and lessons. Design an interactive course builder view where creators can add rich-text descriptions, upload video items, and configure pricing attributes. Ensure form validation uses Zod schemas and display toast notifications upon successful database updates. Handle edge cases like unpublished draft states versus live catalog products.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Secure Video Hosting and LMS Student Portal

   Integrate Mux video processing for secure media streaming and build the student-facing learning management system interface with progress tracking.

   Integrate the Mux video API to handle secure video uploads and adaptive streaming playback. Build a dedicated student learning portal featuring a sidebar curriculum navigation tree, video player component with playback speed controls, markdown lesson text view, and quiz modules. Implement progress tracking logic that updates student lesson completion status in Supabase when a video reaches 90% view duration or a quiz is successfully passed. Ensure the UI is fully responsive for mobile browser viewing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Checkout Flow and Payment Processing

   Implement Stripe checkout sessions for course purchases and automated student enrollment fulfillment via webhook event listeners.

   Set up Stripe Checkout integration to enable course purchases. Create a checkout API route that generates a Stripe checkout session for a given course price and metadata. Implement a webhook endpoint handler to listen for 'checkout.session.completed' events, verify signatures, and automatically insert a new record into the enrollments table granting the buyer immediate student access. Add a purchase history view inside the student dashboard listing active product enrollments and receipts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Course Starter and Subtitle Generator

   Incorporate AI-powered curriculum generation and automated subtitle translation tools using the Vercel AI SDK and OpenAI API.

   Incorporate an AI course generation feature using the Vercel AI SDK and OpenAI API. Build a creator tool modal where entering a course topic prompts an LLM call to return a structured JSON curriculum containing modules and lesson titles, which can be automatically imported into the course builder with a single click. Add a background job placeholder or API integration to trigger automated subtitle generation for uploaded course videos. Ensure robust error handling for API rate limits and token usage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Companion Mobile App Shell (Expo)

   Initialize a companion Expo React Native mobile application for students to authenticate and consume course video lessons on iOS and Android.

   Initialize an Expo React Native TypeScript project in a separate workspace directory to serve as the student mobile companion app. Configure Expo Router for file-based navigation. Build a login screen connecting to the central backend API, a course catalog screen fetching enrolled products, and a video playback screen utilizing native video components. Implement persistent secure token storage using expo-secure-store. Ensure proper styling consistent with the web student portal for cross-platform uniformity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Teachable