Discover the colours of your music taste with Colourify
Role
Frontend Development, Serverless Computing
Tech stack
React, Netlify, JavaScript, Spotify Web API, TailwindCSS
Tools
Figma, Notion, GitHub, Visual Studio Code
Duration
4 months
Overview
While awaiting the release of my Spotify Wrapped at the end of the year, I love to seek out stats about my listening habits using apps like Receiptify and Instafest. Though these apps are fun to use, I have yet to find one that's more visual and makes use of the cover art of the user's listened-to tracks.
I'm a big fan of album cover design and how colours are used to convey a particular theme or aesthetic. In fact, the colour palette used in Willow Smith's <COPINGMECHANISM> is what inspired this project that I call Colourify - an online tool that generates a colour palette from the cover art of a user's top albums on Spotify. I thought it might be fun to see what kind of vibe the user's music gives off visually - a moody colour palette for the angsty indie listeners, a more vibrant palette for lovers of pop, or a fun mix of random hues.
Tech stack
This was my first time using an API so I decided to test the concept using plain JavaScript, HTML and CSS to see if it was possible to build the app without involving more complex technologies. However, I later decided to migrate to React as it was easier to manage states and components using the framework. I also decided on TailwindCSS for ease of styling and Color Thief (a popular framework for getting colours from images) to generate the colour palettes.
This was also my first time hosting a website publicly and that took some time to wrap my head around. I first planned to deploy with Heroku as this service seems to be the go-to for server-side hosting. However, after realising that Heroku appends an identifier to your subdomain (i.e. myapp-123456789.herokuapp.com instead of myapp.herokuapp.com), I decided to go with Netlify instead as I preferred the look of the URL (colourify.netlify.app was unfortunately unavailable so I went with mycolourify.netlify.app). Using Netlify required me to implement serverless functions as Netlify doesn't do serverless hosting, which was also a learning curve.
Receiptify, Spotify Profile and Spotify Serverless Auth were inspirations for the app's implementation, and Receptify and Instafest for the design. I referred to these throughout the project, kept track of my tasks in Notion, and used Figma to design the final colour palette image that users can download and share on social media.
Process
I broke the project down into two main tasks to make it more manageable: (1) get the user's top albums and (2) get a colour palette from each album cover.
1. Get the user's top five albums
The Spotify Web API has a request to get the user's top tracks or artists, but not their top albums. The only solution was to get the user's top tracks and group them by album to get an estimate of what the user's top albums would be. After testing this concept with the API, I noticed a few more limitations:
Grouping by album required requesting all of the user's top tracks.
To get an accurate estimate of the user's top albums, it was necessary to request all of the user's top tracks. However, since the Get User's Top Items request only returns a max of 50 items at a time, the solution was to recursively fetch the data, making use of the offset and limit parameters. This unfortunately increased the API response time, which is especially noticeable when requesting a more data such as when the user chooses the ”All time” time range. To somewhat combat this issue, I included a progress bar with a percentage (tracks fetched / total top tracks) to let the user know how long the request would take. The user can also abort the request by switching to another time range (”Last month”, “Last 6 months”, or “All time”) if they are frustrated with the response time.
Top tracks are ”based on calculated affinity”.
The top tracks returned by the Get User's Top Items request are based on “calculated affinity”, so they're not technically the user's most listened-to songs, which I noticed when requesting my top tracks and being surprised by some of the results. This is something I had to come to terms with because it's a feature of the API.
Identical tracks on different albums.
Some Spotify tracks have an album version and a single version, so the same song can exist multiple times but be treated as separate tracks by the API with different IDs. I tried to get around this by replacing the singles with their corresponding album version to ensure that the top tracks were in their album form to group them as accurately as possible. However, this required another request (Search for Item) to find the album version of the track by its International Standard Recording Code (ISRC), which resulted in a longer response time and a 429 error due to reaching Spotify's request limit. There was also the issue of some tracks being on both a regular album and its corresponding deluxe version, which I decided to ignore to limit the project scope.
Unwanted tracks
The dreaded ASMR track shows up on my “On Repeat“ playlist quite frequently, so I knew I would want to exclude these from the top tracks. The only surefire way to know if a track is ASMR is to check if “asmr“ is included in its genres. However, some tracks had no genres set so I opted to exclude all tracks that had variations of “asmr“, “Asmr“, or name. I also excluded singles and audiobooks, leaving the top tracks with an album type of album, EP, or compilation.
2. Get a colour palette from each album cover
Color Thief is a library that grabs the dominant colours from an image in RGB form. Although I contemplated writing this code myself since I noticed that some of the colours generated don't seem to be the most accurate, I decided to use the library as it is the most popular of its kind and fairly easy to use. After generating a list of the user's top five albums, Color Thief gets the colour palette from each album's cover art, and the user's Colourify Palette is displayed.
Conclusion
This was a big passion project for me so it was really fun to build and even cooler to see it in action (check it out at mycolourify.netlify.app). I built it in hopes that people would use it to share their colour palettes with friends on social media, but I have yet to promote it so it gains traction. I also have an idea for a similar app called Rainbowify, which would generate a 3x3 grid of album covers, each with a dominant background colour that matches each colour of the rainbow, inspired by the TikTok album rainbow trend. Can you tell I'm a big Spotify fan?
