How to Build a Online Education Platform with Lovable

1Create a full LMS with Supabase. Set up these tables:
2
3- courses: id (uuid pk), instructor_id (uuid references auth.users), title (text not null), slug (text unique), description (text), thumbnail_url (text), price (numeric default 0, 0 = free), status (text check in ('draft','published'), default 'draft'), student_count (int default 0), lesson_count (int default 0), created_at
4- lessons: id (uuid pk), course_id (uuid references courses), title (text not null), description (text), video_storage_path (text), materials_storage_path (text), duration_seconds (int), sort_order (int not null), is_preview (bool default false, free preview lessons), created_at
5- enrollments: id (uuid pk), student_id (uuid references auth.users), course_id (uuid references courses), enrolled_at, is_active (bool default true), UNIQUE(student_id, course_id)
6- lesson_progress: id (uuid pk), student_id (uuid references auth.users), lesson_id (uuid references lessons), course_id (uuid references courses), completed_at (timestamptz), watched_seconds (int default 0), UNIQUE(student_id, lesson_id)
7
8RLS:
9- courses: anon/authenticated SELECT where status='published', instructor INSERT/UPDATE/DELETE where instructor_id=auth.uid()
10- lessons: authenticated SELECT where is_preview=true OR EXISTS(SELECT 1 FROM enrollments WHERE student_id=auth.uid() AND course_id=lessons.course_id AND is_active=true), instructor INSERT/UPDATE/DELETE
11- enrollments: students SELECT/INSERT their own rows, instructor SELECT for their courses
12- lesson_progress: students SELECT/INSERT/UPDATE their own rows
13
14Create triggers:
15- On enrollments INSERT: increment courses.student_count
16- On enrollments DELETE: decrement courses.student_count
17- On lessons INSERT: increment courses.lesson_count
18- On lessons DELETE: decrement courses.lesson_count

1Build a course catalog page at src/pages/Courses.tsx.
2
3For unauthenticated visitors: show a grid of course Cards with title, thumbnail, description, price (or 'Free' badge), and lesson_count. Each Card has an 'Enroll' Button (clicking prompts login).
4
5For authenticated students:
6- Fetch courses joined with enrollments (LEFT JOIN) for the current user
7- Also fetch student_course_progress for each enrolled course
8- Cards for enrolled courses show a Progress component (0-100%) and a 'Continue Learning' Button that goes to the last viewed lesson
9- Cards for non-enrolled courses show the price and an 'Enroll' Button
10
11Enrollment flow:
12- Free courses: clicking 'Enroll' calls the enroll-student Edge Function with course_id
13- Paid courses: clicking 'Enroll' redirects to a Stripe checkout (or shows a 'Coming Soon' note if Stripe not configured)
14
15Add a 'My Courses' Tabs filter at the top: All / Enrolled / In Progress / Completed
16
17Fetch with: supabase.from('courses').select('*, enrollments(id, is_active), student_course_progress(completion_percentage)').eq('status','published')

1// supabase/functions/enroll-student/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const cors = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Content-Type': 'application/json',
9}
10
11serve(async (req: Request) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: cors })
13
14  const authHeader = req.headers.get('Authorization')
15  if (!authHeader) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: cors })
16
17  const { courseId, paymentIntentId } = await req.json()
18
19  const userClient = createClient(
20    Deno.env.get('SUPABASE_URL') ?? '',
21    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
22    { global: { headers: { Authorization: authHeader } } }
23  )
24  const { data: { user } } = await userClient.auth.getUser()
25  if (!user) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: cors })
26
27  const supabase = createClient(
28    Deno.env.get('SUPABASE_URL') ?? '',
29    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
30  )
31
32  const { data: course } = await supabase.from('courses').select('id, price, status').eq('id', courseId).single()
33  if (!course || course.status !== 'published') {
34    return new Response(JSON.stringify({ error: 'Course not found' }), { status: 404, headers: cors })
35  }
36
37  if (course.price > 0 && !paymentIntentId) {
38    return new Response(JSON.stringify({ error: 'Payment required', requiresPayment: true }), { status: 402, headers: cors })
39  }
40
41  // If paid, verify payment intent with Stripe here
42  // const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!)
43  // const intent = await stripe.paymentIntents.retrieve(paymentIntentId)
44  // if (intent.status !== 'succeeded') return 402
45
46  const { error } = await supabase
47    .from('enrollments')
48    .upsert({ student_id: user.id, course_id: courseId, is_active: true }, { onConflict: 'student_id,course_id' })
49
50  if (error) return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: cors })
51
52  return new Response(JSON.stringify({ success: true }), { headers: cors })
53})

1Build a lesson player page at src/pages/LessonPlayer.tsx. Route: /courses/:courseSlug/lessons/:lessonId.
2
3On load:
41. Fetch the lesson from Supabase (RLS will block if not enrolled)
52. If the fetch returns an RLS error, redirect to the course enrollment page
63. Call the get-lesson-video Edge Function with the lessonId to get a signed URL
74. Render a <video> element with the signed URL as src, controls, and playsinline
8
9Layout:
10- Left: video player (wide) above lesson description and materials download button
11- Right sidebar: course lesson list as an Accordion, one AccordionItem per lesson. Current lesson highlighted. Completed lessons show a checkmark icon. Clicking navigates to that lesson.
12- Below video: a Progress component showing course completion percentage (from student_course_progress view)
13- 'Mark as Complete' Button: calls supabase.from('lesson_progress').upsert({ student_id, lesson_id, course_id, completed_at: new Date().toISOString() })
14
15Realtime progress update:
16- After mounting, subscribe to a Realtime channel on the lesson_progress table filtered by student_id=currentUser.id AND course_id=currentCourseId
17- On any INSERT or UPDATE event, refetch the student_course_progress view and update the Progress component
18- Unsubscribe on component unmount
19
20Video progress tracking:
21- On video 'timeupdate' event (throttled to every 10 seconds), upsert lesson_progress with watched_seconds = Math.floor(video.currentTime)

1Build an admin course builder at src/pages/admin/CourseBuilder.tsx. Route: /admin/courses/:courseId.
2
3Page layout:
4- Course meta editor on the left: title, description, thumbnail upload (public bucket), price, status Select
5- Lesson list on the right: ordered by sort_order
6  - Each lesson row shows: drag handle, sort_order number, title, duration, preview Toggle (is_preview), Edit button, Delete button
7  - Drag-and-drop reordering using HTML5 drag events (no external library needed). On drop, update sort_order for affected lessons in a batch update.
8
9Add Lesson Dialog:
10- Title (Input required)
11- Description (Textarea)
12- Is Preview (Switch)
13- Video Upload: file input (accept video/*). Upload to 'course-videos' at path courses/{courseId}/lessons/{lessonId}/{filename}. Store the storage PATH (not URL) in video_storage_path.
14- Materials Upload: optional PDF file input. Upload to 'course-materials' bucket. Store path in materials_storage_path.
15- Duration: show auto-detected duration from the video element's metadata after upload.
16
17Publish Button: changes course status to 'published'. Show a confirmation Dialog: 'Once published, students can enroll. You can unpublish later.'