How to Build Language learning app with V0

1// Paste this prompt into V0's AI chat:
2// Build a language learning app. Create a Supabase schema with these tables:
3// 1. languages: id (uuid PK), code (text), name (text)
4// 2. decks: id (uuid PK), language_id (uuid FK to languages), title (text), description (text), creator_id (uuid FK to auth.users), is_public (boolean DEFAULT false)
5// 3. cards: id (uuid PK), deck_id (uuid FK to decks), front (text), back (text), audio_url (text), image_url (text)
6// 4. user_progress: id (uuid PK), user_id (uuid FK to auth.users), card_id (uuid FK to cards), ease_factor (numeric DEFAULT 2.5), interval_days (int DEFAULT 1), repetitions (int DEFAULT 0), next_review_at (timestamptz), last_reviewed_at (timestamptz)
7// 5. streaks: user_id (uuid PK FK to auth.users), current_streak (int DEFAULT 0), longest_streak (int DEFAULT 0), last_active (date)
8// Add RLS policies: users can read public decks and their own progress.
9// Generate SQL migration and TypeScript types.

1'use client'
2
3import { useState } from 'react'
4import { Card, CardContent } from '@/components/ui/card'
5import { Button } from '@/components/ui/button'
6import { Progress } from '@/components/ui/progress'
7
8interface FlashCard {
9  id: string
10  front: string
11  back: string
12  audio_url?: string
13}
14
15export function ReviewSession({ cards }: { cards: FlashCard[] }) {
16  const [index, setIndex] = useState(0)
17  const [flipped, setFlipped] = useState(false)
18  const current = cards[index]
19  const progress = ((index) / cards.length) * 100
20
21  async function handleRating(quality: number) {
22    await fetch('/api/review', {
23      method: 'POST',
24      headers: { 'Content-Type': 'application/json' },
25      body: JSON.stringify({ card_id: current.id, quality }),
26    })
27    setFlipped(false)
28    setIndex((i) => i + 1)
29  }
30
31  if (index >= cards.length) {
32    return (
33      <Card className="p-8 text-center">
34        <CardContent>
35          <h2 className="text-2xl font-bold">Session Complete!</h2>
36          <p className="text-muted-foreground mt-2">You reviewed {cards.length} cards</p>
37        </CardContent>
38      </Card>
39    )
40  }
41
42  return (
43    <div className="space-y-6">
44      <Progress value={progress} />
45      <div
46        className="cursor-pointer perspective-1000"
47        onClick={() => setFlipped(!flipped)}
48      >
49        <div className={`relative w-full h-64 transition-transform duration-500 transform-style-3d ${flipped ? 'rotate-y-180' : ''}`}>
50          <Card className="absolute inset-0 backface-hidden flex items-center justify-center p-8">
51            <CardContent className="text-2xl font-medium text-center">{current.front}</CardContent>
52          </Card>
53          <Card className="absolute inset-0 backface-hidden rotate-y-180 flex items-center justify-center p-8">
54            <CardContent className="text-2xl font-medium text-center">{current.back}</CardContent>
55          </Card>
56        </div>
57      </div>
58      {flipped && (
59        <div className="flex gap-2 justify-center">
60          <Button variant="destructive" onClick={() => handleRating(1)}>Again</Button>
61          <Button variant="outline" onClick={() => handleRating(3)}>Hard</Button>
62          <Button variant="default" onClick={() => handleRating(4)}>Good</Button>
63          <Button variant="secondary" onClick={() => handleRating(5)}>Easy</Button>
64        </div>
65      )}
66    </div>
67  )
68}

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
9function sm2(quality: number, repetitions: number, easeFactor: number, interval: number) {
10  if (quality < 3) {
11    return { repetitions: 0, interval: 1, easeFactor }
12  }
13
14  let newInterval: number
15  if (repetitions === 0) newInterval = 1
16  else if (repetitions === 1) newInterval = 6
17  else newInterval = Math.round(interval * easeFactor)
18
19  const newEase = Math.max(
20    1.3,
21    easeFactor + (0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02))
22  )
23
24  return {
25    repetitions: repetitions + 1,
26    interval: newInterval,
27    easeFactor: newEase,
28  }
29}
30
31export async function POST(req: NextRequest) {
32  const { card_id, quality } = await req.json()
33
34  if (!card_id || quality === undefined || quality < 0 || quality > 5) {
35    return NextResponse.json({ error: 'Invalid input' }, { status: 400 })
36  }
37
38  const { data: progress } = await supabase
39    .from('user_progress')
40    .select('*')
41    .eq('card_id', card_id)
42    .single()
43
44  const current = progress || { repetitions: 0, ease_factor: 2.5, interval_days: 1 }
45  const result = sm2(quality, current.repetitions, current.ease_factor, current.interval_days)
46
47  const nextReview = new Date()
48  nextReview.setDate(nextReview.getDate() + result.interval)
49
50  const { error } = await supabase.from('user_progress').upsert({
51    card_id,
52    user_id: (await supabase.auth.getUser()).data.user?.id,
53    ease_factor: result.easeFactor,
54    interval_days: result.interval,
55    repetitions: result.repetitions,
56    next_review_at: nextReview.toISOString(),
57    last_reviewed_at: new Date().toISOString(),
58  })
59
60  if (error) return NextResponse.json({ error: error.message }, { status: 500 })
61  return NextResponse.json({ next_review_at: nextReview.toISOString(), interval: result.interval })
62}

1// Paste this prompt into V0's AI chat:
2// Create a learn dashboard at app/learn/page.tsx.
3// Requirements:
4// - Fetch due cards count (where next_review_at <= now) grouped by deck
5// - Show streak info in a Card: flame icon, current_streak number, 'day streak' text, longest_streak below
6// - Show a grid of deck Cards with: deck title, language Badge, due cards count in a red Badge, total cards, Progress bar for mastered percentage
7// - Each deck Card has a 'Review Now' Button linking to /learn/[deckId]
8// - If no cards are due, show a celebration message: 'All caught up! Come back tomorrow.'
9// - Add a 'Browse Decks' Button linking to /decks for discovering new content
10// - Update the streak: if last_active is yesterday, increment current_streak; if last_active is not yesterday or today, reset to 1; if today, do nothing

1// Paste this prompt into V0's AI chat:
2// Create a deck browser at app/decks/page.tsx.
3// Requirements:
4// - Fetch all public decks from Supabase with card count and language name
5// - Display as a shadcn/ui Card grid: deck title, language Badge, card count, description preview, creator name
6// - Add search Input for filtering by title or language
7// - Add a Drawer for deck detail: shows first 5 cards (front only), full description, and a 'Start Learning' Button
8// - 'Start Learning' copies the deck to the user's progress and redirects to /learn/[deckId]
9// - Use Server Components for the page with Supabase query, client component only for the search input and Drawer interaction
10// Also create a Supabase Storage public bucket called 'audio' for pronunciation files.