TL;DR
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: https://devtype.honualohak.com
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
This is why I built DevType.
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
- 5 Programming Languages: Python, JavaScript, TypeScript, Go, Rust
- 5 Difficulty Levels: From variable definitions to complex function implementations
- Real Code: Patterns you'd actually write
- Professional Code Editor: With syntax highlighting
📊 Visualize Your Growth
- WPM & Accuracy: Measure your 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
Available in English, Japanese, Chinese, Spanish, Portuguese, German, French, and Italian.
Tech Stack
The technology powering DevType.
Frontend
| Technology | Purpose |
|---|---|
| Next.js 15 | React framework with App Router |
| React 19 | UI library |
| TypeScript | Type safety |
| Tailwind CSS v4 | Styling |
| Shadcn/ui | UI components |
| Recharts | Chart rendering |
| Prism.js | Syntax highlighting |
Backend & Infrastructure
| Technology | Purpose |
|---|---|
| Supabase | Database, Auth, Storage |
| AWS Amplify | Hosting |
| next-intl | Internationalization (8 languages) |
Development Tools
| Technology | Purpose |
|---|---|
| Claude API | Auto-generating problem content |
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:
- Auto-fills leading indentation (users don't need to type it)
- Tracks cursor position character by character
- Calculates WPM using standard 5 characters = 1 word
- Handles edge cases like tabs vs spaces
// Simplified typing engine code
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 5 languages × 5 difficulty levels.
Solution: Used Claude API for auto-generation:
- Set target character counts per difficulty
- Syntactically correct code
- Educational and practical content
- Included 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`;
Each problem includes an explanation that helps users understand the code:
3. 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
4. Internationalization for 8 Languages
Challenge: Handling language-specific differences like pluralization and date formats.
Solution: Adopted next-intl:
- Locale-based routing (/en/, /ja/, /zh/, etc.)
- JSON message files per language
- Automatic locale detection from browser
5. Progress Visualization Charts
Challenge: Wanted users to feel 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.
Score System
A rhythm-game-inspired ranking system:
| Rank | Score Range | Description |
|---|---|---|
| S | 9000+ | Perfect performance |
| A | 7000-8999 | Excellent |
| B | 5000-6999 | Good |
| C | 3000-4999 | Average |
| D | 0-2999 | Keep practicing! |
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: https://devtype.honualohak.com
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. But 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!
Top comments (0)