In the Age of AI-Generated Code, I Built a Typing Game to Record Humanity's Peak Typing Speed

Source: Dev.to

I built DevType – a typing game for programmers.
Type real code in Python, JavaScript, TypeScript, Go, and Rust, measure your WPM, and compete on global rankings.

👉 Play now:

Why I Built This

Humanity’s Coding Speed May Have Already Peaked

GitHub Copilot, ChatGPT, and Claude are fundamentally changing how we write code.

It hit me one day:

This very moment might be when humans are typing code the fastest in history.

A few years from now, when AI writes most of the code, developers will transform from “people who type” to “people who direct AI.” Review, instruct, fine‑tune. Time spent hammering keyboards will inevitably decrease.

That’s why I want to:

• Record – Capture humanity’s peak typing speed
• Celebrate – Honor the muscle memory we’ve built over years
• Preserve – Save this moment before it’s lost

Why Regular Typing Tests Don’t Cut It

Standard typing tests have you type English sentences. But programmers know better.

Typing

const handler = async (req, res) => { …

is completely different from typing “The quick brown fox.”

Programming requires:

• Special characters: [], {}, =>, ::, &&
• Precise indentation
• Language‑specific syntax patterns

DevType tests your ability to type real code.

What Is DevType?

A code‑typing practice game designed for programmers.

🎮 Core Features

📊 Visualize Your Growth

• WPM & Accuracy – Measure typing speed and precision
• Score System – Calculated from speed, accuracy, difficulty, and combo
• Activity Heatmap – GitHub‑style activity graph
• Progress Charts – Track score / WPM / accuracy / max combo over time

🌍 Compete Globally

• Global Rankings – Compete with programmers worldwide
• Country Flags – Represent your country on the leaderboard
• Public Profiles – Share your achievements

🌐 8 Languages Supported

English, Japanese, Chinese, Spanish, Portuguese, German, French, Italian.

Tech Stack

Frontend

Backend & Infrastructure

Development Tools

Architecture

┌─────────────────────────────────────────────────────┐
│                     AWS Amplify                     │
├─────────────────────────────────────────────────────┤
│  Next.js 15 (App Router)                             │
│   ├─ Server Components (RSC)                       │
│   ├─ Client Components ("use client")               │
│   └─ API Routes                                     │
├─────────────────────────────────────────────────────┤
│  Supabase                                           │
│   ├─ PostgreSQL (problems, game_results, profiles) │
│   ├─ Auth (GitHub, Google OAuth)                    │
│   └─ Storage (avatars)                              │
└─────────────────────────────────────────────────────┘

Challenges & Solutions

1️⃣ Building a Natural Typing Engine

Challenge – Creating a typing experience that handles code‑specific patterns like auto‑indentation, special characters, and multi‑line input.

Solution – Built a custom typing engine that:

• Auto‑fills leading indentation (users don’t need to type it)
• Tracks cursor position character‑by‑character
• Calculates WPM using the standard “5 characters = 1 word” rule
• Handles edge cases such as tabs vs. spaces

// Simplified typing‑engine snippet
const handleKeyPress = (key: string) => {
  const expected = code[currentIndex];

  if (key === expected) {
    // Correct
    combo++;
    correctCount++;
  } else {
    // Mistake
    combo = 0;
    mistakeCount++;
  }

  currentIndex++;
  updateStats();
};

2️⃣ Generating Quality Code Problems

Challenge – Needed hundreds of realistic code snippets across five languages, each with varying difficulty and clear, testable patterns.

Solution – Leveraged the Claude API to auto‑generate problems, then manually curated a subset to ensure quality and relevance. The pipeline:

1. Prompt Claude for a short, self‑contained code snippet (5 – 30 lines).
2. Ask for a brief description and difficulty rating.
3. Store the result in Supabase; run a linter to verify syntax.

3️⃣ Internationalization (i18n)

Challenge – Supporting eight languages while keeping the UI and problem statements consistent.

Solution – Used next‑intl with locale‑specific JSON files. All static UI strings are extracted; dynamic problem content is generated in English and then translated via Claude’s translation capability before being cached per locale.

4️⃣ Real‑Time Leaderboard Performance

Challenge – Updating global rankings instantly without overloading the database.

Solution – Implemented a Supabase Edge Function that writes new scores to a lightweight leaderboard table and triggers a PostgreSQL LISTEN/NOTIFY channel. The frontend subscribes via WebSocket to receive updates in real time.

Try It Out!

1. Visit the site
2. Choose a language and difficulty
3. Start typing real code, watch your WPM, and climb the global leaderboard

Happy typing! 🚀

5‑Language, 5‑Difficulty Coding Challenge

Solution: Used the Claude API for auto‑generation

• Set target character counts per difficulty
• Produced syntactically correct, compilable code
• Added brief, educational explanations for each problem

// Problem generation script with Claude API
const prompt = `Generate a ${language} code snippet at difficulty ${level}.
Requirements:
- Approximately ${targetLength} characters
- Compilable / executable
- Brief explanation included
- Use patterns developers actually write`;

1. Problem Generation

Each problem includes an explanation that helps users understand the code:

2. Real‑time Score Calculation

Challenge: Designing a scoring system that fairly evaluates both speed and accuracy.

Solution: Multi‑factor score calculation

• Speed (WPM) – faster = higher score
• Accuracy – mistakes = penalties
• Difficulty – higher levels = more points
• Combo – consecutive correct answers = bonus

3. Internationalization for 8 Languages

Challenge: Handling language‑specific differences like pluralization and date formats.

Solution: Adopted next‑intl

• Locale‑based routing (/en/, /ja/, /zh/, …)
• JSON message files per language
• Automatic locale detection from the browser

4. Progress Visualization Charts

Challenge: Let users see their improvement tangibly.

Solution: Implemented multiple visualizations

• Activity Heatmap – GitHub‑style play history
• Progress Charts – Score / WPM / accuracy / combo trends
• Improvement Indicators – Compare start vs. end of period with ↑ / ↓

Used Recharts with colors matching the Dracula theme for visual consistency.

5. Score System

A rhythm‑game‑inspired ranking system:

Future Plans

Planned Features

• Additional languages (Java, C++, PHP, Ruby)
• Badge & achievement system
• Multiplayer battle mode
• Custom problem creation

Give It a Try!

🎮 Play DevType:

Perfect for:

• Senior engineers who want to benchmark their typing speed
• Beginners looking to learn syntax through practice
• Anyone who simply enjoys typing games

Go for that high score!

Feedback Welcome

This project is a hobby development, and I’m improving it based on user feedback.

• Feedback button in the app
• Comments on this article

All forms of feedback are welcome!

Final Thoughts

We live in an exciting era where AI is transforming coding. Before we fully transition to AI‑assisted development, let’s celebrate and record what humans can do.

Your typing speed today might be humanity’s fastest moment at writing code.

Let’s preserve that record. 🚀

What’s your high score? Let me know in the comments!