Bengali-English Typing Application
Bilingual (বাংলা & English) Typing Speed, Accuracy & Grapheme Benchmark Web App
An interactive dual-language (Bengali and English) typing speed and precision web application featuring real-time WPM calculation, Unicode grapheme handling, and instant error feedback.
Project Overview
The Bengali-English Typing Application is a browser-based utility built to help students, professionals, and bilingual typists measure and improve their typing speed (WPM) and character-level accuracy across both Bengali (বাংলা) and English scripts.
Business Context
Many typing benchmark tools are built exclusively for ASCII/Latin characters and break when users type complex Indic scripts like Bengali, where compound characters (যুক্তবর্ণ) and vowel diacritics (কার) combine multiple Unicode code points into a single visual unit.
Problem Statement
Bilingual typists in Bangladesh needed a fast, distraction-free web application that accurately evaluates both English and Bengali Unicode input in real time without lag, false character mismatches, or cluttered interfaces.
Project Objectives
- Support seamless switching between Bengali and English typing passages and timer durations.
- Calculate gross WPM, net WPM, and accuracy percentage in real time on every keystroke without UI frame drops.
- Handle Unicode normalization and multi-codepoint Bengali characters accurately during character-by-character comparison.
- Provide clear visual highlighting for active, correct, and mistyped characters alongside post-session performance breakdowns.
My Contribution
I built the complete application including the bilingual passage engine, Unicode-aware input comparison logic, real-time timer state machine, WPM/accuracy metrics calculator, and responsive Tailwind CSS interface.
Technical Architecture
Built as a client-interactive Next.js application using React state hooks and `requestAnimationFrame`/interval timing synchronization. Input normalization ensures consistent comparison across browser IME (Input Method Editor) composition events for Bengali keyboards (such as Avro and Bijoy Unicode) as well as standard English layouts.
Technology Stack
Key Features Built
Dual-Language (বাংলা & English) Passage Engine
Instant toggle between curated Bengali and English typing prompts with customizable test durations.
Unicode-Aware Character & Diacritic Matching
Normalized string comparison that properly evaluates Bengali vowel signs and conjunct consonants during live typing.
Real-Time WPM, CPM & Accuracy Telemetry
Live calculation of net words per minute, raw speed, error count, and accuracy percentage with zero input lag.
Keyboard-First Accessible Interface
Quick restart shortcuts, clear focus indicators, and responsive typography scaled for comfortable reading in both scripts.
Engineering Challenges
- Standard JavaScript `string.length` and index splitting break Bengali characters into isolated code points, causing visual jitter and inaccurate error highlighting while typing.
- Preventing unnecessary React re-renders of hundreds of character spans on every keystroke during high-speed typing.
- Handling IME composition states consistently across desktop and mobile browsers.
Solutions Implemented
- Used Unicode NFC normalization and grapheme-aware segmentation so each rendered character cell corresponds to a valid script unit.
- Memoized passage token rendering and scoped state updates so active cursor movement remains smooth even in long passages.
- Designed clear visual states for current cursor position, completed words, and character-level corrections.
Screenshots & Interface Highlights
Architecture & interface modulesBilingual Typing Workspace (বাংলা & English)
Distraction-free typing benchmark interface with live WPM, timer, and accuracy telemetry.
Additional Cloudinary proof screenshots can be attached via the Admin Project Images panel.
Real-Time Error Highlighting & Session Summary
Character-by-character visual feedback and post-test breakdown of net speed and precision.
Additional Cloudinary proof screenshots can be attached via the Admin Project Images panel.
Lessons Learned
- Building tools for Bengali and multilingual users requires testing real IME composition workflows and Unicode normalization early in development.
- Keeping interactive utility apps lightweight and keyboard-accessible creates a noticeably smoother user experience.
Project reviews
...Planning a Similar Project?
Share your requirements, timeline, and technical goals—no account registration required to send an inquiry.