«Букварик» — бесплатная браузерная игра для детей 5–7 лет, которая помогает знакомиться с русскими буквами, учиться писать и печатать. Ребёнка сопровождает лисёнок Тимка: он объясняет задания, подсказывает и поддерживает после ошибок.
Играть онлайн: bukvarik.artemslizhik.com
Проект работает без регистрации, рекламы и аналитики. Прогресс хранится только в localStorage браузера и никуда не отправляется.
| Раздел | Что делает ребёнок |
|---|---|
Занятие с Тимкой (/play) |
Проходит короткий маршрут: повторение → новая буква → выбор → обводка → клавиатура → слово. Любое задание можно пропустить, а незавершённое занятие сохраняется |
Учимся писать (/writing) |
Обводит 33 буквы и 10 цифр пальцем или мышкой по правильной траектории |
Буквы на клавишах (/keyboard) |
Находит буквы и цифры на физической или экранной клавиатуре, постепенно открывая новые уровни |
Печатаем слова (/words) |
Набирает слова по картинкам — от коротких к более длинным |
Мои награды (/progress) |
Собирает звёзды и наклейки, видит освоенные буквы и может менять настройки для взрослых |
Буквы в занятиях перемешиваются по умолчанию, чтобы ребёнок узнавал их, а не запоминал порядок алфавита. В настройках можно вернуть алфавитную последовательность.
- крупные элементы управления и цели нажатия для дошкольников;
- полноценная работа на планшетах, мышью и с физической клавиатурой;
- защита от случайного выделения текста и конфликтов жестов при обводке;
- независимость от системной раскладки: клавиши распознаются по
event.code; - мягкая реакция на ошибку без наказания и потери прогресса;
- поддержка
prefers-reduced-motion; - системный синтез речи как запасной вариант, если готовой записи нет.
Нужен Node.js 22+.
git clone https://github.com/snowtema/bukvarik.git
cd bukvarik
npm ci
npm run devПриложение откроется на http://localhost:3000.
Проверки перед pull request:
npm run lint
npm run buildСтек: Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4. Бэкенд не нужен.
Игра сначала ищет готовую запись в public/audio/, а при её отсутствии использует синтез речи браузера. Чтобы сгенерировать записи своим ключом:
cp .env.example .env.local
# заполните ELEVENLABS_API_KEY или OPENAI_API_KEY в .env.local
npm run voice.env.local игнорируется Git и не должен попадать в коммиты. Готовые записи в репозитории созданы с помощью ElevenLabs и имеют отдельные условия использования — см. ASSETS.md.
Push в main запускает .github/workflows/deploy.yml: установка зависимостей, lint, статическая production-сборка и деплой в Cloudflare Workers.
Для GitHub Actions нужны два repository secret:
CLOUDFLARE_API_TOKEN— токен с официальным профилемEdit Cloudflare Workers;CLOUDFLARE_ACCOUNT_ID— идентификатор аккаунта Cloudflare.
Значения секретов не хранятся в репозитории или его истории.
Нашли баг или придумали полезную функцию? Создайте Issue: для ошибок есть форма bug report, для идей — feature request. Особенно полезны предложения от родителей, педагогов и специалистов, работающих с детьми 4–7 лет.
Pull requests тоже приветствуются. Перед началом прочитайте CONTRIBUTING.md. Уязвимости нужно отправлять приватно по инструкции из SECURITY.md, а не публиковать в обычном Issue.
Исходный код и документация распространяются по лицензии MIT.
Готовые файлы озвучки в public/audio/ не входят в лицензию MIT. Для них действуют отдельные условия, описанные в ASSETS.md.