CommitBureau

LANDING PAGE
DAILY CASES PAGE
REPO PAGE
HOW TO PLAY
OUR MASCOT
GAME WINDOW
GIT-SPIDEY

Inspiration

Git is hard to learn because tutorials teach commands on toy examples, but never show you how to read a real project's history. We wanted a way to practise on the real thing. We wanted every clue to come from real commit history, even the Linux kernel's.

What it does

CommitBureau turns any public GitHub repository into detective cases that you solve with real Git commands.

Detective terminal: each case gives you a terminal and a case brief. You type commands like git log, git show, git shortlog and git cat-file to dig up the evidence, then accuse a suspect. Some clues are hidden on purpose, like a scrubbed author, so they have to be deduced, not read off.
5 levels: Rookie (commits), Officer (diffs), Detective (file history), Inspector (merges and pull requests), and Chief (choosing the right command in a Git emergency).
Daily Cases: three real repos a day, Easy, Medium and Hard, the same for every player.
Case Zero: a built-in practice repo that works offline with no token, the safe place to start.
My Archive: type a GitHub username and investigate your own old projects.
Scoring: streaks, hints that cost points, ranks from Rookie to Chief, and a skills report after every case.

How we built it

Frontend: React 19 and Vite, with GSAP animations and an animated spider detective mascot.
Game engine: plain JavaScript in src/engine/, separate from the UI. The UI only talks to it through src/api.js, using shapes we agreed in a written contract.
Data: the GitHub REST API. Responses are cached, and each game has an API budget, so a rate limit gives you a shorter game instead of an error.
The terminal doesn't run real Git. It imitates Git's output from GitHub API data, so players don't need to install Git, clone anything, or connect their GitHub account.
Token proxy: a Vercel serverless function holds a GitHub token on the server, so players get 5,000 requests an hour and the browser never sees the token.
AI tools: we used VSCode with Claude extension and Antigravity while building. Our README's AI disclosure section describes exactly what they did and what we did.

Challenges we ran into

Keeping a secret token safe with no backend. Without a token, GitHub allows only 60 requests an hour, about 6 games. But any token in browser code is visible to anyone, and GitHub revokes tokens it finds in public repos. We added a small Vercel function that holds the token and forwards only the three read-only requests the game needs.
Questions that were guesswork. Early on, "who wrote this commit?" was close to luck. We redesigned it around the file's history, so the evidence proves exactly one suspect, and the terminal now explains when it hides a clue on purpose.
Merging two people's work in the same files. One of us built the engine and the other the interface, but we kept editing the same files. We switched to pull requests and ran a trial merge first, checking that both sides' features survived before merging into main.
Mascot animations and placement. The spider covered buttons on small screens and caused sideways scrolling on phones. We clamped its size to the screen, hid it below 480 px, and gave it GSAP spring animations with a timed retreat.

Accomplishments that we're proud of

The investigation terminal: real Git commands in the browser, working on any public repo, with the clue masked so you have to investigate.
Every answer is provable: we tested hundreds of generated rounds to check that the commands shown always lead to the right answer.
It works on huge repos like the Linux kernel, and Case Zero works fully offline for demos.
It runs everywhere: we tested it from phone to 4K screens, and cut the page from 12 MB to under 2 MB by serving images as WebP.
We built it as a real team: separate branches, pull requests, and a public history of more than 100 commits.

What we learned

A frontend can't keep secrets. Anything secret has to live on a server, even a tiny one.
Agree on the data shape between frontend and backend early. A screen built only against fake test data broke the first time it met the real engine.
A puzzle should be provable from its evidence, not guessable.
Test on every screen size, not just your own monitor.
Test a merge before trusting it.