Case study
AuraType
AuraType is a quiet bilingual Vietnamese–English typing studio running directly in the browser, backed by local IndexedDB persistence (Dexie) and optional server-side Gemini AI passage generation.
Screenshots
Problem & Motivation
Most typing platforms focus solely on English or treat Vietnamese Telex/VNI input as raw single keystrokes, breaking caret alignment during IME composition and allowing paste or autofill to skew accuracy.
Solution
Built a Unicode NFC grapheme-aware typing engine paired with a beforeinput adapter that blocks paste, drop, and autofill without interrupting Telex/VNI IME composition, recording timestamped actions for Ghost replay and faithful WPM/Accuracy metrics.
Core features
Grapheme-Aware Telex / VNI Input
Normalizes text to Unicode NFC and segments graphemes so Vietnamese diacritics match accurately throughout active IME composition.
Ghost Replay & Target WPM
Race against your best eligible local replay on the exact same passage and rule set, or practice against a steady 30–120 WPM ghost.
Server-Only Gemini AI Passage Generation
Next.js API route using @google/genai with Upstash Redis atomic leases for per-IP cooldowns (30–60s), hourly/daily quotas, and a 24-hour shared passage pool.
Local IndexedDB Storage & Journey Panel
Settings, practice history, and personal records stay local in IndexedDB via Dexie with JSON export/backup and a JourneyPanel summary view.
Tech stack
- Next.js
- TypeScript
- Zustand
- Dexie
- Gemini AI
- Upstash Redis
Architecture
Engine Layer (engine/typingEngine.ts, inputAdapter.ts, replayEngine.ts)
Evaluates grapheme states, blocks non-IME multi-character insertions in beforeinput, and drives timeline-accurate Ghost playback.
State & Local Persistence (Zustand + Dexie)
Handles real-time typing session state in Zustand and persists history, custom passages, and replays locally in IndexedDB without accounts.
AI Generation API (app/api/generate, services/geminiProvider.ts)
Server-side Gemini integration with healthy-key rotation, bounded timeouts, no retry storms on 429s, and Redis-backed passage caching.
Technical challenges
Supporting Vietnamese IME Composition Without Losing Accuracy Guarantees
Telex and VNI emit multi-step composition updates before committing a character. Separating composition events from clipboard/autofill insertions in evaluateBeforeInput preserves natural Vietnamese typing while keeping metrics honest.
Protecting Public AI Endpoints From Quota Exhaustion
Atomic Redis reservations enforce IP cooldowns and active execution leases while serving cached validated passages whenever possible to avoid unnecessary Gemini calls.
Lessons learned
- Core typing, custom text, and Ghost replay work immediately with zero backend dependencies; AI generation enhances the studio gracefully when configured.
- Handling Vietnamese text accurately requires grapheme segmentation and IME composition testing rather than naive UTF-16 string indexing.
Current deployment scope
Deployed live at auratype.duckdns.org with built-in passages, custom text (150–1,400 chars), Ghost replay, and server-side AI generation when configured. No public leaderboard or cloud account system is claimed — data stays in the user's browser.