awtawsif/bangla-typing

A touch-typing learning platform for Bangla Keyboards. # Bangla Typing Tutor > A progressive typing tutor for Bangla (Bengali) — practice with Avro Phonetic or Bijoy layouts across 57 structured lessons, with real-time feedback and progress tracking. --- ## Features - **Two keyboard layouts** — Avro Phonetic and Bijoy, switchable at any time - **57 progressive lessons** across 6 levels — from basic vowels to conjunct consonants and full phrases - **Virtual keyboard overlay** — highlights the next key(s) to press, supports multi-key sequences (e.g., `ch` → `ছ`), and adapts as you type - **Real-time feedback** — colour-coded typing display (correct / incorrect / current), shake animation on mistakes - **Performance charts** — WPM and accuracy trend line + completion doughnut (via Chart.js) - **Persistent progress** — per-layout stats saved to `localStorage` with storage versioning and migration - **Self-assessment onboarding** — choose your experience level to unlock appropriate starting lessons - **Dark mode** — light / dark / system theme - **Responsive** — works on desktop and mobile screens - **Zero runtime dependencies** — no framework, no bundler; plain ES modules --- ## Getting started The app must run over HTTP because it loads lesson data files with `fetch()`. ```bash # 1. Install dependencies (only Tailwind CLI) npm install # 2. Build the CSS (Tailwind v4) npm run build:css # 3. Start the static development server npm run serve # 4. Open in your browser # localhost ``` > There is no HMR or live-reload. Refresh manually after making changes. --- ## Usage ### Keyboard layouts Switch between **Avro Phonetic** (phonetic-based) and **Bijoy** (key-sequence-based) from the header dropdown or the Profile page. Progress is stored separately per layout. | Layout | Hint fields | Example | |--------|-------------|---------| | Avro | `phonetic_char`, `phonetic_words`, `phrases_phonetic` | `a` → `আ`, `ch` → `ছ` | | Bijoy | `char_keys`, `word_keys`, `phrase_keys` | `g+f` → `আ`, `g+:+j` → `ছ …