Rango's Dog House

This week I decided to challenge Claude Opus 4.1 to a coding challenge. The objective? Create a React application that renders an interactive circle of 5ths. I started by creating a scaffolding application using the Visual Studio React / .Net Core template. I then created an empty Typescript component called “InteractiveCircleOfFifths” and proceeded to throw down with the LLM.

The prompt:

Create a React component using Typescript that renders a musical circle of 5ths onto a canvas. The circle will consist of 3 bands, Major, Minor and Notes. Include the Major keys on the outermost band of the circle, Minor keys on the inside of the Major band, and Notes in the middle. Each key should render it’s slice of the pie in a different pastel color, and each band of that pie a slight variation of the key color. Do not use yellow or bright green.

The Major key labels will be the key itself, like F C G, etc. The minor key labels will also be the key name but in a smaller font since they’re inside the circle. The bottom label will be Gb/F# since it’s enharmonic. The key label will be the most pronounced text in each ring. Add text to the key, closer to the center of the ring indicating the three notes in the chord, for example CEG in the case of C Major. The Notes will be a label consisting the best notes to play in that key, which corresponds to the clockwise adjacent 5 keys. In the case of C that would be C G D A E. The label should render vertically in a small font since it’s the innermost band. Rotate the label so it’s always descending towards the center of the circle.

Outside of the circle add a ring of images showing a short treble musical staff for each key showing the sharps or flats. The sharps or flats will render on the staff lines left to right, and be placed on the staff lines according to their pitch. Add a label to each image indicating the count of sharps or flats. The bottom three key signatures will have two images showing sharps and flats respectively. Always make the staff background white, with the lines and sharps or flats in black. Make the circle interactive. Clicking anywhere on the circle highlights that key, the one before it and the one after it. Draw an outline around them and make them stand out by adding a low-opacity color to the overlay. Clicking a Major or Minor chord also causes the corresponding chord to be played, either using a .wav or .midi file. Make sure to use the proper inversions, so that C Major is CEG, A minor is ACE. Clicking on the Notes band will play the notes in ascending sequence.

At the bottom of the page render a fixed panel that displays either a piano keyboard or a guitar fretboard, best on a menu selection. For the piano, selecting a key on the circle will add an overlay of dots on the piano keyboard corresponding to the notes in the chord, either major or minor. Use a green dot for the root (C for C Major, A for A minor), and blue dots for the other two notes. The same note may appear more than once. Selecting a Notes band will render all of the notes on the keyboard, using green for the root, blue for chord tones, and soft orange for the other notes. Selecting a key on the piano keyboard will cause the corresponding key signature to become active in the circle.

For the guitar add blue dots corresponding to the notes of the chord. For the guitar, selecting a key on the circle will add an overlay of dots on the guitar fretboard. Use a green dot for the root, paying attention to the inversion between major and minor, and blue dots for the other two notes. Selecting a Notes band will render all of the notes on the fretboard, using green for the root, blue for chord tones, and soft orange for the other notes. The notes may appear multiple times on the guitar fretboard. Selecting a note on the guitar will cause the corresponding key signature to become active in the circle. When rendering the guitar fretboard, add a vertical line for the nut, effectively fret zero. Open strings should render left of the nut. Fretted strings should render to the right. Make sure the notes rendered on the fretboard are in the correct position. Previous attempts to render this resulted in the notes being off by one fret because of the ambiguity of the first fret.

The response:

Perfect! I’ve created a comprehensive interactive Circle of Fifths application with all the features you requested:

Key Features Implemented:

Visual Design:

• Three concentric bands with pastel colors (avoiding yellow and bright green)
• Musical staff notation around the circle showing sharps/flats on proper staff positions
• Proper chord inversions: C Major (CEG), A minor (ACE) as specified
• Enharmonic notation: Bottom key shows as Gb/F# with both staff versions

Interactive Features:

• Band-specific clicking:
  • Major band plays major chord
  • Minor band plays minor chord
  • Notes band plays the 5 notes in ascending sequence
• Highlighted selection: Shows selected key plus adjacent keys with overlay
• Audio playback: Uses Tone.js for chord and sequence playback

Piano View:

• Color-coded dots:
  • Green for root note
  • Blue for chord tones
  • Soft orange for other notes (in Notes band)
• Full keyboard with proper note placement
• Click detection for key selection

Guitar View (with proper fret positioning):

• Accurate nut placement: Vertical line separating open strings from fretted notes
• Open strings render to the left of the nut
• Fretted notes render between the appropriate frets (not off by one)
• Fret markers at positions 3, 5, 7, 9, and 12 (double dots)
• Color-coded dots matching the piano scheme
• All chord notes shown on the fretboard with labels

