AWS Logo
Menu
Building a Typing Speed Trainer in React (and with the help of Amazon Q)

Building a Typing Speed Trainer in React (and with the help of Amazon Q)

In this post, I’ll share how I developed a React-based typing speed trainer game with the assistance of Amazon Q, an AI-powered code generation tool. We’ll dive into the project’s concept, the coding process, and how Amazon Q helped streamline the development, turning a basic idea into an interactive, timed typing challenge.

game-challenge
Amrutesh Arun
Published Dec 19, 2024
Link to the game
When I set out to create a typing speed trainer, my goal was clear: build a simple, interactive application that would help users practice keystrokes under the pressure of a ticking clock. Yet, like many developers, I sometimes feel bogged down by repetitive boilerplate code and setup work before I can reach the fun, creative parts of the project.
That’s where Amazon Q stepped in. Amazon Q is an AI-assisted coding tool that helps with code generation, refactoring, and scaffolding. Think of it as a helpful coding partner who takes care of the less glamorous tasks, leaving you free to focus on design, logic, and user experience. In this blog post, I’ll walk through how I created a fully functional typing speed trainer in React—with a boost from Amazon Q.
Game UI
Game UI

The Concept

The game’s premise is straightforward:
  • A random enabled key is highlighted on a visual keyboard.
  • The player has 60 seconds to correctly press as many highlighted keys as possible.
  • Each correct press yields points and builds a streak, while an incorrect press resets the streak and is noted as a miss.
  • At the end of the round, the user sees their final score, streak, and accuracy percentage.
I began with a keyboardCharacters.tsx file that defined the keyboard rows, keys, and their properties (like disabledstates and widths for layout). By isolating this data, I kept the main game logic lean and flexible. If I want to add or remove keys later, I only need to modify this one file.
Using Amazon Q, I generated a snippet to quickly flatten the keyboard structure, filter out disabled keys, and create a function getRandomEnabledKey() to return a random target key. This automation freed me to think about the user experience instead of manual indexing and filtering.
Amazon Q generating the code
Amazon Q generating the large array of objects, saving my time from manually inserting them

Implementing the Main Game Logic

In App.tsx, I set up React state hooks to handle key game aspects:
  • State Management:
    • score, streak, wrongCount to keep tabs on performance.
    • randomKey to store the currently active target key.
    • timeline to visually represent a recent history of correct (y) and incorrect (n) attempts.
  • Timer:
    A 60-second countdown challenges the player to type correctly and swiftly. I used requestAnimationFrame for smoother updates. With Amazon Q suggesting patterns for interval-like updates using React’s hooks, I seamlessly integrated the timer logic.
  • Key Events:
    keydown events determine if the user’s typed character matches the randomKey. Amazon Q’s quick code suggestions helped me structure the event listener cleanly. On correct input, the score and streak rise, the timeline records a “y,” and a new random key is selected. On incorrect input, the streak resets, wrongCount increments, and the timeline logs an “n.”
  • Visual Feedback & UI Layout:
    The UI displays:
    • The timer at the top.
    • A visually rendered keyboard (each key sized and positioned according to keyboardCharacters.tsx). But I forgot how to display the keyboard characters in upper case. Well Amazon Q came in handy again! This time it was the chat feature provided by Amazon Q.
      Amazon Q Chat Feature
      Amazon Q Chat Feature
    • Real-time metrics (score, streak, accuracy) on the side.
    • A green or red glow effect to provide immediate feedback on each attempt.
While I could have written the entire UI logic by hand, Amazon Q made it simpler to get started. With a few AI-generated JSX structures in place, I quickly fine-tuned the layout, styling, and class names to achieve the exact look and feel I wanted.

Lessons Learned and Future Enhancements

  • Streamlined Development: Amazon Q reduced the initial coding overhead, making the project more enjoyable.
  • Improved Code Organization: By separating logic into distinct files and states, maintaining and updating the code is straightforward.
  • Flexibility for Growth: I can easily tweak the enabled keys, adjust the timing, or incorporate leaderboards and user-defined key sets in the future.
What’s next? Possibly adding difficulty modes, logging high scores, or allowing players to choose which keys they practice. Thanks to the solid foundation, these enhancements would be straightforward.

Conclusion

By leveraging Amazon Q’s AI-driven capabilities, I turned a simple game concept into a polished, interactive React-based typing trainer in less time than I expected. Amazon Q didn’t just help me write code—it helped me think through the best patterns, keep my focus on user experience, and create a versatile tool that I can continue to improve over time.
If you’ve ever hesitated to start a project because the setup seemed daunting, consider giving an AI coding assistant a try. With Amazon Q by my side, what began as a quick idea evolved into a fun, functional typing trainer that’s ready to help others improve their typing speed and accuracy.
 

Comments