How to Clone Teachable

Create a full-stack online course platform called CourseForge using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres).

## What to build
A Teachable-style platform: creators build courses with sections and video lessons; students buy and watch them with progress tracking. Charge a transaction fee on each sale.

## Key screens
- Marketplace home: searchable, filterable grid of published course cards
- Course sales page: promo area, curriculum accordion, creator bio, Enroll button with price
- Lesson player: curriculum sidebar with completion checkmarks, video area, Mark-complete + Next
- Creator dashboard: courses table, sales chart, enrollment list
- Course builder: edit course meta, add/reorder sections and lessons, attach a video URL per lesson
- Student dashboard: enrolled courses with progress bars and a Continue button
- Checkout: order summary, coupon field and the Stripe payment step

## Schema (Prisma)
User (id, name, email, role)
Course (id, creatorId, title, description, thumbnail, price, published)
Section (id, courseId, title, position)
Lesson (id, sectionId, title, videoUrl, content, duration, position)
Enrollment (id, courseId, studentId, createdAt)
Progress (id, enrollmentId, lessonId, completed)

## Logic that must work
- Access control: a lesson's video/content is only returned by the API if the requester is enrolled in that course (or is the creator); enforce on the server, not just the UI
- Stripe Checkout success (via webhook) creates the Enrollment row and unlocks the course
- Progress percentage = completed lessons / total lessons, computed in a shared util used by sidebar and dashboard
- Reordering sections/lessons persists a position integer; only the creator can mutate their course
- Marking a lesson complete writes a Progress row and advances the Continue/Next target to the first incomplete lesson
- Only published courses appear in the marketplace; drafts are visible only to their creator
- A student can't enroll in the same course twice; an existing enrollment just resumes

## Style
Education-friendly: off-white canvas, #4F46E5 indigo primary, rounded-xl cards, Inter font, a dark focused lesson player. Skeleton loaders on data fetch. Fully responsive - curriculum sidebar becomes a top dropdown on mobile.

Use Stripe test mode for purchases; if no Stripe key is present, mock a successful purchase that creates the enrollment. Use placeholder video embeds. Seed with 2 creators, 6 published courses (2-3 sections each, several lessons), and 2 demo students with partial progress so every screen has data.

You are building a production-quality online course platform (Teachable-style) called CourseForge. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google) and image storage
- Mux (or Cloudflare Stream) for video: signed playback so lesson videos can't be hot-linked by non-enrolled users
- Stripe (Checkout for one-time course sales, Connect if you take a creator payout fee); Zod for all input validation

## Architecture requirements
- Route groups: (marketing) public sales pages, (learn) enrolled student app, (studio) creator dashboard. Server components by default; client only for the builder DnD, video player and progress widgets
- Authorization is server-side and central: a canAccessLesson(userId, lessonId) guard gates every lesson fetch; never rely on hiding UI
- lib/progress.ts: single source of truth for completion math; lib/pricing.ts for fees so UI and webhook agree
- Signed video URLs minted server-side per request, short-lived, only for enrolled users

## Data model
users, courses, sections, lessons, enrollments, progress, coupons, reviews. Index courses(creatorId, published), lessons(sectionId, position), progress(enrollmentId).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected (learn)/(studio) routes
2. Creator studio: course CRUD, section/lesson builder with drag-reorder (dnd-kit), video upload to Mux, thumbnail to Supabase storage
3. Public sales page: server-rendered curriculum, generateMetadata + JSON-LD Course schema for SEO
4. Checkout: Stripe Checkout session → webhook creates Enrollment → confirmation + welcome email (Resend)
5. Lesson player: enrollment-gated video (signed URL), curriculum sidebar, mark-complete, resume-where-you-left-off
6. Student dashboard: enrolled courses with progress; Continue jumps to the next incomplete lesson
7. Polish: coupons, basic reviews, creator sales chart grouped by month

## Quality bar
- Loading.tsx skeletons and error.tsx boundaries on every async route
- Money in integer cents, formatted with Intl.NumberFormat; idempotent webhook handling keyed on the Stripe event id
- Never serve a lesson video to a non-enrolled user even with a guessed URL - verify on every request
- Drag-reorder writes a stable position integer and persists optimistically with a rollback on failure
- Resume logic always points at the first incomplete lesson, computed server-side from Progress
- Seed script: 3 creators, 8 courses, ~25 lessons, 10 enrollments with varied progress

Start with step 1. After each step, tell me exactly what to verify in the browser before continuing.

