Introducing the New Alyonka.app Website
I am excited to share the launch of the new alyonka.app website — an interactive language learning platform and professional web presence built for Alyona Novikova, an English and Portuguese language teacher based in Cascais and Lisbon, Portugal.
What started as a simple flashcard idea has grown into a full-featured, full-stack educational web application that combines interactive learning exercises (match-up games, dynamic crosswords, and quizzes) with a modern teacher landing page and an administrative content authoring system.
What is Alyonka.app?
The platform serves two primary purposes:
- Teacher Landing & Booking Platform: An online home for students looking for online or in-person English and Portuguese lessons in Lisbon and Cascais. It features multi-language support (English, Portuguese, Russian, Ukrainian, German, French), curriculum details, student testimonials, and direct contact options.
- Interactive Exercise Engine: A gamified practice environment where students can reinforce vocabulary, grammar, and listening skills through engaging exercises.
Interactive Learning Features
1. Match-Up Games
The Match-Up player allows students to pair words, phrases, definitions, and images. It features animated card flipping, progress tracking, and celebratory confetti upon completion.
2. Procedural Crosswords
The platform includes an automated crossword layout generator that takes word and clue pairs and places them into an optimal intersecting grid. The interactive crossword player provides:
- Keyboard and touch navigation
- Clue explanations and hints
- Custom background themes
- Instant validation and completion tracking
3. Multi-Choice Quizzes
Quizzes support single and multiple-choice questions, rich explanations for answers, and detailed scoring summaries.
4. Searchable Exercise Catalog
Students can browse and filter exercises by title, category, tags, and language level, making it easy to find relevant practice material.
Tech Stack & Architecture
Here is the breakdown of technologies powering the platform:
| Layer | Technology |
|---|---|
| Frontend Framework | SvelteKit 2 + Svelte 5 (Runes) |
| Styling | Tailwind CSS v4 |
| Backend & SSR | SvelteKit (@sveltejs/adapter-node) |
| Database | PostgreSQL + Kysely (Type-safe SQL query builder) |
| Authentication | Better Auth (@better-auth/kysely-adapter) |
| Image Processing | Sharp (WebP conversion & optimization) |
| Testing | Vitest + Testcontainers (PostgreSQL containers) |
| Deployment | Docker & Docker Compose multi-stage builds |
| Observability | Pino structured logger + Prometheus metrics |
Key Engineering Highlights
Svelte 5 Runes for Game State
The exercise players rely on Svelte 5's new reactivity model using runes ($state, $derived, $props). This made managing complex interactive states — such as active crossword cursor positions, selection history in match-up games, and timer intervals — clean and predictable without external state management libraries.
Type-Safe Database Layer with Kysely
All database interactions are strictly typed using Kysely. Database migrations run seamlessly via TypeScript scripts, and integration tests use Testcontainers to spin up isolated, real PostgreSQL instances on the fly during test runs.
Image Optimization Pipeline
When uploading custom illustrations or utilizing AI-generated images for exercises, images are automatically processed, resized, and converted to modern WebP format via Sharp, ensuring minimal bandwidth usage and snappy load times on mobile devices.
Check It Out
- Website: https://alyonka.app
- Interactive Exercises: https://alyonka.app/exercises
- Contact & Lessons: https://alyonka.app/#contact