Before I was introduced to Spotify, I listened to all my music on the iTunes app. One feature I enjoyed was the 'Recently Added' playlist, which iTunes auto-generates based on the top 20 tracks you most recently added to your music library.

I wanted to recreate this feature on Spotify as Spotify doesn't currently offer this feature. I was excited to find out that they have a really well-documented API for developers to use.

The Recently Added playlist on the iTunes app.

The Recently Added playlist on the iTunes app.

With this, I set out to build a web app that can display a user's most recently added tracks, and create a playlist on Spotify in the user's library.

The biggest challenge I faced building this app was figuring out how the Spotify authentication worked. After lots of debugging and trying out multiple alternatives, this is the auth solution I landed on: 1) user authenticates Spotify via my app, with my developer key, 2) user is redirected back to the app with a fresh code in the url, 3) fetch code from the url, and use it to make requests to the Spotify API.

After figuring out the auth process, all that was left to do was building the UI of the generated playlist. I played around with the UI by mocking it up in Adobe Illustrator, to find a simple way of displaying the album covers, and title of the tracks in the playlist back to the user.

Trying out different UI layouts with Adobe Illustrator.

Trying out different UI layouts with Adobe Illustrator.

I added in CSS animations for mouse interactions over the album art, to make the site more fun, more interactive. I also later added in a feature for users to customize the length of the playlist, rather than 20 tracks which I had originally set by default. Since the limit of tracks that can be fetched from the Spotify API is set to 50, the user has the option to build a playlist of between 2 - 50 tracks.

Adding the option for users to customize the playlist length.

Adding the option for users to customize the playlist length.

With more time, I'd like to play around with the design of the app UI more (such as making it resemble the Spotify app UI color scheme, for example). There's still more I can do to refine the authentication process and security of the app. Though I don't expect more than a handful of users per month, it would be good to consider the scalability and security of the app should more people start to use it.