instrument.games is a collection of browser games for music practice. Sight reading, rhythm, harmony, and fingering drills run in levels you can score and repeat—no install, and playable with a MIDI keyboard or microphone if you have one. Progress, scores, ranks, and achievements sync to an account so runs are comparable on shared leaderboards.
Games
- Sight Reader — treble clef note recognition across ten levels, with staff notation rendered by VexFlow and a mallet-keyboard input surface.
- Rhythm Lab — tap notated rhythms in time against a scheduled transport, graded on per-hit timing precision with Verovio-rendered charts and latency calibration.
- Harmony Guesser — ear training for intervals and chord qualities, generated from a shared interval/chord model rather than hand-authored question banks.
- Woodwind Fingerings — build fingerings for flute, clarinet, alto sax, and bassoon against validated fingering charts.
- Note Finder — locate pitches on 26 playable instrument surfaces spanning keys, strings, brass, woodwinds, mallets, steelpan, free reed, and drums.
Features
- Built 26 interactive instrument surfaces as data-driven SVG components—piano, fretboards and fingerboards, trumpet and trombone, timpani, drumset, steelpan families, kalimba, harmonica—sharing one catalog, keyboard-input hook, and grading layer.
- Wired three input paths into every game: click/tap, Web MIDI note-on parsing from any connected controller, and microphone pitch detection via autocorrelation with an RMS noise gate and user-tunable sensitivity.
- Rendered notation two ways for two jobs: VexFlow for live interactive staves, Verovio for rhythm charts with a server-side cache so notation isn't re-engraved per request.
- Sampled instrument audio through smplr soundfonts with a shared transport, click track, UI sound effects, and output-latency compensation so rhythm judgement stays honest.
- Designed a progression system on MongoDB/Mongoose—XP routing, seasonal rank tiers with decay, letter-grade scoring from accuracy and completion, achievement definitions with criteria evaluation, and per-game leaderboards with run history.
- Shipped a community level creator with autosaving drafts, note-pool and rhythm-chart authoring, collaborator roles, visibility controls, and publish guards that refuse to ship a level its game can't actually run.
- Delivered account infrastructure end to end: NextAuth credentials with email verification and password reset over the Gmail API, S3-backed avatar and cover uploads, profile pages, user search, and a data export/deletion path.
- Made it installable as a PWA—service worker with an offline page, generated manifest with per-game shortcuts, and scripted screenshot/icon capture so Chrome shows the rich install dialog.
- Added a notification layer over web-push and email with templates, delivery logging, and cron-style jobs for streak warnings, rank-ups, rank decay, and XP replay.
- Kept SEO and structured data in one place—a single source of site identity feeding root metadata, sitemap, robots, and manifest—with dynamic OpenGraph image generation per route.
- Covered the domain logic with 65 Vitest suites over notation, rhythm judgement, instrument geometry, grading, session flow, and API route handlers.
Stack
- Framework: Next.js 16 (App Router), React 19, TypeScript
- UI: Mantine, custom SVG instrument components
- Data: MongoDB via Mongoose, NextAuth, S3
- Audio & Notation: Web Audio, Web MIDI, smplr, VexFlow, Verovio
- State & Testing: Zustand (persisted), SWR, Vitest, Testing Library