Coding Challenge #91 - Monkeytype
This challenge is to build your own online typing test tool.
Hi this is John with this week’s Coding Challenge.
🙏 Thank you for being one of the 84,953 software developers who have subscribed, I’m honoured to have you as a reader. 🎉
If there is a Coding Challenge you’d like to see, please let me know by replying to this email📧
This week’s newsletter sponsor is Outlier. They’re looking for freelance frontend web developers and UI/UX designers with technical skills who would like to make up to $50/hour helping to train the next generation of AI tools.
They offer weekly payouts and remote work. You don’t need any AI experience. Just bring your Javascript expertise to train the next generation of AI tools.
Visit Outlier to find out more and apply!
Ok back to the coding challenge…
Coding Challenge #91- Monkeytype
This challenge is to build your own version of monkeytype. Monkeytype is a minimalistic and customisable typing test. At first glance it seems a relatively simple website with a clean minimalistic design. There’s more than meets the eye!
Firstly it’s an amazingly popular website! According to once source it gets over 20 million visitors per month. The about page for monkeytype claims it has provided over 4.4 billion tests!
Secondly it has a lot of features, as well as being able to take a simple typing test you can also create an account. Once you have an account you might be able to compete and appear on the leaderboard. Although you’ll need a typing speed of over 246 words-per-minute (WPM) to get in the top 50! To put that in context professional typists do around 80 WPM and the world record is 360!
If You Enjoy Coding Challenges Here Are Three Ways You Can Help Support It
Refer a friend or colleague to the newsletter. 🙏
Sign up for a paid subscription - think of it as buying me a coffee ☕️, with the bonus that you also get 20% off any of my courses.
Buy one of my courses that walk you through a Coding Challenge.
The Challenge - Building A Monkeytype Clone
In this coding challenge you will be building a typing test tool inspired by Monkeytype. You’ll display a random selection of words to a user and track how quickly and accurately they can type them in.
The stats will include, words per minute, raw words per minute and accuracy. Since words vary in length, the definition of each "word" is often standardised in typing tests to be five characters including spaces and punctuation.
Step Zero
This challenge is perfect for the frontend developers. If you’re not a frontend develop then it’s a perfect project to learn frontend development.
If you really don’t want to, then you could still build a traditional desktop application.
Whichever way you chose to go, your goal in this step is to get ready for development, pick you tech stack, setup a Github repo or whatever you use and create a new blank project.
Step 1
In this step your goal is to create your typing test home page. Right now it should just be a blank page with a fixed prompt - you could pick some random words or use your favourite quote.
For example:
Don’t forget to include the blinking cursor as a nice hint to the user.
Step 2
In this step your goal is to show the letters / mistakes as the user types them. Ideally the cursor should move through the text as they type. Mistakes can be shown in red and correct letters in a colour of your choice. The example below uses white for correct letters.
Step 3
In this step your goal is to record the statistics. As in the screenshot above you should show the correct and total characters typed so far. You should also be recording the start time and end time (which is when they type the Nth character where N is the number of characters in the test).
Once they have finished, present the results. You should show them the:
WPM - this is the number of correct characters typed divided by 5, divided by the number of minutes taken.
Raw WPM - this is the number of characters typed divided by 5, divided by the number of minutes taken.
Accuracy - the percentage of correctly typed characters.
Step 4
In this step your goal is to allow the user to sign in after seeing their result. This should include the ability to create an account.
Once they have an account keep track of their results, listing the date and the statistics. As they now have an account you’ll also need the ability to log in, log out, reset the password and delete the account.
Step 5
In this step your goal is to update the prompt to use a random set of words instead of the fixed prompt.
To do so, get a list of the most common 1000 words used in the natural language you’re supporting and pick a set of 20 to 30 of them at random to use for the typing test.
You can find a list of the 1000 most common English words here.
Step 6
In this step your goal is to provide a leaderboard. On the leaderboard you should show a list of the top 50 WPM scores alongside the username and the accuracy.
To stop it being gamed I suggest setting an accuracy threshold of 90% and excluding any score with a lower accuracy.
Going Further
You can take this project further by:
Adding a graphical summary to the results.
Deploy your solution live and share it!
Support other natural languages.
Share Your Solutions!
If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know via Bluesky or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo
Request for Feedback
I’m writing these challenges to help you develop your skills as a software engineer based on how I’ve approached my own personal learning and development. What works for me, might not be the best way for you - so if you have suggestions for how I can make these challenges more useful to you and others, please get in touch and let me know. All feedback greatly appreciated.
You can reach me on Bluesky, LinkedIn or through SubStack
Thanks and happy coding!
John