Code Typer

Code typing game for developers. Practice real syntax, not lorem ipsum. Braces, functions, indentation: the way you actually type.

TypeScript
Next.js
PostgreSQL
Prisma

Why I Built It

I recently switched from ISO to ANSI keyboard layout, and I needed to practice. I tried Monkey Type, but typing "the quick brown fox" just doesn't feel like typing code. When I'm actually programming, I'm dealing with braces, parentheses, indentation, and trying not to mess up syntax. None of that comes up when you're just typing words.

I also wanted it to feel like a real IDE. That means auto-closing brackets, smart backspace behavior, and syntax highlighting. If I'm going to practice typing code, I want it to feel like I'm actually coding.

What It Does

  • Pulls actual code from real open-source projects on GitHub

  • Behaves like an IDE: auto-closing pairs, smart deletion, syntax highlighting

  • Currently supports popular languages like JavaScript, TypeScript, C++, Python, Java, and more

  • Lets snippets be shared so another person can type the same code

Tech Stack

I went with Next.js because I wanted a single codebase for everything: the frontend, the API routes, and the project pages. It makes deployment simple and I don't have to context switch between different parts of the project.

For storage, I'm using PostgreSQL with Prisma. It stores GitHub file references, language metadata, file versions, and the generated snippets.

The heavy lifting for parsing is done by Tree-sitter. It's what lets me extract functions and classes from source files, figure out which parts are strings or comments, and validate that a snippet is actually good enough to use.

Future Updates

Some things I might add next:

  • Better UI: the current interface is functional, but still pretty bare-bones.

  • Progress tracking: I'd like to store your typing history over time so you can see if you're actually improving.

  • More detailed stats: right now you get WPM and accuracy, but I'd like to break that down by language, snippet complexity, and more.

  • Custom snippet importing: since different programmers have different coding styles, I'd like to allow users to import their own snippets for practice.

Notes from building this.