The application correctly handles musical theory including proper inversions, enharmonic equivalents, and accurate fretboard positioning. The guitar implementation specifically addresses your concern about notes being off by one fret by clearly separating the nut position and properly placing notes either as open strings or between the correct frets.

My reaction:

I was amazed at the thoroughness of the response, and impressed with the component source code. It rendered exactly as prompted, with some minor flaws. The Claude web app actually renders the component right alongside your chat, so you can inspect it with a web debugger and make changes to styles interactively.

The component:

The debugging:

After generating the initial component there was still a lot of debugging to do. I used Claude for that as well, synchronizing my Visual Studio copy with every iteration, synchronizing with my Github repo after every change. Here’s a sample debugging prompt:

Update the Typescript component.

1) Change the rendering of the Note band so the labels never go past 90 degrees, they are currently rendering upside-down for the bottom half of the circle. 2) Adjust the rendering positions for the sharp notes on the staff, the y-axis position is a few pixels too high. 3) Fix the rendering of the notes on the piano so every note on the keyboard that’s in the Major Chord, Minor Chord, or Notes array gets a dot. Currently some key signatures are missing higher notes. 4) Fix the colors on the dots. Currently orange dots are being rendered when the note is in both a chord and the notes array.

Claude’s response:

I’ll update the TypeScript component to fix these issues.

Fixing the Notes band rotation to prevent upside-down text

Adjusting the Y-axis position for sharp/flat notes on the staff

Now I need to fix the piano rendering to show all octaves of the notes and fix the color logic:

Fixing piano rendering to show all instances of notes and correcting dot color logic

Now let’s also fix the same color logic for the guitar to be consistent:

Fixing guitar dot color logic to match piano

Checking the drawPiano section to ensure we have the complete updated code

Let me check the complete Notes band section to verify the fix:

Checking the updated Notes band rotation logic

Perfect! I’ve updated the TypeScript component and created a new component file with all four fixes:

Fixes Applied:

1. Notes Band Rotation Fix

• Text in the Notes band now stays readable throughout the entire circle
• For the bottom half (90-270 degrees), text is flipped and notes order is reversed
• No more upside-down text!

2. Staff Position Adjustment

• Added 2 pixels to the Y-axis position of sharps/flats on the staff
• They now align properly with the staff lines

3. Piano Dots Rendering Fix

• All instances of notes across the keyboard now get dots
• The code now properly iterates through ALL white and black keys
• Handles enharmonic equivalents (F#/Gb, C#/Db, etc.)
• Every occurrence of a note in the chord or notes array gets marked

4. Color Logic Correction

• Fixed priority system: Root (green) > Chord tones (blue) > Other notes (orange)
• Orange dots only appear for non-chord notes when in “notes” mode
• When in major/minor mode, only green (root) and blue (chord tones) appear
• Consistent color logic between piano and guitar views

The application now properly displays:

Orange dots: Only appears in “notes” mode for notes that aren’t part of the chord

Green dots: Root note only

Blue dots: Chord tones (non-root notes in the chord)

The deployment:

After an entire day of debugging the application was ready to roll out. I initially tried to deploy to Azure, and met with a litany of deployment failures. However, using the job logs provided by Azure, over the course of several hours I was able to debug those failures with the help of Claude and get the application deployed on the Azure websites web app hosting environment. It was even deploying from my Github repo. I was using the Free tier, so when it came time to use my newly registered domain name I was faced with a stiff upgrade fee of $60/month for the Basic tier. That was too rich for my blood, so I found an alternative hosting provider. For $10 a month Winhost provides .Net application hosting. After downloading their Publish template I was able to publish directly from Visual Studio without any hassle.

You can view the deployed application at InteractiveCircleOfFifths.com.

My feedback to Anthropic:
This is incredible. My first shot at the component was 90% complete and accurate. A few hours of revisions and debugging were enough to bring this entire project over the finish line. The refinements were really impressive. Claude demonstrates contextual awareness on a massive scale and shows you the chain of reasoning behind its changes.

Note that a few times Claude generated component code that wouldn’t render. I eventually had to paste back from Visual Studio into Claude to revert to a prior version of the component. Also, Claude attempted to provide a full Html solution that was unnecessary and failed to render every time due to dependency errors with Tailwind.

The only deal killer in the entire process was cost. I had to bump up to the $100/month plan and even then quickly exhausted my quota. This seems steep for 1200 lines of code. I’ll have to downgrade after the month is expired.

Your feedback to me:

This entire process took only three days from inception to deployment. Early feedback was generally positive, but people don’t care for the quality of the tone generator sounds. I will correct that in a future release by converting from the tone generator to using samples. This will take some time to code and record all the samples for both guitar and piano. I have also had a request to add a ukulele visualizer. Please let me know what else you’d like to see in the application by commenting right here on the blog.

Thank you for using the Interactive Circle of Fifths. I look forward to your feedback!