Запуск новой версии сайта Alyonka.app
Рад поделиться запуском новой версии сайта alyonka.app — интерактивной образовательной платформы и персонального сайта преподавателя английского и португальского языков Алёны Новиковой (Кашкайш и Лиссабон, Португалия).
То, что начиналось как простая идея карточек для запоминания слов, переросло в полноценное full-stack веб-приложение, объединяющее интерактивные упражнения (игры на сопоставление, динамические кроссворды, тесты), современный сайт преподавателя и административную панель для создания учебных материалов.
Что такое Alyonka.app?
Платформа решает две ключевые задачи:
- Сайт преподавателя и запись на уроки: Онлайн-страница для студентов, ищущих уроки английского и европейского португальского (онлайн по всему миру и офлайн в Кашкайше и Лиссабоне). Поддерживает мультиязычность (английский, португальский, русский, украинский, немецкий, французский), описание методологии, отзывы и форму контактов.
- Интерактивный движок упражнений: Геймифицированная среда для практики, где студенты могут тренировать словарный запас, грамматику и восприятие на слух.
Возможности интерактивного обучения
1. Игра на сопоставление (Match-Up)
Плеер Match-Up позволяет сопоставлять слова, фразы, определения и картинки. Включает плавную анимацию карточек, прогресс прохождения и конфетти при завершении.
2. Процедурные кроссворды
Платформа оснащена алгоритмом автоматического построения сетки кроссворда на основе переданных пар слов и подсказок. Плеер кроссвордов поддерживает:
- Навигацию с клавиатуры и сенсорных экранов
- Подсказки и объяснения к словам
- Пользовательские темы оформления
- Мгновенную проверку правильности ответов
3. Тесты с выбором ответов (Quiz)
Поддержка вопросов с одиночным и множественным выбором, подробных объяснений к ответам и подсчета результатов.
4. Каталог упражнений с поиском
Студенты могут искать и фильтровать упражнения по названию, темам, тегам и уровням сложности.
Стек технологий и архитектура
| Слой | Технология |
|---|---|
| Фронтенд фреймворк | SvelteKit 2 + Svelte 5 (Runes) |
| Стилизация | Tailwind CSS v4 |
| Бэкенд и SSR | SvelteKit (@sveltejs/adapter-node) |
| База данных | PostgreSQL + Kysely (типобезопасный query builder) |
| Аутентификация | Better Auth (@better-auth/kysely-adapter) |
| Обработка изображений | Sharp (конвертация и оптимизация в WebP) |
| Тестирование | Vitest + Testcontainers (PostgreSQL) |
| Развертывание | Docker и Docker Compose |
| Наблюдаемость | Pino structured logger + Prometheus metrics |
Ключевые инженерные решения
Руны Svelte 5 для управления состоянием игры
Плееры упражнений используют новую систему реактивности Svelte 5 (руны $state, $derived, $props). Это позволило реализовать сложное состояние интерактивных игр (позиция курсора в кроссворде, история выбора карточек, таймеры) чисто и прозрачно без сторонних библиотек стейт-менеджмента.
Типобезопасный доступ к данным с Kysely
Все запросы к базе данных типизированы с помощью Kysely. Миграции выполняются на TypeScript, а интеграционные тесты запускают изолированные экземпляры PostgreSQL через Testcontainers.
Оптимизация медиафайлов
При загрузке пользовательских иллюстраций или генерации картинок через ИИ файлы автоматически масштабируются и конвертируются в формат WebP через Sharp.
Полезные ссылки
- Сайт: https://alyonka.app
- Каталог упражнений: https://alyonka.app/exercises
- Записаться на урок / Контакты: https://alyonka.app/#contact