Typing Speed Test Project

Solution retrospective
What I feel most proud of honestly is the implementation of the keyboard heatmap that switches to phone layout – that was tricky but so worth it. Also, making those share cards with just Canvas API felt like a real win. The confetti celebrations when you beat your high score just make the whole experience feel complete. I also added a light theme with a toggle button to be able to switch between light and dark theme.
What I'd do differently is that I'd definitely break up the App.jsx file into smaller components, use better state management, add unit tests from start, build core features first then enhance, optimize performance.
What challenges did you encounter, and how did you overcome them?The following are the challenges I encountered: -Making keyboard heatmap responsive for mobile -Scaling text length for different timed durations -Maintaining smooth real-time updates without lag -Creating touch-friendly controls for mobile devices -Personal best detection failing due to floating-point precision and I solved them by:
- Created separate mobile layout with phone-style keyboard arrangement
- Used media queries to switch between desktop and mobile keyboard styles
- Adjusted key sizes and spacing for touch targets
- Added epsilon comparison for floating-point WPM values
- Unified storage keys to eliminate conflicts
- Used raw WPM for comparison, rounded WPM for display
Honestly, I am open to suggestions and insights on any area or aspect of the project that needs improvement.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Egwu Ifeakarochukwu’s solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord