Interactive, friendly, and privacy-first speech exercises in Russian & Kazakh
Интерактивная и безопасная тренировка правильного произношения звуков «Л», «Р», «Ш»
English • Русский • Quick Start • Architecture
Til Up is a browser-based speech practice app designed for kids. It guides children through engaging, bite-sized pronunciation exercises targeting tricky sounds (Л, Р, and Ш) using bright visual cards, audio hints, interactive mascot reactions, and a motivational star-reward system.
The core gameplay is voice-first: the child selects a target sound, looks at a picture card, and pronounces the word out loud. The game leverages the native browser Web Speech API to recognize spoken words in real time. If speech recognition is unsupported or microphone permissions are unavailable, an instant manual fallback button seamlessly takes over so the fun never stops.
| Feature | Description |
|---|---|
| 🌐 Bilingual Support | Complete Kazakh (KZ) and Russian (RU) interfaces & curated word decks. |
| 🎴 18 Sound Decks | 18 localized practice cards focused on challenging Л, Р, and Ш sounds. |
| 🎙️ Voice-First Engine | Real-time speech recognition via browser native Web Speech API with TTS examples. |
| 🛡️ Zero-Backend Privacy | 100% client-side app. No audio recordings uploaded, no trackers, no servers. |
| 🔄 Smart Fallback | Automatic manual click fallback if microphone access fails or is denied. |
| 📊 Parent Progress | Session history and word counts stored strictly in local localStorage. |
| ♿ Accessible Design | Responsive, full keyboard navigation, and reduced-motion visual support. |
| 🚀 SEO & OpenGraph | Meta tags, canonical URLs, hreflang, structured JSON-LD, and social previews. |
flowchart LR
A[🎯 Select Sound L / R / Sh] --> B[🎙️ Allow Mic Access]
B --> C[🖼️ Look at Picture Card]
C --> D[🗣️ Pronounce Word]
D -- Recognized --> E[⭐ Earn Star & Next Card]
D -- Mic Issues / Denied --> F[👇 Manual Fallback Click]
F --> E
E -- 5 Stars --> G[🎉 Round Complete & Local Stats]
Note
Pedagogical & Clinical Note: Til Up verifies recognized words for repetition practice; it does not analyze phonetic articulation quality or perform medical diagnostics. It is meant for enjoyable home practice and is not a substitute for professional speech-language therapy.
- No Remote Servers: Audio data is never sent to any custom backend server.
- Local Storage Only: Practice history and star counts stay strictly inside
localStorage. - Browser Standard API: Speech recognition runs through the browser's implementation of
SpeechRecognition. - On-Demand Access: Microphone access is requested only when an exercise active session begins.
Til Up — это яркая и добрая браузерная игра для развития речи у детей. Она помогает ребёнку отрабатывать правильное произношение наиболее частых «трудных» звуков (Л, Р и Ш) через короткие игровые упражнения с красочными карточками, озвучкой, реакциями живого маскота и звёздными наградами.
Игра построена на голосовом взаимодействии: ребёнок выбирает звук, видит карточку со словом и произносит его вслух. Приложение использует встроенный в браузер Web Speech API для распознавания речи в реальном времени. Если микрофон недоступен или браузер не поддерживает распознавание, автоматически включается ручной режим (fallback), благодаря которому ребёнок может продолжить игру без препятствий.
- 🇰🇿 🇷🇺 Два языка: Полноценный интерфейс и наборы слов на казахском и русском языках.
- 🎴 18 красочных карточек: Локализованный набор для закрепления звуков «Л», «Р» и «Ш».
- 🗣️ Распознавание речи: Озвучивание примеров и проверка произнесённого слова средствами браузера.
- 🛡️ 100% Конфиденциальность: Без бэкенда, без записи звука, без передачи личных данных.
- 🔄 Умная страховка (Fallback): Игра не блокируется при отсутствии микрофона — включается кнопка подтверждения.
- 📈 Статистика для родителей: Учёт занятий и повторённых слов сохраняется только в браузере.
- ♿ Доступность и комфорт: Поддержка управления с клавиатуры, адаптивность и режим
reduced-motion. - 🔍 SEO & Метаданные: Полная подготовка
OpenGraph,JSON-LD,hreflangи канонических ссылок.
- Выбор звука: Выберите один из тренируемых звуков (Л, Р или Ш).
- Разрешение микрофона: Нажмите «Начать» и разрешите доступ к микрофону.
- Произношение: Назовите предмет, изображённый на карточке.
- Сбор звёзд: Соберите 5 звёзд, чтобы успешно завершить сессию.
- Прогресс: Просматривайте динамику упражнений в локальной панели статистики.
Important
Информация для родителей: Til Up распознаёт совпадение названий картинок для поддержания интереса к тренировке, но не является диагностическим или логопедическим медицинским прибором. Приложение создано для домашней практики и не заменяет индивидуальные занятия с логопедом.
| Technology | Purpose / Описание |
|---|---|
 |
Progressive framework using Composition API & Script Setup |
 |
Strictly typed state management and speech engine interfaces |
 |
Next-generation frontend build tooling & HMR dev server |
 |
Utility-first CSS frame with responsive & dark/light styling |
 |
Reactive browser utilities collection |
 |
Universal document head & SEO metadata manager |
 |
Native SpeechRecognition & SpeechSynthesis browser engine |
- Node.js:
v18.xor higher (LTS recommended) - npm:
v9.xor higher
git clone https://github.com/serik-k/til-up.git
cd til-up
npm install
npm run devOpen your browser at
http://localhost:5173(or the Vite dev URL displayed in terminal).
# Type check
npm run type-check
# Type check + production build (same command used by CI)
npm run check
# Production build
npm run build
# Local preview
npm run previewEvery pull request targeting main runs the same type-check + production build pipeline in GitHub Actions.
til-up/
├── 📁 public/
│ ├── 📁 images/speech-cards/ # 🖼️ Sound card artwork & assets
│ └── 📄 robots.txt # 🤖 Search engine crawlers config
├── 📁 src/
│ ├── 📁 app/ # 🚀 Application shell & main view setup
│ ├── 📁 assets/ # 🎨 Static styles & global graphics
│ ├── 📁 components/ # 🧩 Game UI and mascot components
│ ├── 📁 composables/ # 🎙️ Speech recognition & synthesis lifecycle hooks
│ ├── 📁 locales/ # 🌍 Multilingual strings (RU / KZ)
│ ├── 📁 styles/ # 💅 Tailwind & custom CSS utility styles
│ ├── 📁 types/ # 📐 TypeScript definitions & interfaces
│ └── 📄 content.ts # 🎴 Russian & Kazakh speech card decks data
├── 📄 index.html # 📄 Entry point HTML with SEO metadata
├── 📄 vite.config.js # ⚡ Vite build configuration
├── 📄 tailwind.config.js # 🎨 Tailwind CSS design system theme
└── 📄 package.json # 📦 Dependencies & npm scripts
Contributions are welcome! If you'd like to improve Til Up:
- Fork the project repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Run
npm run checkto verify type safety and the production build. - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
Tip
Note on new content: Any new speech cards or therapeutic word additions should be verified by native speakers and, ideally, reviewed by a certified speech-language pathologist.
Private repository / All rights reserved. License decision pending.
Все права защищены. Публичный доступ к коду не означает свободу повторного использования без разрешения правообладателя.