Amelies Lernapp 🐴
Eine Duolingo-artige Lern-Web-App für Amelie – mobile-first, weiß/türkis, mit Pony-Maskottchen. Über 100 Lektionen mit ~950 Übungen zu Alltags- und Ausbildungsfähigkeiten für die Hauswirtschaftsschule: Putzen in der richtigen Reihenfolge, Wäsche, Servietten falten, Rechnen mit Geld, Geld verwalten, Englisch für Feriengäste und Kinderbetreuung.
Roter Faden: „Wie gehe ich systematisch vor?" – die richtige Reihenfolge steht überall im Mittelpunkt.
Für wen & was ist besonders
Amelie hat Dyspraxie. Deshalb gilt in der ganzen App:
- Nur Tippen, nie Ziehen – kein Drag & Drop, große Buttons (min. 48 px), Aktion erst beim Loslassen
- Kein Zeitdruck, keine Leben/Herzen – Fehler werden freundlich (orange, nie rot) erklärt und am Ende der Lektion einfach wiederholt
- Leichte Sprache und ein Vorlese-Button 🔊 an jeder Aufgabe
- Gamification, die gut tut: XP, Level (mit Level-Up-Moment 🎉), Streak 🔥, Abzeichen – und ein Wiederholen-Menü (/wiederholen), das zeigt, was zuletzt schwergefallen ist, plus „Gemischt üben" mit Fehler-Priorisierung
- Fehler-Ablauf: 1. Fehler = sofort nochmal versuchen, 2. Fehler = Lösung ansehen, Übung kommt am Lektionsende wieder
- Reset: Im Profil kann alles auf null gesetzt werden (mit Sicherheitsabfrage)
Technik
- Next.js (App Router, TypeScript, Tailwind 4, Framer Motion)
- Supabase (Projekt
lernapp-amelie): Inhalte (topics → lessons → exercises), Bilder-Storage, Fortschritt/Streak über anonyme Geräte-ID – kein Login für Amelie
- Admin-Bereich
/admin (gemeinsames Passwort): Fortschritts-Dashboard, schwierige Übungen, Publish-Schalter, Lektions-Import per JSON, Bild-Upload
- 6 Übungstypen: Schritte ordnen, Quiz, Paare/Memory, Sortieren, Geld zählen, Budget-Challenge – Format dokumentiert in CONTENT_FORMAT.md
Lokal starten
npm install
cp .env.example .env.local # Werte eintragen, siehe unten
npm run dev # http://localhost:3000
npm test # Vitest
Umgebungsvariablen (.env.local)
| Variable | Woher |
|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase → Project Settings → API |
NEXT_PUBLIC_SUPABASE_ANON_KEY | ebenda („anon public") |
SUPABASE_SERVICE_ROLE_KEY | ebenda („service_role" – geheim!). Nur nötig für Admin-Import/Upload/Publish und Seed-Skript |
ADMIN_PASSWORD | frei wählen – Login für /admin |
ANTHROPIC_API_KEY | optional: Claude Console → API Keys. Schaltet die KI-Hilfe „Pony“ ein (siehe unten) |
KI_TAGESLIMIT | optional: höchstens so viele KI-Anfragen pro Tag (Standard 150) |
KI_MODELL | optional: anderes Claude-Modell (Standard claude-opus-5-5) |
KI-Hilfe „Pony“
Zwei Hilfen mit Claude, beide in Leichter Sprache und nur mit dem Wissen der jeweiligen Lektion:
- „Pony, erklär’s mir“ – Knopf im orangen Banner nach einer falschen Antwort (Lektion, Üben, Prüfung). Beim Sofort-Nochmal gibt das Pony nur einen Hinweis und verrät die Lösung nicht.
- „Frag das Pony“ – Chat zur Lektion, erreichbar auf dem Einführungs- und dem Ergebnis-Screen. Reiner Text-Chat mit Vorschlags-Knöpfen („Frag mich ab!“).
Der Server lädt die Lektion selbst aus Supabase und spricht mit Claude (app/api/ki/*, lib/ki/). Der Schlüssel bleibt auf dem Server. Kostenbremsen: Tageslimit (KI_TAGESLIMIT, gezählt in der Tabelle ki_nutzung, braucht SUPABASE_SERVICE_ROLE_KEY), höchstens 12 Anfragen pro Minute, kurze Antworten, Prompt-Caching. In ki_nutzung stehen nur Zeitpunkt, Lektion und Token-Zahlen, keine Fragen oder Antworten. Ohne ANTHROPIC_API_KEY sind die Pony-Knöpfe unsichtbar.
Neue Inhalte
Weg 1 (empfohlen): Xavier beschreibt Claude im Chat das Thema → Claude erstellt die Lektion nach CONTENT_FORMAT.md, legt sie unter content/lessons/ ab und spielt sie direkt per Supabase ein. Kein Deploy nötig, sofort auf dem Handy.
Weg 2: /admin/inhalte → „Neue Lektion (JSON)" einfügen.
Seed-Skript: npx tsx scripts/seed.ts (validiert + upsertet alles aus content/; --check validiert nur).
Deployment (Vercel)
- Repo importieren:
vercel CLI oder vercel.com → Projekt aus xavier848/lernappAmelie
- Die 4 Umgebungsvariablen setzen (Production), für die KI-Hilfe zusätzlich
ANTHROPIC_API_KEY
- Deploy – fertig. Danach Domain zuweisen: Subdomain von alpflow.net (z. B.
lernen.alpflow.net) als CNAME auf cname.vercel-dns.com + Domain im Vercel-Projekt eintragen
- Amelie: Seite öffnen → „Zum Home-Bildschirm hinzufügen" → fühlt sich wie eine App an (PWA)
Projekt-Dokumente
