How to Clone Duolingo

Create a Duolingo-style gamified learning app called LingoLeap using Next.js (App Router), Tailwind, Prisma + SQLite. Subject: beginner Spanish.

## What to build
Game-like lessons on a skill path with XP, streaks, hearts and a weekly league. Freemium: hearts limit free users; a mock premium plan removes it.

## Screens
- Landing page: playful hero, green CTA, feature cards
- Learning path: vertical snake path of circular unit nodes (locked/current/completed states), header with streak flame + hearts + gems counters
- Lesson player: one exercise at a time, top progress bar, 4 exercise types (multiple choice, word-bank sentence builder, pair matching, type-the-answer), instant right/wrong feedback banners, completion screen with XP + confetti
- Leaderboard: 30-user weekly league with promote/demote zones and a countdown
- Profile: streak calendar heat map, XP total, badges
- Shop: gems → streak freeze / heart refill; premium upsell card
- Admin page: manage units/lessons/exercises with forms

## Prisma schema
User (id, name, email, xpTotal, gems, hearts, heartsUpdatedAt, streakCount, lastLessonDate, isPremium, leagueTier), Unit (id, title, color, position), Lesson (id, unitId, title, position), Exercise (id, lessonId, type, prompt, options Json, answer Json, position), Progress (userId, lessonId, accuracy, xpEarned, completedAt), LeagueEntry (userId, weekStart, weeklyXp)

## Game logic (must actually work)
- Exercise checking server-side: each type has a checker function; never trust the client
- Hearts: -1 per wrong answer, regenerate 1 per 2h (compute lazily from heartsUpdatedAt), lesson blocked at 0 unless premium
- Streak: +1 first lesson of the day, broken by a missed day; streak freeze item consumes itself instead
- XP: 10/lesson + up to 5 accuracy bonus; league table sorts by weeklyXp
- Sequential unlock: lesson N+1 requires lesson N completed

## Style
Bright and chunky: #58CC02 green primary, #1CB0F6 blue accents, Nunito font, thick rounded buttons with a darker bottom edge (3D press effect), bouncy transitions, emoji-rich. Mobile-first.

Seed: 3 units × 4 lessons × 6 exercises of real beginner Spanish, one demo user mid-path with a 6-day streak, 29 bot users with random weekly XP for the league.

Build a production-quality Duolingo-style learning platform. The exercise engine and game economy must be server-authoritative - assume hostile clients.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; Framer Motion for lesson feedback animations
- PostgreSQL via Prisma; NextAuth (email + Google); Upstash Redis for league leaderboards (sorted sets)
- Zod schemas shared between exercise authoring and runtime validation

## Core design: exercises as data
Define a discriminated union ExerciseSpec in lib/exercises/types.ts:
  { type: 'choice', prompt, options: string[], correctIndex }
  { type: 'wordbank', prompt, bank: string[], correctOrder: number[] }
  { type: 'match', pairs: [string, string][] }
  { type: 'fill', prompt, acceptedAnswers: string[] } // normalize accents/case
Each type gets a pure checker in lib/exercises/checkers.ts with unit tests (vitest), a React renderer component, and a Zod schema. Adding exercise type #5 must require zero changes to the lesson player shell.

## Game economy (server-authoritative)
- POST /api/lesson/[id]/submit: client sends answers; server re-checks every exercise, computes accuracy/XP, decrements hearts on wrongs, writes Progress, updates streak via a single Postgres transaction. Response drives the results screen
- Hearts regenerate lazily: hearts = min(5, stored + floor((now - heartsUpdatedAt)/2h)) computed in one util, never a cron
- Streak update is idempotent per day (unique constraint on (user_id, date) in a streak_days table - derive streak_count from it, don't store a mutable counter)
- Leagues: weekly cohorts of 30 in Redis sorted sets keyed league:{weekStart}:{cohortId}; a weekly job (Vercel cron) closes leagues and applies promotions

## Schema
users, units, lessons, exercises (spec jsonb validated by Zod on write), progress, streak_days, league_cohorts, league_members, purchases (gems ledger - append-only, balance derived). Indexes on progress(user_id, lesson_id) and league_members(cohort_id, weekly_xp desc).

## Implementation order
1. Schema + auth + seed (3 units of Spanish content as typed fixtures)
2. Exercise engine: types, checkers + tests, renderers, lesson player shell with progress bar and feedback states
3. Submit endpoint + results screen (XP, accuracy, streak, confetti)
4. Learning path UI: snake layout with SVG connectors, node states from progress
5. Hearts + gems economy, shop, streak freeze
6. Leagues with Redis + weekly close job
7. Admin: lesson/exercise editor with live preview using the same renderer components

## Quality bar
- Lesson player fully keyboard-navigable; reduced-motion variant
- Optimistic UI on answer selection, server verdict reconciles
- Anti-cheat: submit endpoint rejects lessons completed faster than total exercise minimum time

Start with step 1; show me the ExerciseSpec types and one checker test before continuing.

Design the complete UI for a Duolingo-style language learning app called LingoLeap. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: bright, chunky, playful - #58CC02 green primary, #1CB0F6 blue accent, Nunito-style rounded font, thick buttons with darker bottom edge (pressable 3D look), juicy feedback states, emoji used liberally.

## Screens

### 1. Learning path (main screen)
- Sticky header: streak flame with count, hearts row (5 heart icons, some empty), gem counter, avatar
- Vertical winding path: circular lesson nodes connected by a snaking line, grouped into colored unit sections with banner headers ('Unit 1 · Order food'); states: completed (gold with crown), current (pulsing ring + START tooltip), locked (gray with padlock)
- Right rail (desktop): league widget (tier shield, rank #7, mini leaderboard of 3 neighbors), daily quests card with progress bars, premium upsell card
- Mobile: bottom tab bar (Learn, Leaderboard, Quests, Shop, Profile)

### 2. Lesson player
- Top: X close button, segmented progress bar, hearts counter
- Exercise area (one at a time), design all four:
  a. Multiple choice: 2×2 image cards with word labels, selected state with blue border
  b. Sentence builder: prompt sentence, answer line, tappable word-bank chips that jump up when used
  c. Match pairs: two columns of chips, matched pairs fade out
  d. Type answer: text input with character accent helper row
- Feedback states: correct = green bottom sheet with 'Nice!' + CONTINUE; wrong = red bottom sheet showing correct answer, heart breaking animation
- Completion screen: confetti, XP badge bouncing in, streak flame +1, accuracy ring, CONTINUE button

### 3. Leaderboard
- League header: tier shields row (Bronze→Diamond) with current highlighted, countdown chip ('4 days left')
- Ranked list of 30: avatar, name, weekly XP; rows 1–10 tinted green with 'PROMOTION ZONE' divider, bottom 5 tinted red with 'DEMOTION ZONE' divider; current user row highlighted and sticky while scrolling

### 4. Profile
- Header: avatar with edit, name, joined date, flag of learning language
- Stat cards: day streak, total XP, current league, top-3 finishes
- Streak calendar (month grid, practiced days filled with flame)
- Achievements: 3-col badge grid, locked badges grayscale

### 5. Shop & paywall
- Gems balance header; item cards (Streak Freeze 200 gems, Heart Refill 350 gems) with buy buttons
- 'LingoLeap Plus' hero card: gradient background, benefit checklist (unlimited hearts, no ads, monthly streak repair), $9.99/mo CTA, 14-day trial note

Fully responsive, mobile-first. Fill everything with realistic Spanish-learning content and 30 fake users with names and XP values for the leaderboard.

Build a gamified learning app (Duolingo model) called LingoLeap for beginner Spanish.

## Entities
- Unit: title, color, position; Lesson: unit reference, title, position
- Exercise: lesson reference, type (choice/wordbank/match/fill), prompt, options (JSON), correctAnswer (JSON), position
- Progress: user, lesson reference, accuracy, xpEarned, completedAt
- UserStats: user, xpTotal, gems, hearts, heartsUpdatedAt, streakCount, lastLessonDate, isPremium, leagueTier
- LeagueEntry: user, weekStart, weeklyXp

## Roles
- Learner: plays lessons, earns XP, buys shop items with gems
- Admin: CRUD on units/lessons/exercises, dashboard with user count and lessons completed per day

## Pages
1. Learning path home: winding vertical path of lesson nodes (completed/current/locked), header showing streak flame, hearts and gems
2. Lesson player: one exercise at a time with progress bar; four exercise types (multiple choice, build-the-sentence from word chips, match pairs, type the answer); wrong answer costs a heart and shows the correction; completion screen with XP earned and streak update
3. Leaderboard: weekly league of 30 users ranked by weekly XP, promotion zone (top 10) and demotion zone (bottom 5) visually marked, countdown to reset
4. Profile: streak calendar, total XP, badges
5. Shop: buy Streak Freeze (200 gems) and Heart Refill (350 gems); premium upsell (unlimited hearts, $9.99/mo - mock checkout)
6. Admin: content management forms

## Rules
- Hearts: max 5, lose 1 per wrong answer, regain 1 every 2 hours, lesson blocked at 0 (premium users exempt)
- Streak: +1 on first completed lesson per day; missing a day resets it unless a Streak Freeze is consumed
- XP: 10 per lesson plus accuracy bonus; weekly XP drives the league ranking
- Lessons unlock sequentially within and across units

## Look & feel
Bright playful style: #58CC02 green, chunky rounded buttons with 3D pressed effect, rounded friendly font, big emoji, celebratory animations on lesson completion. Mobile-first.

Seed: 3 units × 4 lessons × 6 real beginner-Spanish exercises, a demo learner with a 6-day streak placed mid-path, and 29 bot users in the league so the leaderboard looks alive.