Web Dev

Spot the Difference

Built With
  • AWS Lambda
  • Python
  • Vue.js
  • Spotify
Created With

A retro-inspired web app to compare your Spotify history with your friends, built with Vue.js and AWS Lambda.

Build at hackSheffield 6. Winner of Best Hack 1st place, Domain.com Best Domain and IBM Best Serverless.

Our hackathon submission video. This video is slightly out of date as we've made some improvements since submission.

Technology

Spot the Difference is a Vue.js frontend app which hits an AWS Lambda running Flask, orchestrated with Serverless. The lambda uses a DynamoDB table to associate Spotify API tokens with a shareable three word code.

Visualisations

The app pulls top artists and tracks over the short, medium and long term from Spotify’s API, and produces some visualisations using the data. You can find a detailed description of each visualisation in the project’s README.

It also predicts a track for each person the other should like, using TF.IDF ranking. It will never suggest a track Spotify tells us you’ve listened to, but the API only returns a small proportion of tracks and the prediction method is reasonably accurate, so it may suggest a track you already like.

A graph of artists with pink and blue nodes linked by white edges

A bar charts with pink and blue bars showing interest in musical genres

Two profile pictures with a suggestion of a song to try underneath them