Skip to content
Submitted 4 months ago

Typing Speed Test Project

react, vite
LVL 4
@MhistaFortune
A solution to the Typing speed test challenge

Solution retrospective


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

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
What specific areas of your project would you like help with?

Honestly, I am open to suggestions and insights on any area or aspect of the project that needs improvement.

Code
Loading...

Please log in to post a comment

Log in

Community 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