I Built QuickType — A Real-Time Typing Game That Lets You Race a Bot

In Week 9 of my Project52 challenge — where I build one new project every week for 52 weeks — I decided to go back to basics: fast fingers, minimal UI, no distractions.

But I didn’t just want to build a typing test.

I wanted to build a game.
I wanted tension, feedback, competition.
And I wanted it to feel good — like a tiny app you’d want to keep open in a second tab and challenge yourself during breaks.

So I made QuickType — a fast-paced, real-time typing speed test with a twist:
You race against a bot.

🧠 The Idea

Typing tests are everywhere. But most of them are passive — you start, you type, you finish, you see a score. I wanted to add urgency.

The idea started with a simple thought:

So the central idea became bot racing.

This led to the core loop:

• You pick a mode (normal or race)

• You select difficulty (easy, medium, hard)

• The bot simulates typing next to you in real time

• You see your WPM + Accuracy update as you type

• You try to win.

🧱 Tech Stack

• ✅ HTML + CSS + Vanilla JS — No frameworks

• ✅ localStorage for the leaderboard (no backend)

• ✅ canvas-confetti for celebrations

• ✅ Custom prompt sets (see below)

Everything is client-side. No builds. No accounts. No friction.

🕹 Key Features & Why I Added Them

🏁 Race a Bot Mode

Simulates a bot typing alongside you with realistic WPM pacing. The WPM is randomized within a range based on difficulty:

{   easy: [30, 45],
    medium: [45, 60],
    hard: [60, 80] 
} 

The bot's progress is visually shown on a glowing line above the text box, creating pressure and urgency.

📊 Real-Time Accuracy and WPM

Most typing tests calculate accuracy after you're done. I wanted feedback as you go.

So, for every keystroke:

• I track correct vs incorrect characters

• I calculate accuracy based on:

  correct / (correct + errors)

• I animate an accuracy bar under the stat

Every error triggers a visual pulse, encouraging you to slow down and focus.

🎯 Error Counter with Dot Markers

Instead of just showing a number, I wanted something visual and intuitive.

I display red dots (up to 10) that fill as you make mistakes. The moment you get to 4-5, you feel the tension mounting.

📋 Local Leaderboard

After every test, I store your WPM, accuracy, and date in localStorage.

Why?

• It’s lightweight and fast.

• It gives the app a “return value” — a reason to play again.

• It avoids any backend complexity.

I keep only the top 5 scores sorted by WPM.

✍️ The Prompts

Each typing test draws from one of three categories:

• Code (e.g., JavaScript snippets)

• Literature (classic lines from famous novels)

• Tweets (short, punchy, funny)

But — I also added easter eggs and callbacks to my journey:

• Some tweets reference Project52

• Some code lines poke fun at dev life

• Some passages drop my name, just for kicks

It’s subtle, but it makes the app feel mine.

🧪 Challenges I Faced

🔁 Simulating Bot Typing in Real-Time

This part was surprisingly tricky. I had to:

• Convert WPM into characters per second

• Pace character progress over time

• Avoid outpacing the user unfairly

This logic runs on a fixed interval, incrementing the bot’s index and redrawing its progress bar accordingly.

✍️ Character-by-Character Span Matching

I render the full prompt as individual <span>s. Every keystroke:

• Compares typed text vs the prompt

• Highlights correct letters in green

• Highlights mistakes in red with underline

• Updates progress bar and accuracy bar

Keeping this snappy and accurate was key.

🧹 Reset Logic

I needed the “Try Again” and “Close” buttons to completely reset the test state:

• Remove bot overlays

• Reset all stats and spans

• Clear the leaderboard card

• Set the UI to its original load state

Took a few tries, but now it works smoothly.

🔗 Try It Here

Check out the demo below:

🟨 Click to Play QuickType

No signup. Just open and type.

👨‍💻 Why This Project Matters

This wasn’t just about building a typing game.

It was about:

• Understanding real-time input feedback

• Managing game state on the frontend

• Simulating challenge without actual multiplayer

• Designing something that’s fast, minimal, and fun

And now, I have a game I find myself revisiting when I need a break — that’s a win.

Thanks for reading!
This was Week 9 of Project52 — where I build one new thing every week to push myself out of my comfort zone.

💛
Atul Verma
Creator, Project52 🚀
atulformarketing.com