Creating a Full-fledged Spotify Playlist Generator

Seamless transitions from one song’s vibe to another

Jordan Wells
Better Programming

--

Photo by Alexander Shatov on Unsplash

Recently, I’ve wanted to better understand how APIs work. I’ve used some simple ones that will generate random colors for you, or give you a random dog fact (did you know that perky-eared dogs hear sounds better than floppy-eared dogs?). APIs can be a wonderful tool to get data for your web app, but almost all of the more sophisticated ones require authentication and authorization.

To this end, I decided to use Spotify’s Web API. It provides extensive documentation and allows you to do nearly anything a user can do on the platform; search for songs, create playlists, get recommendations, and much much more.

The app I made is called Vibesition, and it allows a user to make a playlist that seamlessly transitions from one song’s vibe to another. It's easily my favorite web dev project that I have ever made.

Try it out yourself at vibesition.jordantwells.com! All of the source code for it can be found on my GitHub.

Authentication using NextAuth.js

Searching for a song with Vibesition

NextAuth is a tool for Next.js that makes integrating with popular sign-in services such as GitHub, Facebook, Discord, and many more as simple as possible. I would highly recommend using create-t3-app to initialize your project, as it can setup much of the boilerplate of NextAuth for you.

The only changes you need to make is to the […nextauth].ts
file, to use the SpotifyProvider and give your app the proper authorization scope. The Client ID and Client Secret both come from registering an application with the Spotify Developer Dashboard. While you’re here, make sure to add something akin to “http://localhost:3000/api/auth/callback/spotify" to your Redirect URIs to ensure that you can sign in correctly.

Setting up NextAuth

In my case, I chose a scope that allows me to see the user’s email address, and modify their public playlists, just as much as I would need for Vibesition.

To actually consume this API, the authorization code needs to be exchanged for an access token which will be your ticket to use any endpoint within your defined scope.

More details about this process can be found on Spotify’s documentation. Note that this refresh token comes from the token generated by NextAuth:

Using the Spotify API

Note that the refreshToken parameter comes from NextAuth, and with my setup can be gotten by doing.

Getting the accessToken

Building the App

Selecting a song with Vibesition

Now that I had the power of Spotify’s API behind me (within the small scope that I defined), I could finally get to work building my web app.

I wanted users to be able to search songs to act as the starting and ending points for their playlist. To do this, I used the search endpoint to fetch the top 5 responses from Spotify search. Once a user selects a song, as shown above, it saves the Spotify ID in React state. This ID is used as a query for many of the other endpoints, so it’s a good thing to save.

Once a user selects a song it automatically generates a color based on the ~vibe~ of the song using the Spotify Audio Features endpoint. Specifically, I use a combination of the song’s danceability, energy, and valence (I don’t know what it means either) to determine the RGB values.

To determine what songs will be in the playlist, I use the Get Recommendations endpoint. This allows you to find songs based off target features, such as danceability, tempo, key, duration and many more. In this case I use a sigmoid-like interpolation to interpolate between the two song’s values of the audio features and get 10 songs with target values on that curve.

Finally, to create the playlist, I use both the create playlist and add items to playlist end points.

The results page for Vibesition

There were a whole bunch of other neat things added to this project as well. I used Framer Motion to give the entire project some much-needed life. I used HTML audio tags to allow users to play songs if they had a preview URL from Spotify. And of course, I used Tailwind CSS to make making the UI the simplest part of the process.

Conclusion

Overall, this was an incredibly fulfilling project to learn about using high-impact APIs. I hope to use many more in the future and incorporate them into my projects to make getting interesting data easy.

Thanks for reading!

If you’re interested in more of my projects or me, check out my personal website, jordantwells.com.

--

--