Vorstellung der neuen Alyonka.app Website
Ich freue mich, den Start der neuen Website alyonka.app bekannt zu geben — eine interaktive Plattform zum Sprachenlernen und professionelle Webpräsenz für Alyona Novikova, Sprachlehrerin für Englisch und Portugiesisch in Cascais und Lissabon, Portugal.
Was als einfache Idee für Karteikarten begann, hat sich zu einer vollwertigen Full-Stack-Webanwendung entwickelt, die interaktive Lernübungen (Zuordnungsspiele, dynamische Kreuzworträtsel und Quizze) mit einer modernen Lehrer-Präsentationsseite und einem Autorensystem für Unterrichtsinhalte verbindet.
Was ist Alyonka.app?
Die Plattform erfüllt zwei wesentliche Aufgaben:
- Lehrer-Website und Unterrichtsbuchung: Eine zentrale Anlaufstelle für Lernende, die Englisch- oder Portugiesischunterricht suchen (weltweit online oder vor Ort in Lissabon und Cascais). Ausgestattet mit mehrsprachiger Unterstützung (Englisch, Portugiesisch, Russisch, Ukrainisch, Deutsch, Französisch), Lehrplaninformationen, Erfahrungsberichten und direkten Kontaktmöglichkeiten.
- Interaktive Übungsplattform: Eine spielerische Lernumgebung, in der Lernende ihren Wortschatz, ihre Grammatik und ihr Hörverständnis durch ansprechende Übungen festigen können.
Interaktive Lernfunktionen
1. Zuordnungsspiele (Match-Up)
Der Match-Up-Player ermöglicht es Lernenden, Wörter, Sätze, Definitionen und Bilder einander zuzuordnen. Er bietet flüssige Animationen, Fortschrittsanzeige und Konfetti-Effekte nach erfolgreichem Abschluss.
2. Dynamisch generierte Kreuzworträtsel
Die Plattform verfügt über einen automatischen Kreuzworträtsel-Generator, der Wörter und Hinweise in einem optimalen Gitter anordnet. Der interaktive Player bietet:
- Tastatur- und Touchscreen-Steuerung
- Hinweise und Begriffserklärungen
- Individuelle Designs
- Sofortige Antwortüberprüfung
3. Interaktive Quizze
Unterstützung für Single- und Multiple-Choice-Fragen, detaillierte Erklärungen zu den Antworten und Auswertungen.
4. Durchsuchbarer Übungskatalog
Lernende können Übungen nach Titeln, Kategorien, Schlagwörtern und Sprachniveaus durchsuchen und filtern.
Technologie-Stack und Architektur
| Schicht | Technologie |
|---|---|
| Frontend-Framework | SvelteKit 2 + Svelte 5 (Runes) |
| Styling | Tailwind CSS v4 |
| Backend und SSR | SvelteKit (@sveltejs/adapter-node) |
| Datenbank | PostgreSQL + Kysely (Typsicherer Query Builder) |
| Authentifizierung | Better Auth (@better-auth/kysely-adapter) |
| Bildverarbeitung | Sharp (WebP-Konvertierung und Optimierung) |
| Testing | Vitest + Testcontainers (PostgreSQL-Container) |
| Bereitstellung | Docker und Docker Compose |
| Monitoring | Pino Logger + Prometheus-Metriken |
Technische Highlights
Svelte 5 Runes für den Spielzustand
Die Übungs-Player nutzen das moderne Reaktivitätsmodell von Svelte 5 mit Runes ($state, $derived, $props). Dadurch lässt sich der Zustand komplexer Spiele (Cursor-Positionen im Kreuzworträtsel, Kartenauswahl-Historie, Timer) übersichtlich und ohne externe State-Bibliotheken verwalten.
Typsichere Datenbankschicht mit Kysely
Alle Datenbankabfragen sind vollständig typsicher. Migrationen werden über TypeScript ausgeführt, und Integrationstests nutzen Testcontainers, um isolierte PostgreSQL-Instanzen bereitzustellen.
Automatische Bildoptimierung
Beim Hochladen von Bildern oder Generieren von Illustrationen per KI werden Dateien automatisch per Sharp skaliert und in das moderne WebP-Format umgewandelt.
Projektlinks
- Website: https://alyonka.app
- Übungskatalog: https://alyonka.app/exercises
- Kontakt & Unterricht buchen: https://alyonka.app/#contact