Band Tutor Buddy
Practice between lessons, for band kids.
Notation and tab that plays back, listens through the microphone, and tells a kid whether they actually hit the note. Built for the gap between weekly lessons — where nearly all the practice happens and nobody is there to correct anything.
www.bandtutorbuddy.com (opens in a new tab)- Codebase
- ~97k lines
Rendering music is the hard part
Notation looks like a solved problem until you try to lay it out responsively. Bar widths depend on their contents, rows overflow, key signatures consume different pixel widths per accidental, and percussion needs an entirely separate notehead mapping.
The renderer measures the real DOM and feeds those measurements back into layout — a hydration pass between "here is the song" and "here is where every glyph goes".
Playback and listening
- Score and tab rendered with VexFlow
- Playback through Tone.js, with MIDI import
- Live pitch detection off the microphone, so feedback is immediate
- General MIDI percussion mapped to the right noteheads and keys
Stack
- Next.js
- VexFlow
- Tone.js
- Pitch detection
- MongoDB
More labs
Keep looking
FlowRunner
LiveDesign pages. Run flows. Ship apps.
A no-code platform where a drag-and-drop page builder and a visual flow engine publish straight to live HTTP endpoints. The visible half is a builder; the interesting half is everything required to execute someone else’s logic on your infrastructure without regretting it.
- Next.js
- Turborepo
- QuickJS/WASM
- Ed25519
- +2
Trigata
LiveProcess automation for people who do not write code.
Structured data tables, custom forms, and trigger-based automations — send an email, call a webhook, run a scheduled job — behind fine-grained role-based access control. Aimed squarely at small-business teams with a process and no engineer.
- Next.js
- MongoDB
- QStash
- Zod
- +2
Read morewww.trigata.com (opens in a new tab)Forge3D
LiveA WebGPU game engine and editor that never leaves the browser tab.
Open a tab, build a 3D game, export a single self-contained game.html you can double-click. Forge is a real editor — hierarchy, gizmos, inspector, TypeScript scripting — running on WebGPU with no install, no account, and nothing leaving your machine.
- WebGPU
- WGSL
- TypeScript
- ECS
- +1
Read morewww.forge3d.dev (opens in a new tab)
Want the long version?
Happy to go deeper on any of this — architecture, trade-offs, what I would do differently.