A fun and productive way to discover new music on Spotify


Amplitude aims to encourage you to discover new music to prevent stale playlists.


After signing in with your Spotify account, Amplitude utilizes your favorite tracks to curate multiple recommendations. You have the option to add each encountered song to your "Amplist", a Spotify playlist containing all of your favorite tracks from Amplitude.

  • git clone
  • cd amplitude && npm install && npm run serve

Technologies Used

  • Vue.js
    • Front-end JavaScript framework
  • anime.js
    • JavaScript animation framework
  • Clarifai API - Color Model
    • Used to extract dominant colors from album artwork for usage in anime.js
  • Spotify Web API
    • Retrieve Spotify album art, top tracks, recommendations, and playlist modification permission

Bugs/Incomplete Features

  • Sometimes accidentally creates a duplicate playlist
  • Text color not dynamic (unlike background color)
  • Spotify playback within browser not implemented, requires different API
  • Other extraneous animations

What I Learned

As a HTML/CSS-type of front-end developer (and not a JS framework-type), I found it daunting getting started with Vue. But it slowly grew on me, and I can clearly see how powerful frameworks can make interfaces. I also wrangled with Spotify's OAuth for quite a few hours, but I was able to get through it. Overall, I'm satisfied with how much I learned at this hackathon while having a great time.

Share this project: