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.
- 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
localStoragewith 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
The app must run over HTTP because it loads lesson data files with fetch().
# 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
# http://localhost:4173There is no HMR or live-reload. Refresh manually after making changes.
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 → ছ |
There are 57 lessons (indices 0–56) grouped into 6 levels:
| Level | Title | Lessons |
|---|---|---|
| 1 | মৌলিক অক্ষর (Basic letters) | 6 |
| 2 | টপ রো ও বিশেষ স্বরবর্ণ (Top row & special vowels) | 9 |
| 3 | বিশেষ চিহ্ন ও সংখ্যা (Symbols & numbers) | 6 |
| 4 | যুক্তাক্ষর - ক থেকে ন (Conjuncts — K to N) | 19 |
| 5 | যুক্তাক্ষর - প থেকে হ (Conjuncts — P to H) | 11 |
| 6 | ব্যবহারিক অনুশীলন (Practical practice) | 6 |
Each lesson contains individual characters, words, and full phrases — all aligned across both keyboard layouts.
When hints are enabled, a QWERTY overlay appears below the lesson content:
- Active key (filled blue) — the next key to press
- Pending key (blue outline) — subsequent key(s) in a multi-key sequence
- Dimmed key — not used in any lesson completed so far
- Space highlighted — the next character in a phrase is a space
- Enter highlighted — the word/phrase is complete, press Enter to advance
| Command | Description |
|---|---|
npm run build:css |
Build src/css/style.css → src/css/tailwind_style.css (minified) |
npm run watch:css |
Watch mode for CSS rebuild |
npm run serve |
Start static HTTP server on localhost:4173 |
npm run validate:data |
Check syllabus + hint JSON alignment |
npm test |
Run automated tests (node:test) |
npm run check |
validate:data + test in sequence |
bangla-typing/
├── index.html # App entrypoint
├── data/
│ ├── syllabus.json # 57 lesson definitions (characters, words, phrases)
│ ├── avro_hint.json # Avro Phonetic keyboard hints & key mappings
│ └── bijoy_hint.json # Bijoy keyboard hints & key mappings
├── src/
│ ├── css/
│ │ └── style.css # Tailwind v4 + custom theme (edit this)
│ ├── js/
│ │ ├── main.js # DOMContentLoaded → boot app
│ │ ├── app.js # BanglaTypingApp — main controller
│ │ ├── config.js # Constants, levels, supported layouts
│ │ ├── storage.js # localStorage persistence (prefs + progress)
│ │ ├── data-loader.js # fetch() + validate curriculum data
│ │ ├── data-contract.js # Cross-layout alignment checks
│ │ ├── lesson-engine.js # Session builder, incremental stats, metrics
│ │ ├── virtual-keyboard.js# QWERTY overlay with key highlighting
│ │ ├── charts.js # Chart.js renderer (WPM + completion)
│ │ └── utils.js # Number conversion, text normalization
├── scripts/
│ ├── serve.mjs # Static file server (no deps)
│ └── validate-data.mjs # CLI data validation wrapper
└── tests/
├── data-contract.test.mjs # Curriculum alignment tests
└── lesson-engine.test.mjs # Stats & metrics tests
The app is a vanilla JavaScript single-page application with no framework. ES modules are loaded natively in the browser.
index.html
└─ src/js/main.js
└─ BanglaTypingApp (app.js)
├─ config.js — constants, levels
├─ data-loader.js — fetch + validate 3 JSON files
├─ lesson-engine.js — build sessions, calculate stats
├─ storage.js — localStorage (preferences & progress)
├─ virtual-keyboard.js— QWERTY key-highlight DOM builder
├─ charts.js — Chart.js wrappers
└─ utils.js — helpers
Data flows in one direction: JSON files are loaded at startup, validated, and held in memory for the session. User interactions update state, which triggers re-renders of the typing display and virtual keyboard. Progress is persisted to localStorage with versioning (STORAGE_VERSION = 2) to handle schema migrations.
- Edit the relevant entries in
data/syllabus.json(characters, words, phrases) - Add corresponding hint entries in
data/avro_hint.jsonanddata/bijoy_hint.json - Update
keyboard_mapentries if new characters were introduced - Run
npm run validate:datato verify alignment
The validation enforces that hint arrays match lesson item arrays exactly. Anytime lesson content changes, hints must be updated in lockstep.
| Technology | Role |
|---|---|
| Vanilla JS (ES modules) | Application logic |
| Tailwind CSS v4 | Utility-first CSS via CLI |
| Chart.js 4.4.3 | WPM & completion charts (CDN) |
Node.js node:test |
Test runner |
| Simple static server | Local development (no build step for JS) |