Vibe coding a music learning app

Reading Shipping at Inference-Speed and with the Christmas holiday on my hands, I again felt a deep desire to ship a side project while getting a feel for state of the art AI coding tools.

Usually I temper my enthusiasm for side projects and discard ideas immediately: rarely do I have significant free time on my laptop. But with Claude Code and Codex I'm now vibe coding on my phone while making potato salad or waiting in line at the supermarket.

So let me share one thing I built.

I appreciate jazz and would love to improvise well, but my training (if you can call it that) is a couple years of classical piano in a children's music school. As part of improving my ability to jam, I wanted to train my understanding of chords beyond the simple triads. This is of course best done through deliberate practice, so inspired by this I made an app to drill chords.

The app gives me cards with different tasks; I have to make my guess and instantly get feedback. For example, identifying the type of chord from the sound:

It's not just multiple-choice interaction. Constructing a specific type of chord from a root on a virtual piano:

And for a slightly more complex exercise, listening to a chord for its relative function in the key:

There is even a dark mode that respects the system setting – this was the result of one prompt and unusually fast execution.

The development process is fun and surprisingly addictive – the dopamine hits of new features are frequent. And since adding is so easy and reliable, I am not reluctant to remove large chunks of functionality (people overlook subtractive changes). Same goes for testing out massive new features: I put it in a branch and close the PR without merging it if I don't like it (branch previews make this especially low-effort).

It is also very easy to prompt and Codex can reliably build what I ask; I could create a new type of exercise in a 1-sentence prompt (and I have).

Here are a couple screenshots from my mobile workflows. Recently my workflow is to just create Github issues on my phone and let the cloud agents create pull requests. I still do some development on my laptop, but a lot of feedback and execution goes through the Github mobile app:

What I've found more difficult though is the interaction design. For example, the on-screen piano. It barely works in landscape orientation with 2 octaves. But:

Is a virtual piano even needed, or would buttons suffice?
How to indicate a note you missed, versus a note you incorrectly hit?
What are appropriate keyboard shortcuts on desktop?
What do you do when you have to play Gm11 in a two-octave C-to-B keyboard?

You can get advice from an LLM for this, but it doesn't seem to work well for these types of decisions. But I am aggrieved by something that is not doing its job well, even if it technically functions, so I indulge in my compulsion to fix these. Even when I am the only user.

Here are some other questions I've had to tackle:

How to make it sound good? (Hint: not by using the synthesizer built into the browser.)
What's a good drill exercise?
How do I create the right pace of introducing new ideas so as not to overwhelm myself?
How to put these exercises into a motivational framework (like learning a particular song, or levelling-up the color of my improvisation)?

These are deep product questions and are the main bottleneck to making progress on this app. Which is amazingly powerful, and very different from even the state of agents twelve months ago.

What I am not concerned about here are the technical details. I make high level tech choices like what frontend framework to use, how to serve and host it Cloudflare Pages, or choosing trade-offs between sound synthesis quality vs download weight. But I have written or even edited zero lines of code on this project.

Success here will be having at least one active user: myself. It's a funny world we live in: making software is so cheap that it is worth custom making it for one person. Not 100% of the population yet, but for this project, not much of my technical ability was used.

If you're curious, here's the link. It runs in your browser without a backend, and is mostly optimized for mobile usage.