We all have songs we love. Probably you have thousands of music tracks you "liked" on streaming services like Spotify, but it is not trivial to pick just the right song at the right moment. You need songs without lyrics when you have to focus, and high energy songs when you work out. Spotify provides great metadata for its catalog, so I thought I should be able to implement a nice & easy interface to filter private playlists.

What it does

This web application allows users Spotify playlists by each track's metadata like tempo or loudness.

How I built it

This is a single page web application built with React and Redux.

Challenges I ran into

I could not find any javascript wrapper for Spotify API which provides rate-limiting feature. When a user tries to load up a long playlist (>200 songs), Spotify responds with an error code. It is possible to implement a rate-limiting feature by myself, but I had no time to finish it.

Accomplishments that I'm proud of

"Hacky Birthday MLH" was a 24-hour hackathon, and I am glad that I could submit something before the deadline!

What I learned

I learned a lot about "OAuth Authorizaiton Code Flow with PKCE" during this project. This particular auth flow was useful for client-side authorization without secret.

What's next for Spotify Filter

Potential improvements:

  • More metrics & metadata to filter tracks with.
  • Allow users to filter public playlists to suit their needs.
  • Better styling with CSS.

Built With

Share this project: