Sprite Type

The Inspiration

Sprite Type was inspired by our love for simple, cozy experiences and our desire to build a game that wasn’t just about speed, but about creating a pleasant atmosphere. While most typing games focus on competition, we thought, "What if we could create one that’s more peaceful?" And that’s how this project came to life!

What We Learned Along the Way

Throughout development, we had the opportunity to experiment with a variety of new tools. One of the most valuable lessons (for those of us new to it!) was learning how to collaborate effectively on Git–everything from git add, commit, and push, to handling tricky merges.

Additionally, experimenting with React and Next.js was another key learning moment, as most of us were quite new to them. We gained experience in managing states, handling dynamic changes within components, and more. We also learned how to store and retrieve data using MongoDB to set up a database of fun words.

Furthermore, we worked to improve our design skills in order to create responsive and visually appealing layouts. By learning more about component placement and styling with CSS, we experimented with flexbox, grid layouts, and custom CSS color classes to create the atmosphere we wanted. We were excited to see our ideas come to life on the page.

Aside from the tools and technologies we worked with, we also learned how to better manage our workflow. Defining a clear vision, organizing tasks, delegating responsibilities, and setting priorities were all essential to keeping the project moving forward toward our goal.

Making It Happen

Bringing our vision to life involved a mix of planning, coding, and design experimentation. The first step we took was deciding on our tech stack. We selected React and Next.js for component-based architecture and server-side rendering, which made handling real-time user input more efficient and allowed us to create a dynamic experience.

On the design side, we started with the page layout and later fine-tuned the user interface to make the game both intuitive and engaging. We wanted the design to be visually appealing and approachable, so we spent time experimenting with layouts, responsiveness, and navigation. Once the main components—such as the typing area, timer, replay button, and character selectors—were in place, we focused on adding functionality step by step.

We aimed to create a smooth typing experience by building features that worked well together. To start, we developed a custom hook in JavaScript that generates a fresh set of random words based so that each session feels unique. Another core feature is the real-time words-per-minute tracker, instantly calculating the player’s WPM as they type. We also focused on real-time input validation, where each letter typed is checked against the target words, giving immediate feedback by highlighting correct letters in green and mistakes in red.

Throughout the process, we kept track of progress and to-do lists on a shared Notion page, regularly checking in with each other in person. The collaboration and constant support from each team member were truly key in making it happen.

Roadblocks & Challenges

As a team of relatively new hackers (this being our first or second hackathons!), we faced several challenges that taught us a lot along the way.

One of our biggest hurdles was not being able to implement a key feature we had planned: a second character to track the user’s progress against their target WPM. We envisioned this character moving at the rate of the user’s target speed, providing a fun visual comparison of current speed versus goal speed. However, due to time constraints, we didn’t manage to complete it in time. This is something we plan to prioritize in future projects.

Another challenge was figuring out how to handle the generated text and user input. Initially, we wanted the generated text to update directly within the input field, reflecting correctness as the user typed. After a lot of trial and error, we decided to separate the input field from the generated text, which allowed us to provide real-time feedback in a smoother and more intuitive way.

We also ran into difficulties with aligning the character to follow the user’s cursor as it moved along the text. After a bit of tinkering, we were able to fix it, and the character moved in sync with the user’s typing. Similarly, we had to debug the logic for marking incorrect letters, making sure every mistake was flagged properly.

Balancing functionality with visual appeal was a constant challenge. We needed to split our time between making the game both visually engaging and fully functional. For example, we wanted the timer and WPM tracking to provide a gentle nudge without overwhelming the player. We’re proud of how we managed to strike a balance, but next time, we'll aim to streamline this process even more.

Overall, these challenges were a valuable learning experience that will help us make better decisions and improve our approach next time.

Reflections & Final Thoughts

It is incredibly cool to be in a place where everyone is excited to be present and learn. Being surrounded by people passionate about sharing their knowledge, experiences, and talents really pushed us to keep going and reminded us how much there is still to discover and explore.

This was some of our first times creating a web app, so being able to see our game and think, “We built that,” has been truly motivating and rewarding.

We hope players enjoy Sprite Type as much as we did creating it!