How to Build Online education platform with V0

1// Paste this prompt into V0's AI chat:
2// Build an online education platform. Create a Supabase schema:
3// 1. courses: id (uuid PK), title (text), slug (text UNIQUE), description (text), instructor_id (uuid FK to auth.users), price_cents (int), stripe_price_id (text), thumbnail_url (text), status (text DEFAULT 'draft'), published_at (timestamptz)
4// 2. modules: id (uuid PK), course_id (uuid FK to courses), title (text), position (int)
5// 3. lessons: id (uuid PK), module_id (uuid FK to modules), title (text), type (text CHECK IN 'video','text','quiz'), content (jsonb), video_url (text), duration_minutes (int), position (int)
6// 4. enrollments: id (uuid PK), user_id (uuid FK to auth.users), course_id (uuid FK to courses), stripe_subscription_id (text), enrolled_at (timestamptz), completed_at (timestamptz)
7// 5. lesson_progress: user_id (uuid FK to auth.users), lesson_id (uuid FK to lessons), status (text DEFAULT 'not_started'), score (int), completed_at (timestamptz), PRIMARY KEY (user_id, lesson_id)
8// 6. certificates: id (uuid PK), enrollment_id (uuid FK to enrollments), issued_at (timestamptz), certificate_url (text)
9// Add RLS. Generate SQL and types.

1// Paste this prompt into V0's AI chat:
2// Create education platform pages:
3// 1. app/courses/page.tsx — course catalog with Card grid: thumbnail, title, instructor name, price, lesson count, rating. Add category Tabs and search Input.
4// 2. app/courses/[slug]/page.tsx — course landing page: hero with thumbnail, title, instructor Avatar, price, 'Enroll Now' Button. Syllabus section with Accordion showing modules and lessons. 'Enroll Now' creates a Stripe Checkout session via Server Action.
5// Use ISR with revalidate = 3600 for fast cached pages. Server Components for SEO.

1// Paste this prompt into V0's AI chat:
2// Create the lesson viewer at app/learn/[courseId]/[lessonId]/page.tsx.
3// Requirements:
4// - Left sidebar: module/lesson tree with Accordion. Show completion status per lesson (checkmark icon, in-progress icon, or locked icon). Current lesson highlighted.
5// - Main area: lesson content based on type:
6//   - video: embedded video player with video_url
7//   - text: rendered markdown/rich text content from jsonb
8//   - quiz: RadioGroup for multiple choice, submit Button, score display
9// - 'Mark as Complete' Button for video/text lessons
10// - Quiz auto-completes on submit with score tracking
11// - Progress bar at top showing course completion percentage
12// - Navigation Buttons: Previous Lesson, Next Lesson
13// - Server Action for marking lessons complete and submitting quiz answers
14// - On last lesson complete, check if all lessons done and show celebration + certificate generation link

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)
7
8export async function POST(req: NextRequest) {
9  const rawBody = await req.text()
10  const sig = req.headers.get('stripe-signature')!
11
12  let event: Stripe.Event
13  try {
14    event = stripe.webhooks.constructEvent(rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET!)
15  } catch {
16    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
17  }
18
19  if (event.type === 'checkout.session.completed') {
20    const session = event.data.object as Stripe.Checkout.Session
21    const { user_id, course_id } = session.metadata || {}
22
23    if (user_id && course_id) {
24      await supabase.from('enrollments').insert({
25        user_id,
26        course_id,
27        enrolled_at: new Date().toISOString(),
28      })
29    }
30  }
31
32  return NextResponse.json({ received: true })
33}

1// Paste this prompt into V0's AI chat:
2// Add quiz and completion features:
3// 1. Server Action submitQuiz: receives attempt answers, fetches correct answers from lessons.content jsonb, computes score server-side (NEVER client-side to prevent cheating), stores in lesson_progress with score
4// 2. Server Action completeLesson: marks lesson as completed, checks if ALL lessons in course are completed. If yes, triggers certificate generation.
5// 3. Certificate generation: POST to /api/certificates/generate with enrollment_id. Generate a simple PDF with course title, student name, completion date, and a certificate ID. Upload to Supabase Storage and store URL in certificates table.
6// 4. Show certificate download Button on completed courses in the student dashboard
7// 5. Student dashboard at app/dashboard/page.tsx showing enrolled courses with Progress bars and certificate links