
Project · Full-Stack Engineering
Strumrr
A full-stack guitar practice platform — daily logging, streaks, heatmaps, and instructor video feedback with browser-side compression.
About the project
A full-stack web app for music students to log daily practice sessions, track streaks and contribution heatmaps, and upload practice videos for instructor feedback. The instructor dashboard provides a feedback inbox and class-wide analytics.
Built on React Router 7 with server-side rendering, running on a Hono/Node.js server. Data lives in Turso (libSQL/SQLite) and videos are stored on Cloudinary. Deployed on Render with a health-check endpoint for uptime monitoring.
The standout engineering detail is the upload pipeline: videos are compressed entirely in the browser using Mediabunny and the WebCodecs API before they ever leave the device — cutting file sizes by more than 50% without degrading audio. Uploads then go straight from the browser to Cloudinary via signed requests, so large files never touch the server. A storage policy automatically keeps only each student's two most recent clips and deletes older ones, capping storage costs.
Security-wise: passwords are hashed with argon2, and a security-question flow handles password resets. The UI is mobile-first and responsive throughout, animated with Motion.
Built with
- React Router 7
- Hono
- Turso
- Cloudinary
- Tailwind CSS