Design the complete UI for a Teachable-style online course platform called CourseForge. React + Tailwind, shadcn/ui components, lucide-react icons. Warm, education-friendly aesthetic: off-white background, an indigo (#4F46E5) primary, rounded-xl cards, soft shadows, Inter font.

## Screens to generate

### 1. Marketplace home
- Sticky header: logo left, search bar center, category nav, avatar/login right
- Category chip row (Business, Design, Coding, Fitness, Music) with active state
- Responsive course-card grid (3-4 cols): cover image, title, creator name with small avatar, star rating, bold price, a 'Bestseller' tag on one or two

### 2. Course sales page
- Two-column layout: left = title, subtitle, rating · students line, what-you'll-learn checklist, curriculum accordion (sections expand to lessons with a play icon + duration); right = sticky purchase card with a promo-video thumbnail, price, 'Enroll now' button, and a short includes-list (hours of video, downloadable resources, certificate)
- Creator bio block with avatar, headline and stats

### 3. Lesson player (dark theme)
- Left curriculum sidebar: sections with collapsible lessons, completed lessons show a green check, current lesson highlighted
- Center: large video player area, below it the lesson title, a Mark-complete button and Previous/Next nav, then tabs for Overview / Resources / Q&A
- A thin progress bar for the whole course at the top of the sidebar

### 4. Creator dashboard
- Sidebar nav (Courses, Sales, Students, Settings)
- Stat cards: total revenue, students, published courses, with a monthly sales area chart
- Courses table: thumbnail, title, status badge (Draft amber / Published green), students, revenue, Edit button

### 5. Course builder
- Left: editable course meta (title, price, thumbnail dropzone); right: curriculum editor with draggable section cards, each containing draggable lesson rows with a video-upload affordance and an Add-lesson button; sticky Save bar

### 6. Student dashboard
- 'My learning' grid of enrolled-course cards: cover, title, a progress ring with percent, and a Continue button that resumes the next lesson
- A small 'Recommended next' row beneath, and an empty state inviting them to browse the marketplace

### 7. Checkout
- A focused purchase screen: order summary (course thumbnail, title, price), a coupon field, the Stripe card form, and a reassuring 30-day-guarantee note
- A success state that confirms enrollment and links straight into the first lesson

Make every screen fully responsive. On mobile: the sales-page purchase card becomes a sticky bottom bar (price + Enroll); the lesson curriculum collapses into a top dropdown above the video. Use realistic placeholder data - course titles, creator names, prices $19–$199, ratings 4.3–4.9.

Build an online course platform app (Teachable model) called CourseForge.

## Entities
- Course: title, description, thumbnail (image), price (number), status (draft/published), creator (user reference), rating (number)
- Section: course reference, title, position (number)
- Lesson: section reference, title, videoUrl, content (text), duration (number), position (number)
- Enrollment: course reference, student (user), purchasedAt (date)
- Progress: enrollment reference, lesson reference, completed (boolean)

## Roles & permissions
- Creators can create/edit only their own courses and see only their own students and sales
- Students can browse published courses, buy them, and access lessons only for courses they're enrolled in
- Admin role: view all courses and a platform revenue summary

## Pages
1. Marketplace home: search and filter published courses; grid of cards (thumbnail, title, creator, price, rating)
2. Course sales page: details, curriculum (sections > lessons), creator bio, Enroll button with price
3. Lesson player: curriculum sidebar with completion checkmarks, video, Mark-complete and Next; gated to enrolled students
4. Creator dashboard: my courses (create/edit/publish), enrollments, sales summary
5. Course builder: add and reorder sections and lessons, attach a video per lesson
6. Student dashboard: my enrolled courses with progress and a Continue button

## Rules
- A lesson's content is only accessible to students enrolled in its course (or the course's creator)
- Enrolling (after a successful purchase) unlocks all lessons in the course
- Progress percentage = completed lessons / total lessons in the course
- Marking a lesson complete advances the Continue button to the next incomplete lesson
- A student can't enroll in the same course twice; reopening just resumes the existing enrollment
- Only published courses appear in the marketplace; only the creator can edit their course

## Look & feel
Education-friendly: off-white background, indigo (#4F46E5) primary buttons, rounded course cards with cover images, clean sans-serif type, a focused dark lesson player. Mobile responsive throughout.

## Data note
Keep lesson video as a placeholder URL or embed for now; real platforms use a managed host with signed playback so non-enrolled users can't access it.

Seed with 2 sample creators, 6 published courses (each with 2-3 sections and several lessons), and 2 sample students with partial progress so every page has data.