Case study // Personal project, no NDA, all mine
toca.la is the songwriter's studio I always wished existed. My producer sends me a beat, and instead of juggling three apps and losing lyrics halfway through the second verse, I open one browser tab. Load any audio file and toca.la detects the BPM and key, maps your song into sections, and gives you a lyric pad synced to playback.
toca.la started as a personal frustration.
When writing lyrics, I need to hear the beat, on repeat, but not the whole song. I want JUST the part I'm writing to so I can stay in the zone, WITHOUT having to scrub the beat back to a certain point. I've had this idea brewing for some time now, but never had the dev skills to bring it to life.
I decided to ask Claude. 
I told Claude my idea. I shared my frustrations with the current songwriting workflow, and suggested my potential solution. Not knowing what to expect, I was surprised to see a well-thought out and logically phased development plan.
I imagined it would just blindly generate a first pass, but I realized Claude is more like a co-worker, strategizing the plan of attack before making it's first move.
The first iteration was pretty amazing, but it was just a static page. Claude walked me through installing Node.js, creating a React app and getting my local environment set up so I could use the Web Audio API to handle audio uploads, playing, looping. etc.
From this point on, Claude would generate an App.js script which worked on my localhost. I could now upload a track and hear audio in my browser, as well as mirrored to my phone.
Now it was time to refine.
It started as evenly-sized section blocks, structure with no relationship to the audio itself. Adding a waveform tied the map to the actual sound, and draggable edges let writers shape sections by feel instead of by guessing.
I also added BPM, key, the ability to add sections, and a way to zoom in/out of the waveform for precision tracking, including mouse and trackpad gestures. These were all usability enhancements discovered as I was playing with the application in real time.
Equal-width blocks. Every section looks the same length regardless of the music. The map and the audio felt disconnected.
Widths now track real duration, a waveform sits behind each section, and draggable edges (the handles) reshape boundaries inline.
Section cards under the timeline were originally laid out in a two-column grid. On a phone, where most writing happens, that meant cramped cards and tiny tap targets. Collapsing to a single column gave each section room to breathe and a clear, scannable vertical order that matches the song top-to-bottom.
Two columns. The reading order zig-zags and cards were squeezed... awkward on a phone.
One column, straight top-to-bottom like the song. Full-width cards, comfortable tap targets, room for metadata.
Hooray for that!
The biggest simplification.
Originally writers toggled between a Structure tab and a Write tab, but a songwriter doesn't think "I'm in structure mode," they think "I'm working on my chorus." The section is the unit of work, so structure and lyrics were merged into a single card. The two-tab model then sharpened into a cleaner mental distinction: Write vs Rehearse.
Structure and writing split across two tabs. Context-switching broke the flow of actually writing to a section.
One card owns the whole section: structure + lyrics + loop + cues together. Tabs collapse to Write vs Rehearse.
Sections were originally measured in seconds and timestamps, the language of a video editor, not a songwriter. Switching to bars matched how musicians actually think about song length.
Tapping the bar count edits the section length directly, moving the divider and the next section's boundary together, which quietly replaced the need to drag timeline dividers by hand.
Length shown in seconds and timestamps. 36 seconds tells a songwriter nothing about how long the verse feels.
Length shown in bars, the unit musicians count in. The amber pill is tappable, so editing bars resizes the section without dragging.
Hooray for that!
Where it landed
From a single idea to a working, browser-based songwriter's studio: conceived, branded, designed, and built solo through an AI-native workflow.
Proof, in a shippable product, that one designer plus AI can carry something all the way from concept to launch.
toca.la is live and playable in the browser. The rest of my case studies are password-protected to respect client confidentiality.