Serenade

Logo
AR Fretboard onto guitar for tabs that I hummed myself
GIF
Rolodex song library collection
Collection of melodies converted from hums
Digital audio workstation, "The Studio"
Taking hummed melody as input on dashboard
Dashboard UI screenshot

Inspiration

Serenade was inspired by my own frustration as a self‑taught guitarist who could hear songs in my head but couldn’t reliably turn them into playable arrangements. I wanted a tool that makes writing an original love song feel approachable and educational instead of intimidating.

What it does

Serenade lets you hum a melody, converts it into notes or chords, and then helps you arrange it into a full song in a simple browser‑based studio. It also generates guitar tabs and overlays them on your real fretboard via camera, so you can learn and practice in a very visual, educational way.

How we built it

As a solo developer, I built Serenade with Next.js, React, Tailwind, shadcn‑style components, Supabase auth, and Tone.js for audio playback and preview. Under the hood, I convert recorded audio into timed note events, map those pitches onto a guitar fretboard, and wire everything into a dashboard and DAW‑style editor.

Challenges we ran into

Handling real‑time audio in the browser and turning noisy hums into stable, musical note events was tricky, especially across different devices and permissions. Mapping notes to beginner‑friendly guitar positions and making the camera overlay line up perfectly with the physical fretboard also took a lot of iteration.

Accomplishments that I’m proud of

I’m proud that, as a solo developer, I shipped a complete flow: from humming into the mic to practicing a custom tab overlaid on your own guitar. I’m also proud that Serenade doesn’t just “spit out results” but actively teaches self‑taught guitarists how melodies translate into notes, chords, and fretboard shapes.

What I learned

I learned how to design an end‑to‑end educational experience around audio—bridging microphone input, note detection, and visual feedback into something a beginner can understand. I also got better at balancing product polish with technical complexity while owning everything from backend auth to front‑end music UX on my own.

What’s next for Serenade

Next, I want to improve the accuracy and musicality of the hum‑to‑melody conversion and add smarter chord suggestions tailored to beginner‑friendly voicings. I also plan to add more guided, lesson‑style flows so Serenade can double as a playful guitar teacher, not just a creative tool for Valentine’s serenades.