Mattia Cerutti
workprojects
Back to Projects

2 min read

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

Most typing games (eg. Monkey Type) test you on plain words, but that's not how developers type. Writing code involves braces, parentheses, indentation, and syntax rules.

Why I Built It

I wanted a tool that felt closer to real programming than standard typing trainers: typing function myFunc() has a very different rhythm than typing the quick brown fox!

Code Typer makes you practice the symbols, spacing, and structures you encounter every day in code while also providing the help an IDE would.

Features

  • Code snippets from real open-source projects

  • IDE-like behavior: auto-closing pairs, deletion shortcuts, and syntax highlighting

  • Support for JavaScript, TypeScript, C, C++, C#, Java, Lua, and Python (with easy extension for more!)

Tech Stack

  • Next.js: Single framework for frontend and backend API routes. Simplified deployment and kept all logic in one place.

  • PostgreSQL + Prisma: Postgres stores GitHub file links and language metadata. Naturally, I had to go with Prisma.

  • GitHub API: Primary source of code snippets. Carefully optimized to avoid rate-limit headaches.

  • Tree-sitter: Parsing engine for understanding code structure, validating snippets, and detecting autocomplete ranges.

How the Snippet Pipeline Works

The core of Code Typer is transforming raw GitHub files into valid game snippets. The flow looks like this:

  1. Database Query
    Select a random file link for the chosen language.

  2. File Fetching
    Download the raw content of the file.

  3. Parsing
    Use Tree-sitter to parse the file and extract candidate snippets like functions or classes.

  4. Validation & Formatting
    Standardize whitespace and indentation, then validate the snippet with rules like minimum length or line count. If a file yields no valid snippets, it's marked invalid in the database to avoid future queries.

  5. Autocomplete Marking
    Mark ranges where auto-closing characters should not trigger (e.g., strings, comments).

On the frontend, snippets are highlighted, rendered, and typed in real time.

What's Next

The current version works, but here are some ways it could be improved:

  • A cleaner (and better) UI.

  • Progress tracking over time (with accounts).

  • Richer performance metrics.