Pixel-Perfect Typing Speed Test with Sound & Mobile Optimization

What are you most proud of, and what would you do differently next time?

I am most proud of the custom Sound Engine and Auto-Scroll features. I wanted the app to feel like a game, so I used the HTML5 Audio API to add satisfying mechanical clicks and victory chimes without causing input lag. I also built a custom useTypingEngine hook to separate the complex game logic from the UI.

Next time, I would implement a proper backend (like Django REST Framework) to create a Global Leaderboard so users can compete against each other, rather than just storing history in LocalStorage.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was Mobile Optimization. Initially, mobile keyboards would try to "autocorrect" user input (changing "teh" to "the"), which broke the accuracy calculation.

I overcame this by implementing aggressive Input Guarding on the hidden input field (autoCorrect="off", autoCapitalize="off", spellCheck="false"). I also had to use React Refs to mathematically calculate the scroll offset for the "Passage Mode" to ensure the active line always stays centered on small screens.

What specific areas of your project would you like help with?

I would love feedback on Accessibility (a11y). Since the text changes color dynamically as you type, I want to ensure screen readers can still follow along effectively. Any tips on using aria-live regions for real-time speed tests would be appreciated!