How to Build a Language Learning App with Lovable

1Create a language learning app database schema in Supabase with these tables:
2
3- languages: id, name (e.g. 'Spanish'), code ('es'), flag_emoji, is_active
4- decks: id, language_id, title, description, category (vocabulary|phrases|grammar), difficulty (A1|A2|B1|B2|C1), card_count (int), created_at
5- cards: id, deck_id, front (text, target language), back (text, native language), pronunciation (text, optional), image_url (text, optional), tags (text array)
6- card_reviews: id, user_id, card_id, ease_factor (float, default 2.5), interval_days (int, default 1), repetitions (int, default 0), next_review_at (timestamptz, default now()), last_rating (int 1-4), reviewed_at
7- lessons: id, deck_id, title, body_text (text, lesson intro), order_index (int), xp_reward (int default 10)
8- lesson_cards: id, lesson_id, card_id, order_index
9- user_lesson_progress: id, user_id, lesson_id, status (not_started|in_progress|completed), completed_at
10- user_stats: id (references auth.users), xp_total (int default 0), streak_days (int default 0), last_study_date (date), studied_today (bool)
11
12RLS policies:
13- decks, cards, lessons, lesson_cards, languages: public SELECT, no user writes
14- card_reviews: users can SELECT/INSERT/UPDATE their own rows (user_id = auth.uid())
15- user_lesson_progress: users can SELECT/INSERT/UPDATE their own rows
16- user_stats: users can SELECT/UPDATE their own row
17
18Create a Supabase RPC function get_due_cards(p_deck_id uuid, p_user_id uuid, p_limit int) that returns cards from the deck where card_reviews.next_review_at <= now() for this user, OR cards with no review row yet (new cards). Limit to p_limit results.

1Build a Flashcard component at src/components/Flashcard.tsx.
2
3Requirements:
4- The card renders a 3D flip using CSS: outer div with perspective: 1000px, inner div with transform-style: preserve-3d and a transition on transform: rotateY(180deg)
5- Front face and back face are absolutely positioned, back face has backface-visibility: hidden and initial rotateY(180deg)
6- On click, toggle a boolean isFlipped state. When flipped, rotate inner div to rotateY(180deg)
7- Front shows: card.front in large text (2xl bold), card.pronunciation in smaller muted text below
8- Back shows: card.back in large text, an optional image if card.image_url exists, and a Tags section showing card.tags as Badges
9- When isFlipped is true AND the card has not been rated yet, show four rating Buttons below the card: 'Again (1)', 'Hard (2)', 'Good (3)', 'Easy (4)' with colors: red, orange, blue, green
10- On rating button click, call onRate(rating: 1 | 2 | 3 | 4) prop
11- The component accepts props: card: Card, onRate: (rating: number) => void, isLast: boolean
12- Use Framer Motion AnimatePresence for the entrance/exit of the card (slide in from right, slide out to left when rated)

1// src/lib/sm2.ts
2export interface ReviewData {
3  easeFactor: number
4  intervalDays: number
5  repetitions: number
6}
7
8export function calculateNextReview(
9  current: ReviewData,
10  rating: 1 | 2 | 3 | 4
11): ReviewData & { nextReviewAt: Date } {
12  let { easeFactor, intervalDays, repetitions } = current
13
14  if (rating < 3) {
15    // Incorrect or hard — reset
16    repetitions = 0
17    intervalDays = 1
18  } else {
19    if (repetitions === 0) {
20      intervalDays = 1
21    } else if (repetitions === 1) {
22      intervalDays = 6
23    } else {
24      intervalDays = Math.round(intervalDays * easeFactor)
25    }
26    repetitions += 1
27  }
28
29  // Update ease factor (minimum 1.3)
30  easeFactor = Math.max(
31    1.3,
32    easeFactor + 0.1 - (4 - rating) * (0.08 + (4 - rating) * 0.02)
33  )
34
35  const nextReviewAt = new Date()
36  nextReviewAt.setDate(nextReviewAt.getDate() + intervalDays)
37
38  return { easeFactor, intervalDays, repetitions, nextReviewAt }
39}

1// supabase/functions/conversation-partner/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7}
8
9serve(async (req: Request) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders })
12  }
13
14  try {
15    const { messages, targetLanguage, cefrLevel, nativeLanguage } = await req.json()
16
17    const systemPrompt = `You are a friendly native ${targetLanguage} speaker helping a ${cefrLevel} level student practice conversation.
18Rules:
191. Always respond in ${targetLanguage} only
202. Keep responses to 1-3 sentences, appropriate for ${cefrLevel} level
213. If the user makes a grammar mistake, respond naturally then add one sentence in ${nativeLanguage}: "Grammar tip: [correction]"
224. Ask a follow-up question to keep the conversation going
235. Use vocabulary appropriate for ${cefrLevel} level`
24
25    const response = await fetch('https://api.openai.com/v1/chat/completions', {
26      method: 'POST',
27      headers: {
28        'Authorization': `Bearer ${Deno.env.get('OPENAI_API_KEY')}`,
29        'Content-Type': 'application/json',
30      },
31      body: JSON.stringify({
32        model: 'gpt-4o',
33        messages: [
34          { role: 'system', content: systemPrompt },
35          ...messages,
36        ],
37        max_tokens: 300,
38        temperature: 0.7,
39      }),
40    })
41
42    const data = await response.json()
43    const reply = data.choices?.[0]?.message?.content ?? 'Lo siento, try again.'
44
45    return new Response(
46      JSON.stringify({ reply }),
47      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
48    )
49  } catch (err) {
50    const message = err instanceof Error ? err.message : 'Unknown error'
51    return new Response(
52      JSON.stringify({ error: message }),
53      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
54    )
55  }
56})

1Build two pages:
2
31. Home dashboard at src/pages/Home.tsx:
4- Top section: streak flame icon + streak_days count, XP total with a level badge (level = Math.floor(xp/100))
5- 'Study Now' Card: shows count of cards due today from get_due_cards across all decks. Large Button links to /study
6- Recent activity: last 5 card_reviews showing card.front, rating as colored Badge, and relative timestamp
7- Mastery breakdown: four Badge counts for cards at each stage (New = no review, Learning = repetitions 1-2, Review = repetitions 3-5, Mastered = repetitions > 5)
8
92. Deck browser at src/pages/Decks.tsx:
10- Filter Tabs by category: All, Vocabulary, Phrases, Grammar
11- Each deck as a Card with: title, description, difficulty Badge (A1=green through C1=red), card count, a circular Progress indicator showing user's mastered/total cards
12- Clicking a deck opens /deck/:id showing the lesson list for that deck
13- Each lesson row shows: title, status icon (locked/in-progress/completed), XP reward Badge
14- Completed lessons show a checkmark. Locked lessons are grayed out (only unlock sequentially).