Background

Music is a huge part of my life, and after seeing Spotify's 2017 Wrapped yearly listening recap, I wanted to go deeper into my most played music over the history of my Spotify listening, but there was no way to view this data. Scratching my own itch, I dug into the Spotify web API and learned a bit of NodeJS to build mytop50.com.

Process

Design

The project began with a rough UI mockup in Sketch to capture the design intent and the overall app concept. I knew that since most users would be viewing the site on a mobile screen, I needed to make mobile-first design a priority from the beginning. remove I'm a big fan of Spotify's design system and wanted to maintain consistency with their UI so that MyTop50 felt like a familiar extension of the native Spotify app. This informed the layout and choice of colors, with white text on a dark background providing a beautiful and utilitarian contrast. Spotify's signature green was used for call-to-action buttons and to show the active filter buttons. For typeface, I chose IBM Plex Sans, a personal favorite that I find to be crisp and balanced, similar to Proxima Nova used in the Spotify UI but with a bit of it own sharper character.

Development

I then dug into the Spotify Web API to understand the authentication steps and API requests needed to pull a user's top artists and tracks. After browsing the code for a few sample authentication apps, I found that building on NodeJS with ExpressJS would be a solid approach to start. Although I would have loved to show more listening data, Spotify only provides up to the top 50 artists and tracks over three different time intervals, 1 month, 6 months, and all time. Spotify's API also provides recently played tracks in chronological order, so I added that as a feature as I will frequently forget to save a song that I liked and then had no way to find what I listened to an hour ago. remove User feedback led me to add an Add Top xx to Playlist button which allows users to trim their top tracks over the selected time period from top 50 to top 5 and add these as a playlist to their library.

Deployment

For the sake of simplicity, I deployed the app on Heroku which will build off of git pushes and automatically handles all SSL certs.

Outcome

Music is a universal language that transends borders, races, and cultures, and an individual's Top50 is a unique expression of themself at a given time. After my friends and I loved using the app, I wanted to share it with the world. Over 800 Spotify users from 55+ countries have used MyTop50.