A mobile-first, installable, offline-capable Progressive Web App that teaches new drivers how to drive a manual (stick-shift) car in India — from sitting in the seat to passing a final driving test. Built with plain Vanilla JS + Vite (no UI framework), so the whole app is tiny (~24 KB gzipped) and fast on low-end phones.
24 levels across 8 segments, each getting harder, with progress saved in the browser. A level must be passed to unlock the next.
| Segment | Focus |
|---|---|
| 🚘 Know Your Car | Cockpit drill, A-B-C pedals, 5-speed H-gate, dashboard lights |
| ⚙️ Engine & Clutch | Starting, finding the bite point, clutch control |
| 🚦 Move Off & Stop | Pulling away, smooth braking, handbrake |
| 🔀 Gears | Upshifting, downshifting, engine braking |
| ↩️ Maneuvers | Turns (Mirror-Signal-Maneuver), reversing, parking |
| ⛰️ Tricky Clutch | Hill starts, stop-and-go traffic, narrow lanes |
| 🚸 Indian Road Rules | Traffic signs, right of way, overtaking on the right, DL/RC/Insurance/PUC |
| 🏁 Real-World & Final Test | Hazard perception, night/rain, final assessment |
Each level flows: lesson cards (dos & don'ts) → interactive practice → quiz/sign check → stars (1–3).
The core realism is a physics-based clutch/gear model (src/sim/engine.js):
- ABC pedals + H-pattern gearbox, RPM/speed dashboard.
- Dump the clutch with no gas → the engine stalls, just like real life.
- Feather the clutch to the bite + a little gas → you pull away smoothly.
- Hill levels add gravity → roll back if you release the handbrake too early.
The model is pure and unit-tested (src/sim/engine.test.js).
Left-hand-drive car, drive on the left, overtake on the right, Indian road signs, handbrake hill starts, RTO document rules (DL, RC, Insurance, PUC).
npm install
npm run dev # local dev server
npm test # run the engine physics unit tests
npm run build # production build + service worker (offline)
npm run preview # serve the production buildOpen on a phone (or device emulation), and Add to Home Screen to install.
Progress is stored locally via localStorage and works fully offline.
- Vanilla JS + Vite, hash router, no framework.
- vite-plugin-pwa (Workbox) for the installable, offline service worker.
- Vitest for the simulator model tests.
- WebAudio engine sound + Vibration API haptics (both toggleable).
⚠️ This app builds understanding and control muscle-memory. It is not a substitute for lessons with a licensed instructor in a real car.