Кейс · Веб-приложение

typing-lab: тренажёр слепой печати

Тренажёр слепой печати, который целиком работает в браузере и не обращается к серверу: Nuxt 4, история в IndexedDB, звук клавиш на WebAudio, офлайн через PWA. Режимы времени, слов, цитат, своего текста, кода и «слабых мест», шесть раскладок, метрики WPM, точность и консистентность, графики на чистом SVG. Пет-проект.

  • Nuxt 4
  • Vue 3
  • TypeScript
  • IndexedDB
  • WebAudio
  • PWA
  • SVG
  • vitest
  • axe
  • Cloudflare Pages
Открыть живой сайт ewsirdev-typing.pages.devКод по запросу в Telegram

01 · Как выглядит

Скриншоты

Скриншот проекта «typing-lab: тренажёр слепой печати» на экране 1280 пикселей
Десктоп, 1280 px
Скриншот проекта «typing-lab: тренажёр слепой печати» на экране телефона, 390 пикселей
Телефон, 390 px

02 · О проекте

Что это и зачем

typing-lab — тренажёр слепой печати на Nuxt 4: ни аккаунта, ни аналитики, ни запросов наружу, вся история лежит в IndexedDB на устройстве. Пет-проект.

Движок (набор, метрики, раскладки, генератор текстов) написан на чистом TypeScript без DOM и покрыт тестами отдельно от интерфейса. Рейтингов и таблиц лидеров нет намеренно: без сервера честно проверить чужой результат нельзя.

Ограничения

Не проверены реальные Safari и Firefox, реальные телефоны и экранные клавиатуры, японский и китайский IME (композиция проверена юнит-тестами и командой CDP в Chromium) и скринридеры вручную.

Dvorak, Colemak, Workman и фонетическая раскладка это подсказка на экране: печатать нужно на раскладке, включённой в системе. Фонетическая схема собственная. Русские тексты без ё, пунктуация приведена к ASCII.

Нет серверной части: нет рейтингов, подтверждения результатов и синхронизации между устройствами, только ручной экспорт и импорт. Скорости нельзя напрямую сравнивать с другими тренажёрами.

Lighthouse не запускался, замеры сняты собственным CDP-скриптом. npm audit показывает 7 high из одной цепочки dev-сервера Nuxt: в итоговый сайт она не попадает.

Что внутри

  • Режимы: время (15/30/60 с), слова, цитаты, свой текст, код (JavaScript, Python, Go) и «слабые места» с адаптивными упражнениями из ваших ошибок
  • Раскладки: ЙЦУКЕН, фонетическая, QWERTY, Dvorak, Colemak, Workman; клавиатура на SVG с подсказкой следующей клавиши и пальца
  • Метрики: WPM, сырой WPM, CPM, точность, консистентность, ошибки по клавишам; графики на чистом SVG с табличной альтернативой для скринридеров
  • История до 5000 результатов, цели, серии дней, 12 достижений, призрак с лучшим результатом; экспорт и импорт JSON со строгой проверкой
  • Звук клавиш на WebAudio (выключен по умолчанию), тёмная и светлая темы, режим без отвлечений, горячие клавиши, PWA с работой офлайн
  • 59 unit-тестов (vitest и fast-check) и 65 e2e-проверок по CDP; axe: 0 нарушений на всех страницах в 390 и 1280 px; CLS 0,000
  • Выложено на Cloudflare Pages прямой загрузкой статической сборки

03 · Как запустить

Запуск одной командой

git clone <репозиторий по запросу> typing-lab
cd typing-lab
npm install
npm run dev

04 · Код

Репозиторий приватный

Исходники лежат в приватном репозитории. Напишите в Telegram, открою доступ.

Запросить код