Overview
GitHub Code-Match Quiz tests how well you can read unfamiliar code. Each round shows a real snippet from a popular open-source repository, with project names and identifying terms hidden, and you pick which repository it came from.
Features
- Six rounds with fresh, randomly chosen repositories and code sections every game.
- Syntax-highlighted snippets that keep their original formatting.
- Three lifelines, once per game: remove two wrong answers, reveal more code, or show a redacted file-path hint.
- Instant feedback, progress tracking, and a final score recap with confetti.
- Responsive design with smooth animations and reduced-motion support.
How it works
- The server picks a repository and fetches a random source file from GitHub.
- A section of code is selected and identifying terms such as project names are redacted, with formatting preserved.
- Answer choices are drawn from repositories in the same language, so the language alone never gives it away.
- Shiki renders the snippet, and the player chooses.
Tech stack
- Framework: Next.js, React, TypeScript
- Data: GitHub REST API (server-side only)
- UI: Shiki syntax highlighting, Motion animations, Lucide icons, canvas-confetti
Engineering highlights
Fair questions. Redaction removes the obvious giveaways, and same-language answer choices mean you have to read the code to get it right.
Resilient generation. Fallback files and replacement repositories keep the game going when a GitHub request fails.
Secure by design. All GitHub calls run on the server, so credentials never reach the browser.