In January 2022, I took a DJ class and had a blast creating my first mix. However, I quickly realized that the mix didn't sound great to others due to the differing beats of the songs.
To try to help out my DJ process, I built a Spotify library explorer that matches songs by BPM using the Spotify API.
User Experience
The user experience is divided into three main steps: selecting a seed song, building a setlist, and exporting to Spotify.
In the user flow, I priortized the user's ability to browse instead of search + receive songs.
01. Seed Song Selection
First, the user picks a seed song. This song determines the BPM of the playlist. BPM stands for beats per minute, and it is a measure of the tempo of a song. In DJing, it is useful to match the BPM of songs to create a smooth transition.
To help the user browse their library, the app displays a user’s recently listened to tracks as suggestions, or the user can search for a song. This song sets the standard BPM (top left corner), and all other songs recommended are matched to this BPM.
02. Setlist Building
Next, the user enters the playlist building mode. They can build a playlist by clicking on album covers to add them to the top playlist bar.
By clicking on “NEW SECTION” in the bottom right, a user can create a new section of potential songs to choose from. Each section type is either:
- Genre → all songs in a given Spotify genre (generated by Every Noise)
- Artist → all compatible songs in an artist’s discography
- Playlist → compatible songs in a user’s saved playlist
The sections separate the chunks of songs into different categories, so the user can compare + contrast different options.
03. Exporting to Spotify Library
Once a user finishes building a playlist in the top bar, the playlist can be exported to the user’s library. Then, the user can start from the beginning with a new session.
Video Demo
Unfortunately, the Spotify API team rejected my request for an app extension because it's a "hobby project". If you would like to use it, I can add you to the list of approved accounts!
Below is the video demo I submitted to try to get it approved.
Tech Stack
Frontend: React
Backend: Flask
API: Spotify API
Deployment: Heroku
Project Type: Fullstack