How to Build Online quiz app with V0

1// Paste this prompt into V0's AI chat:
2// Build a timed quiz app. Create a Supabase schema:
3// 1. quizzes: id (uuid PK), title (text), description (text), time_limit_seconds (int), is_published (boolean DEFAULT false), creator_id (uuid FK to auth.users), created_at (timestamptz)
4// 2. questions: id (uuid PK), quiz_id (uuid FK to quizzes), question_text (text), type (text CHECK IN 'multiple_choice','true_false','short_answer'), options (jsonb), correct_answer (text), points (int DEFAULT 10), position (int)
5// 3. attempts: id (uuid PK), quiz_id (uuid FK to quizzes), user_id (uuid FK to auth.users), score (int), max_score (int), time_taken_seconds (int), completed_at (timestamptz)
6// 4. answers: id (uuid PK), attempt_id (uuid FK to attempts), question_id (uuid FK to questions), user_answer (text), is_correct (boolean), points_earned (int)
7// Add RLS so users can only read their own attempts. Generate SQL and types.

1// Paste this prompt into V0's AI chat:
2// Create quiz pages:
3// 1. app/quizzes/page.tsx — browse quizzes with Card grid: title, description, question count, time limit Badge, difficulty Badge. Add search Input and category filter.
4// 2. app/quiz/[id]/page.tsx — 'use client' quiz taking interface:
5//    - Countdown timer at the top (useEffect with setInterval, auto-submits when timer hits 0)
6//    - Progress bar showing question X of Y
7//    - Question Card with RadioGroup for multiple choice, true/false toggle, or Input for short answer
8//    - Previous/Next navigation Buttons
9//    - Submit Button that sends all answers to the scoring API
10//    - Store attempt start time in state for server-side time validation
11// Use shadcn/ui Card, RadioGroup, Progress, Badge, Button, Input.

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const { quiz_id, user_id, answers, start_time } = await req.json()
11
12  const { data: questions } = await supabase
13    .from('questions')
14    .select('id, correct_answer, points')
15    .eq('quiz_id', quiz_id)
16    .order('position')
17
18  if (!questions) {
19    return NextResponse.json({ error: 'Quiz not found' }, { status: 404 })
20  }
21
22  const { data: quiz } = await supabase
23    .from('quizzes')
24    .select('time_limit_seconds')
25    .eq('id', quiz_id)
26    .single()
27
28  const timeTaken = Math.floor((Date.now() - new Date(start_time).getTime()) / 1000)
29  if (quiz && timeTaken > quiz.time_limit_seconds + 5) {
30    return NextResponse.json({ error: 'Time limit exceeded' }, { status: 400 })
31  }
32
33  let score = 0
34  const maxScore = questions.reduce((sum, q) => sum + q.points, 0)
35  const gradedAnswers = questions.map((q) => {
36    const userAnswer = answers[q.id] || ''
37    const isCorrect = userAnswer.toLowerCase() === q.correct_answer.toLowerCase()
38    const pointsEarned = isCorrect ? q.points : 0
39    score += pointsEarned
40    return {
41      question_id: q.id,
42      user_answer: userAnswer,
43      is_correct: isCorrect,
44      points_earned: pointsEarned,
45    }
46  })
47
48  const { data: attempt } = await supabase
49    .from('attempts')
50    .insert({ quiz_id, user_id, score, max_score: maxScore, time_taken_seconds: timeTaken })
51    .select('id')
52    .single()
53
54  if (attempt) {
55    await supabase.from('answers').insert(
56      gradedAnswers.map((a) => ({ ...a, attempt_id: attempt.id }))
57    )
58  }
59
60  return NextResponse.json({ attempt_id: attempt?.id, score, max_score: maxScore, time_taken: timeTaken })
61}

1// Paste this prompt into V0's AI chat:
2// Create results and leaderboard pages:
3// 1. app/quiz/[id]/results/page.tsx — score Card showing score/maxScore percentage, time taken, and a Table of each question with the user's answer, correct answer, and a green checkmark or red X icon.
4// 2. app/quiz/[id]/leaderboard/page.tsx — Table showing rank, user Avatar and name, score Badge, and time taken. Sorted by score DESC then time ASC. Highlight the current user's row.
5// 3. app/create/page.tsx — quiz builder form: Input for title, Textarea for description, Input for time limit. Add Question Button that appends a question form with question_text Input, type Select (multiple_choice/true_false/short_answer), dynamic option Inputs, and correct_answer Select. Reorder with drag handles.
6// Use shadcn/ui Table, Card, Badge, Avatar, Select, Button, Input, Textarea.