Case · Web app

typing-lab: a touch-typing trainer

A touch-typing trainer that runs entirely in the browser and makes no server requests: Nuxt 4, history in IndexedDB, key sounds on WebAudio, offline through a PWA. Time, words, quotes, custom text, code and "weak spots" modes, six layouts, WPM, accuracy and consistency metrics, charts in plain SVG. A side project.

  • Nuxt 4
  • Vue 3
  • TypeScript
  • IndexedDB
  • WebAudio
  • PWA
  • SVG
  • vitest
  • axe
  • Cloudflare Pages
Open the live site ewsirdev-typing.pages.devCode on request via Telegram

01 · How it looks

Screenshots

Screenshot of the project "typing-lab: a touch-typing trainer" at 1280 pixels wide
Desktop, 1280 px
Screenshot of the project "typing-lab: a touch-typing trainer" on a phone screen, 390 pixels wide
Phone, 390 px

02 · About

What it is and why

typing-lab is a touch-typing trainer on Nuxt 4: no account, no analytics, no outgoing requests, the whole history sits in IndexedDB on the device. A side project.

The engine (typing, metrics, layouts, text generator) is plain TypeScript without the DOM and is tested separately from the interface. There are no rankings or leaderboards on purpose: without a server you cannot honestly verify someone else's result.

Limitations

Not checked: real Safari and Firefox, real phones and on-screen keyboards, Japanese and Chinese IMEs (composition is covered by unit tests and a CDP command in Chromium) and screen readers by hand.

Dvorak, Colemak, Workman and the phonetic layout are an on-screen hint: you have to type on the layout enabled in the system. The phonetic scheme is custom. Russian texts have no yo, punctuation is reduced to ASCII.

There is no server side: no rankings, no result verification and no sync between devices, only manual export and import. The speeds cannot be compared directly with other trainers.

Lighthouse was not run, the measurements come from a custom CDP script. npm audit shows 7 high from one chain of the Nuxt dev server: it does not reach the final site.

What is inside

  • Modes: time (15/30/60 s), words, quotes, custom text, code (JavaScript, Python, Go) and "weak spots" with adaptive drills built from your mistakes
  • Layouts: JCUKEN, phonetic, QWERTY, Dvorak, Colemak, Workman; an SVG keyboard that hints the next key and finger
  • Metrics: WPM, raw WPM, CPM, accuracy, consistency, errors per key; charts in plain SVG with a table alternative for screen readers
  • History of up to 5000 results, goals, day streaks, 12 achievements, a ghost with your best result; JSON export and import with strict validation
  • Key sounds on WebAudio (off by default), dark and light themes, a distraction-free mode, hotkeys, a PWA that works offline
  • 59 unit tests (vitest and fast-check) and 65 e2e checks over CDP; axe: 0 violations on all pages at 390 and 1280 px; CLS 0.000
  • Deployed to Cloudflare Pages by direct upload of the static build

03 · How to run

Run it locally

git clone <repository on request> typing-lab
cd typing-lab
npm install
npm run dev

04 · Code

The repository is private

The source is in a private repository. Message me on Telegram and I will open access.

Request the code