Lern-App für Serbisch: Import/Export und Redesign zur PWA

Video: So funktioniert die App

1:52

Video · Englisch · 1:52

Rundgang durch die App

Lernen, Tests, Dialoge, Import und Export, Dunkelmodus und Offline-Modus – auf Englisch, mit KI-Sprecherstimme.

Ausgangslage

• Eine öffentliche Lern-App auf GitHub für alle, die Serbisch lernen: Wörter nach Themen mit Aussprache, Lektionen mit Mini-Tests, Dialoge, Tests und das Alphabet.
• Technisch eine einzige HTML-Datei mit JavaScript, ohne Build und ohne Server – Fortschritt und eigene Inhalte liegen im Browser (localStorage).
• Eigene Themen und Lektionen ließen sich hinzufügen, aber nicht mit anderen teilen; auf dem Computer war die Oberfläche eine schmale Handy-Spalte.

Pull Request 1: eigene Materialien teilen – Import und Export

• Neue Seite „Meine Materialien“: alle eigenen Themen, Dialoge und Lektionen mit Auswahl und Löschen.
• Export als ein JSON-Paket – herunterladen, als Text kopieren oder über das Teilen-Menü des Telefons verschicken.
• Import aus einer Datei oder per Einfügen: versteht das Paket und die alten Einzelformate, zeigt vorher an, was hinzukommt, überspringt fehlerhafte Einträge und fragt bei Duplikaten: ersetzen oder überspringen.
• Sicherheit: Lektionen enthalten HTML. Weil sie jetzt von anderen kommen können, wird importiertes HTML bereinigt – ohne <script>, on*-Handler und javascript:-Links.

Pull Request 2: Redesign zur installierbaren Web-App

Design

• Neues Designsystem: Farb-Tokens, Schrift Manrope, Karten, Schatten und ruhige Animationen.
• Dunkelmodus: automatisch wie im System, hell oder dunkel.
• Telefon: untere Navigationsleiste; Computer (ab 900 px): Seitenmenü und breite Raster.
• Feedback beim Lernen: Animation für richtige und falsche Antworten, Konfetti für ein gutes Ergebnis.

VorherNachher

Neue Funktionen

• „Zurück“ funktioniert: Jeder Bildschirm hat eine eigene Adresse, Neuladen springt nicht mehr auf die Startseite.
• Tagesziel mit Fortschrittsring, Lernserie und „Wort des Tages“.
• Suche über alle Wörter – auch ohne Sonderzeichen: „dovidjenja“ findet „doviđenja“.
• Fehler wiederholen: eigener Test aus den Wörtern, bei denen man sich geirrt hat; bestes Ergebnis je Thema.
• Lateinisch oder kyrillisch – umschaltbar in den Einstellungen oder direkt auf der Lernkarte.
• Aussprache prüfen per Mikrofon (Web Speech API), Wischen auf dem Telefon, Tastenkürzel am Computer, Aktivitätskalender über vier Wochen.

PWA

• Manifest und Icons: Die App lässt sich auf Telefon und Computer installieren.
• Service Worker: Sie läuft ohne Internet – auch schon gehörte Wörter klingen offline.

Bildschirme

Zum Vergrößern auf ein Bild tippen.

So habe ich gearbeitet

Mit Claude Code: den Code der App gelesen und die Änderungen in zwei getrennte Pull Requests aufgeteilt – jeweils mit Beschreibung und Prüfliste. Geprüft: alle Bildschirme bei 375 px Breite, der Desktop bei 1280 px, Zurück und Vor im Browser, Neuladen auf jedem Bildschirm, Start ohne Internet über den Service Worker – und dass alter Fortschritt aus dem localStorage erhalten bleibt. Die App bleibt reines HTML und JavaScript ohne Build: Andere können sie weiter wie bisher bearbeiten.

Screenshots aus der App mit Demo-Daten. Die Oberfläche (im Original Russisch) habe ich für dieses Portfolio ins Englische übersetzt; die Beschreibungen der Pull Requests auf GitHub sind auf Russisch.