Articles in this series:

• Building an SVG Circle of Fifths
• Adding Interactivity to the Circle of Fifths
• Extracting and Publishing the Circle of Fifths Component

So, recently, I've been playing more guitar, and having a lot of fun with it. I even started lessons again for the first time in over a decade^[1]. I've been learning some music theory stuff that was new to me, and this got me thinking about an old project I worked on a few years ago. It's a little music theory 'dashboard' that shows you the various chords that compose a key. In fact, I've built small versions of this idea twice before:

• Chord Thing - a simple HTML / Vanilla JS app that presents the diatonic chords of a major key.
• Theory Dashboard - a React app, using Tonal, which can display both major and minor keys, and also can show secondary dominant chords.

I've learned some new music theory in the years since I built those sites, and also am a somewhat more decent web developer. So I decide to start over, and build a new version with some extra features. Of course, because I just can't help myself, what might have been a quick, simple, fun little project turned into a much bigger effort, which forced me to learn a whole bunch of new skills and tools to make everything happen.

Luckily for me, I have a blog now, which means that I get to squeeze some good old fashioned internet content out of my struggles. You're welcome.

As I started working on writing up the project, I realized that I had way too much material to cram into one article, so I've decided to divide things up into a series of posts. My goal with these posts is twofold. I hope to share some of the things I'm learning over the course of this project from a tech perspective. We'll touch on a few different topics like SVG, CSS, designing React components, and even a little music theory.

However, what I think is the more interesting theme of these posts is a description of how I approach learning and problem solving. While some of the topics we'll cover are things I'm familiar with, others were completely new to me. I've been having a lot of fun hacking on this project, and I hope you'll enjoy this series of posts!

Want to make sure you see all the posts in this series? Subscribe to my mailing list via Substack and you'll be the first to know when a new post drops!