I have always been a massive fan of using typing games to improve my writing and grammar when typing up blog posts and essays quickly. Most of the typing games I used for practice followed the same format; you just type as fast as you can without making any mistakes. However, since I heard about TypingDNA and their algorithms to identify someone based on their typing, I had to try it out to see if it could help jazz up the game.

What it does

The game is simple: sign up with a username which enrols you as a user in TypingDNA. A TypingDNA recorder in the frontend code records how you type in the browser and verifies you by getting you to write a few demo sentences. Once you are verified, you can play the game. The game consists of being presented with a sentence; you have to type out the sentence correctly and quickly. The catch is that when you finish typing a sentence, the results are sent to TypingDNA, which then checks whether the typing pattern recorded closely matches your previous patterns. If it does not, then you lose the game. You gain points from typing sentences correctly, quickly and ensuring that you type in a consist pattern each time.

How I built it

The game is built as a web application with a frontend and backend. The frontend is written in JavaScript and uses the React framework for creating components. I used Material UI components to jazz up the app and make it look cool. The backend is an web API written in Python 3 using the FastAPI framework. This is run on top of a Uvicorn web server.

Challenges I ran into

The biggest challenge was programming the game loop when a user starts playing. It seems simple on paper but there are numerous win and loss conditions that need to be accounted for in the code logic. Furthermore, coming up with a fair way to decide if a user has won or lost based on how many letters/words they got right and wrong was very difficult and involved a lot of planning to derive a suitable formula.

Accomplishments that I'm proud of

This is my first Hackathon and I'm proud that the project works! It is very rewarding to see such an interesting authentication technology being added to a game I use a lot. Also, I think the idea is very unique as I'm sure that no one else would've thought to code this, which makes my creation unique. I hope that people find it as addictive to play as I have!

What I learned

I learnt a lot about CSS, which can often be overlooked by young developers. I focus primarily on Python backend engineering in my job and so it is very refreshing to have a project which flexed my CSS and JavaScript knowledge. Furthermore, this project helped me plan how game loops work and use tools like flowcharts to aid in visualizing what I need to code.

What's next for TypingDNA Racer

The plan is to deploy to a cloud service and make TypingDNA Racer go live!

Built With

Share this project: