a chronicle of my coding discoveries

Using the Spotify API

Last week, I completed my final project at Flatiron, a React-Redux app with a Rails API.*

My team decided to also make use of the Spotify API for our app, PlaylistPal, so that visitors could make playlists using the very cool metrics that Spotify stores about each of its songs, including danceability, valence, and amount of vocals.

Part 1: Requests without Authentication

Early into our project, we discovered that the Spotify API gives some information, such as an artist’s top ten songs, without any authentication. To get top ten tracks, we first took the user input of an artist’s name and made a get request for Spotify’s data on that artist.

From there, we parsed the unique artist id from our response, and made a second request to Spotify, this time returning the top ten tracks.

After that we could parse through the response from Spotify and grab any data we needed, including the track name, preview URL, and album title.

Part 2: Requests with Authentication

Making authenticated requests was quite a bit trickier, but after a few hours of fiddling we made our first successful request. Our first step was registering our app with Spotify in order to get our client secret and client id. These are simply strings of random letters and numbers that must be put in a secret file, so that they aren’t stored on Github and made publicly accessible.

In our app, we created sliders for users to select the danceability, emotional valence, etc, of songs that would be returned to them. The Spotify API requires requests to include an artist id or musical category along with the danceability and valence parameters, so we prompted users to enter an artist name before letting them manipulate the sliders and send a request.

In order to make our request for song recommendations to Spotify, we first had to get a token from Spotify (essentially another secret code!) using our client id and secret. The header of this post request contains a base 64 encoded string with the id and secret.

The returned token is then put in the header of the get request to Spotify, which has a url that includes the formatted query containing the artist id and other parameters.

Finally, the Spotify-recommended tracks are returned!

I should also mention that sites can use OAuth to authenticate individual user accounts with Spotify in order to get data such as albums saved to the user’s account or post tracks to a playlist. Check out the Spotify API docs for more info.

Overall, it took quite a bit of legwork to figure out how to properly format our requests to Spotify, but once we got it set up, we had tons of fun playing around with the data Spotify returned to us, and it added tons of value to our project.

**(For those who don’t know what React and Redux are, I’ll explain further: I built an app that uses the Javascript library React to build page components (such as a nav bar), along with the Redux framework, which manages the state of the application (such as the last item that was selected from a list). User information is stored in a Postgres database in my Rails API, so when I need to update my database, I make a post request from the React-Redux side to the Rails side. When I need to grab information from my database, I make a get request to Rails, which renders JSON, and allows me to parse the data I need.)