Chord Learner: Feeling the vibe?
I wanted to practice identifying piano chords on my phone, so I spent an afternoon building a web app for it.
The Problem
I've been learning piano and chord identification is one of those skills you need to practice regularly. Most apps I found were either too complex (with theory lessons I didn't need) or looked terrible on mobile. I just wanted something simple: show me some highlighted keys, I guess the chord, track my progress.
Since I couldn't find exactly what I wanted, I decided to build it myself.
The Build Process
Started with React and Vite because the setup is fast and I didn't want to spend time configuring webpack. The plan was straightforward:
- Interactive piano keyboard
- Multiple choice quiz
- Score tracking
- Ability to select which keys to practice
The piano keyboard component turned out to be more interesting than expected. My first attempt was just a grid of buttons - it worked but looked nothing like a piano. I realized I needed separate layers for white and black keys to get the positioning right.
Black key positioning was surprisingly tricky. I tried calculating their positions mathematically based on white key widths, but after getting frustrated with the math, I just hardcoded the positions:
const blackKeys = [
{ note: "C#3", position: 6.0 },
{ note: "D#3", position: 13.1 },
// ...
];
Sometimes the pragmatic solution is better than the "correct" one.
Mobile Reality Check
About halfway through development, I tested the app on my phone and realized the UI was completely broken. The key selector component had 12 individual buttons that took up way too much vertical space, leaving barely any room for the actual quiz.
This led to a complete redesign of the layout. I switched the key selector to a dropdown and made the quiz buttons much larger for better touch targets. Interestingly, these mobile-focused changes also improved the desktop experience.
The Quiz Logic
The chord generation logic was straightforward - I defined chord types (major, minor, 7th, etc.) with their interval patterns, then randomly selected a root note and chord type based on the user's key preferences.
One bug I had to fix: initially the quiz would sometimes generate options that didn't include the correct answer. I had to rework the logic to guarantee the correct answer was always one of the four options.
Deployment
Once the app was working locally, I wanted to actually use it on my phone. I set up GitHub Pages with automatic deployment using GitHub Actions. Now every time I push to the main branch, it automatically builds and deploys a fresh version.
This was probably the most satisfying part - going from a local development environment to something I could access anywhere.
Reflections
Building this app reinforced a few things for me:
Test on the target device early. I almost shipped a desktop-only app because I waited too long to test on mobile.
Perfect is the enemy of shipped. The app works great despite having hardcoded positions and other "imperfect" solutions.
Build for yourself. When you're solving your own problem, you make better design decisions because you understand the use case intimately.
The final result is a clean, mobile-friendly piano chord practice app that I actually use. You can try it here once I push it to GitHub.
Sometimes the best projects are the ones that scratch your own itch.
Notes from the human
This blog post was generated by Claude. This app was actually vibe coded in less than 2 hours during dinner time. The vibe coding session plus my previous blog posts were used to generate this blog post.