Part 1/2: Claude and I build a Spotify React app that ranks an artist's best songs in a histogram

I was intrigued by the "popularity" number in the Spotify API documents

I was recently looking at the Spotify documents and was intrigued by this section under “Get a Track” that mentions a popularity ranking. In the Spotify app, we can see the top tracks associated with an artist and how many times the song has been listened to, but not the popularity ranking.

I thought it would be fun to create an one page React app that allows you to search for an artist and shows you a histogram of their top 20 most popular songs.

Let’s ask Claude!

Ok, Claude has a plan. Now let’s ask Claude for the code:

Time to open a terminal and run the following prompt to create a new React app:

“my-app” is of course where the name of your app should be. I gave my app the very boring name of “spotify-histogram.”

Ok, so I opened the folder in VS Code and deleted a few unnecessary things. Then I navigated myself to the App.js file to copy-paste in Claude’s code.

This is how it looked at this point:

(don’t forget to make an .env file to plug in your Spotify API details)

Interestingly, Claude wanted me to use this Spotify-Web-Api-Node package instead of the regular Spotify API. I was okay with because it looked like the package was also able to pull popularity.

Next I installed all the packages and tried to start the React app. No luck yet.

I removed the word “total” from the code and then asked Claude if it could also add a search bar as I had asked for.

Ok great. So I carefully copy-pasted parts of the new code into App.js and refreshed the app on localhost:3000. There’s fewer issues in the console, so that’s good news.

A quick look at Claude’s code shows that he forget this line:

const [tracks, setTracks] = useState([]);

So I add that in.

It’s not pretty but here’s the app now! We will style it later (with the help of Claude of course).

I try a quick search for Rita Ora:

I copy the error from the console and ask Claude what this is about. He replies:

Claude clearly did not include this information before. Okay, so now I’m thinking, should I have Claude generate a POST request to generate an access token or should I have users login?

I think I’d rather have users just login:

Then I asked it to integrate this code with my existing App.js code (by pasting in that code): Can you add that code to my existing code? [copy-paste in existing code]

And it gave me new code back which I integrated into App.js.

Now my page looks like this:

However, when I hit the “Login with Spotify” button, it showed me this:

Turns out code Claude wrote me was mostly correct but I had to hardcore in the clientId and redirectUri to make the redirect work:

Ok I am reaching the length of this post, so To Be Continued in Part 2!