Zum Inhalt springen
Frank David Lee EN

Alle Projekte

In Arbeit

heyAppa

Spielerische Sprachlern-App – zuerst für Koreanisch.

Zeitraum
seit Juli 2026
Rolle
Konzept, Entwicklung und Betrieb (Solo)
Status
In Arbeit
Technik
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Prisma
  • PostgreSQL
  • pgvector
  • Anthropic SDK
  • Zod
  • Vitest
  • AWS
  • Terraform
Bildschirmfotos folgen

Problem

Eine Sprache mit eigener Schrift zu lernen braucht Ausdauer – und Übung, die Spaß macht. Ich lerne selbst Koreanisch. Eine Lern-App sollte dabei niemanden ausschließen: auch nicht, wer mit Tastatur oder Screenreader lernt.

Lösung

heyAppa ist eine spielerische Sprachlern-App, zunächst für Koreanisch. Als Maskottchen begleitet Appa, ein lila Drache, durch die App – mit einer eigenen Charakter-Bibel als verbindlicher Quelle für seine Gestalt.

  • Übersetzungen und Geschichten mit einem LLM über das Anthropic SDK.
  • Wiederholung mit Karten zum Umdrehen; eigene Reihenfolgen per Drag-and-drop – mit Maus, Touch oder Tastatur.
  • Oberfläche auf Deutsch, Englisch und Koreanisch.

Barrierefreiheit

Bevor die Oberfläche neu gestaltet wird, kam die Barrierefreiheit in drei Runden. Sie gilt seitdem als Grundlage, die nicht zurückfallen darf.

  • Kontrast-Tokens, Fokusfalle in Dialogen und Tastaturbedienung für die Wiederholung; globale Kurzbefehle lösen in Eingabefeldern nicht mehr aus.
  • Sichtbarer Fokus und Fokusführung in Kontextmenüs; keine verschachtelten interaktiven Elemente, nach dem Umdrehen einer Karte kehrt der Fokus zurück.
  • Sortieren per Tastatur mit Screenreader-Ansagen; Hinweise und Ansagen auf Deutsch, Englisch und Koreanisch, abgesichert mit Tests.

Architektur und Entscheidungen

  • Next.js 16 (App Router) mit React 19, TypeScript und Tailwind 4; Prisma 6 mit PostgreSQL und pgvector; Zod an den Grenzen, Tests mit Vitest.
  • Betrieb auf AWS, Infrastruktur mit Terraform; beim Deployment laufen Migrationsprüfung, Build und Neustart des Dienstes nacheinander.
  • Agenten mit klaren Rollen: Claude Code setzt je Pull Request genau eine Aufgabe um, Codex prüft die Änderung nur lesend, Befunde gehen in denselben PR zurück. Sichtbare Änderungen gehen erst nach meiner Sichtprüfung weiter, gemergt wird nur von Hand.
  • Der Agent arbeitet als reiner Editor in einem frischen Arbeitsverzeichnis; Branch, Commit und PR übernimmt ein Orchestrator, der nur freigegebene Pfade zulässt.
  • Neugestaltung mit eingefrorener Grundlage: Designbrief, Design-System als Umsetzungsvertrag und Briefings je Ansicht – die Logik bleibt dabei unangetastet.

Stand

heyAppa ist in Entwicklung. Die Runden zur Barrierefreiheit sind abgeschlossen, die Neugestaltung ist geplant und dokumentiert.