Build Your Own 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!
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.
Help Others by Sharing 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 - ping me a message on the Discord Server, via Twitter 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.
Get The Challenges By Email
If you would like to receive the coding challenges by email, you can subscribe to the weekly newsletter on SubStack here: