Интерактивное React-приложение с озвучкой, изображениями и тремя форматами упражнений
для регулярной работы со словарным материалом.
Открыть демоверсию · Запустить локально
Образовательный веб-проект · React 19 · 8 категорий · 80 слов · 2026
«Афазия Тренер» — клиентское веб-приложение для регулярной речевой практики. Пользователь выбирает тематическую категорию и последовательно работает со звучанием, написанием и изображением слов.
В проекте реализованы восемь категорий по десять слов. Для каждого слова подготовлены иллюстрация и аудиозапись; при невозможности воспроизвести файл используется системный синтез речи браузера.
Приложение не требует регистрации, не содержит форм и не отправляет данные в прикладной backend. Прогресс отображается только в пределах текущего упражнения и не сохраняется после перезагрузки страницы.
Образовательный проект. Не является медицинским изделием и не заменяет консультацию специалиста.
| Направление | Автор | Выполненная работа |
|---|---|---|
| Речевой материал | Соколова Алина Сергеевна, логопед | Подбор категорий, слов и структуры упражнений для тренировки называния |
| Техническая реализация | Виктор Нагорный | Проектирование интерфейса, разработка логики трёх уровней, адаптивная вёрстка, работа с аудио и визуальной обратной связью |
flowchart LR
A[Выбор категории] --> B[Выбор уровня]
B --> C[Выполнение упражнения]
C --> D[Визуальная обратная связь]
D --> E[Завершение или повтор]
Пользователь прослушивает слово и выбирает соответствующую картинку. Совпавшие пары отмечаются, а счётчик показывает текущий прогресс.
Пользователь выбирает написанное слово, а затем соотносит его с изображением. Для правильных и ошибочных ответов предусмотрены разные визуальные состояния.
Пользователь видит изображение и собирает слово из перемешанного набора букв без звуковой подсказки.
- 8 тематических категорий и 80 слов с иллюстрациями
- Индивидуальная аудиозапись каждого слова
- Резервное воспроизведение через Web Speech API
- 3 режима упражнений с разной механикой
- Перемешивание слов, картинок и букв при повторном прохождении
- Прогресс текущего упражнения и итоговое состояние завершения
- Отдельные состояния правильного и ошибочного ответа
- Адаптивная вёрстка для компьютеров, планшетов и смартфонов
- Поддержка клавиатурного фокуса и понятные доступные имена элементов
- Уважение системной настройки
prefers-reduced-motion
|
|
| Структура тренировки | Выбор режима |
|
|
|
| Звук и изображение | Слово и изображение | Сборка слова |
Мобильный интерфейс перестраивает категории и упражнения в компактную сетку, сохраняет крупные области нажатия и не создаёт горизонтальную прокрутку.
| Технология | Назначение |
|---|---|
| React 19 | Компонентный интерфейс и управление состоянием упражнений |
| JavaScript | Логика сопоставления, перемешивания, прогресса и воспроизведения |
| Vite 8 | Сервер разработки и production-сборка |
| CSS | Адаптивная вёрстка, дизайн-система и состояния интерфейса |
| HTMLMediaElement / Web Speech API | Воспроизведение записей и резервный синтез речи |
| Sharp | Оптимизация изображений и подготовка портфолио-превью |
| ESLint | Статическая проверка исходного кода |
| GitHub Actions | Автоматическая проверка линтера, контента, сборки и зависимостей |
| Vercel | Публикация статического приложения и защитные HTTP-заголовки |
- Скрипт
check:contentпроверяет существование изображений и аудио, уникальность идентификаторов и соответствие всех 80 слов аудиокартам - Content Security Policy ограничивает загрузку скриптов, стилей, изображений и медиа текущим доменом
- Настроены
X-Content-Type-Options,Referrer-PolicyиPermissions-Policy - Dependabot еженедельно проверяет npm-зависимости и GitHub Actions
- CI выполняет установку зависимостей, линтер, проверку контента, production-сборку и
npm audit - Favicon оптимизирован с 1,37 МБ до 62 КБ
aphasia-trainer/
├── .github/ # CI и Dependabot
├── portfolio/screenshots/ # Презентационные изображения проекта
├── public/ # Favicon, Open Graph-обложка и служебные файлы
├── scripts/ # Проверка контента и подготовка изображений
├── src/
│ ├── assets/
│ │ ├── audio/ # Аудиозаписи по категориям
│ │ └── ... # Оптимизированные WebP-иллюстрации
│ ├── App.jsx # Состояния и интерфейс трёх уровней
│ ├── App.css # Адаптивные стили приложения
│ ├── content.js # Категории, слова, картинки и аудиокарты
│ ├── index.css # Глобальные стили
│ └── main.jsx # Точка входа React
├── index.html # Метаданные и HTML-шаблон
├── vercel.json # Защитные HTTP-заголовки
└── package.json # Зависимости и команды проекта
Требования: Node.js 22 и npm.
git clone https://github.com/Viktorussia/speech-trainer.git
cd speech-trainer
npm install
npm run devПосле запуска Vite выведет локальный адрес приложения.
| Команда | Назначение |
|---|---|
npm run dev |
Запустить сервер разработки |
npm run lint |
Проверить исходный код ESLint |
npm run check:content |
Проверить категории, изображения и аудиофайлы |
npm run build |
Создать production-сборку |
npm run preview |
Локально открыть production-сборку |
npm run optimize:images |
Оптимизировать исходные изображения и favicon |
npm run portfolio:assets |
Собрать responsive-превью и Open Graph-обложку из скриншотов |
npm run lint
npm run check:content
npm run buildФинальная версия проверена в браузере на ширинах 1440, 390 и 360 пикселей. Пройдены выбор категории, запуск всех трёх уровней, правильное сопоставление слова и изображения, воспроизведение аудио и сборка слова из букв. Ошибок консоли и горизонтального переполнения не обнаружено.
«Афазия Тренер» — образовательный проект. Он не является медицинским изделием, не заявляет клиническую эффективность и не заменяет работу со специалистом.