10. WEB APP
MiddleC
Browser-based piano practice suite with live pitch detection, sheet music rendering, and a mobile-friendly PWA. Built with Luke Wunderlich.
MiddleC (Temperat.io) — a browser-based piano practice suite built with Luke Wunderlich, aimed at students and piano technicians.
THE PROBLEM
Existing piano tuning and practice apps are native iOS/Android installs with paywalls. There was room for a fully browser-based tool that worked on any device — desktop, tablet, phone — with no install and no subscription wall for the core experience.
THE APPROACH
- Client-side audio pipeline using Tone.js for playback, Pitchy + Spotify's Basic Pitch for real-time pitch detection, and Tonal for music theory — all running in the browser with no server round-trip.
- VexFlow for live sheet music rendering, with dynamic loading so the ~500KB library only loads when the practice view does.
- Installable PWA so students can add it to their home screen and keep it working even on weak connections.
- Stripe + Supabase for accounts and premium features, with a feature flag gating the MVP mode under review.
- Accessibility audit done in the 'feat/mvp-mode' branch, including a dedicated ACCESSIBILITY-AUDIT.md.
STACK
- Next.js
- Tone.js (audio playback)
- Pitchy + @spotify/basic-pitch (pitch detection)
- Tonal (music theory)
- VexFlow (sheet music rendering)
- Supabase SSR (auth + data)
- Stripe (payments)
- PWA
- Vercel
RESULTS
none
INSTALL REQUIRED
fully client-side
AUDIO PIPELINE
dynamic VexFlow load
BUNDLE STRATEGY
NEXT CASE STUDY
Epistemic News
AI / NEWS PLATFORM