Skip to content
A fun and productive way to discover new music on Spotify
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.browserslistrc
.eslintrc.js
.gitignore
README.md
babel.config.js
package.json
postcss.config.js

README.md

Amplitude

A fun and productive way to discover new music on Spotify

Brief

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

Usage

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 https://github.com/ptumb001/amplitude.git
  • 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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.