Connecting with people that have common musical tastes, especially those that are niche, is an awesome feeling that more people should feel. vibes

What it does

SyncUp takes your song and artist data from Spotify and runs a proprietary similarity function that weights song and artist popularity inversely to an overall score, so as to discourage matching people based on music everyone listens to. The algorithm focuses on trying to match you with other users that enjoy the same niche songs and artists.

How we built it

Front-end is in React, matching algorithm is in Python, server is Firebase. GitHub pages? The front-end is written in React and the website is hosted on GitHub pages, and it allows users to log in with thier Spotify account. It sends the users' Spotify data to a Google Cloud Firestore server. After the database has sufficient user data, we run the matching algorithm, which is written in Python and pulls data from Firestore. We then repopulate the Firestore database with users' top matches. The front-end then displays these matches.

The similarity function is an inverse-sigmoidal function that we've tuned to discount songs and artists with a high popularity scores, as given by the Spotify API. Every matching song and artist that two users share is added to a mutual similarity score, weighted by the Spotify popularity score as well as whether the song or artist is in the users' top tracks and artists.

We designed mock-ups and branding in AdobeXD, switched to Figma because it allowed further collaboration between members of our team. We wanted our UI/UX to flow well with the Spotify aesthetic and user-experience.

Challenges we ran into

  • Chaining asynchronous post requests to retrieve paginated data
  • Migrating from Node.js to React
  • It was hard to design an MVP that feels complete and cohesive because of time limitations
  • Difficulty hosting a React app on Github Pages

What we learned

  • Our original front-end prototype was in Node.js, so we learned a lot about that before pivoting to React.
  • Working with Spotify API
  • Making post requests

Next steps

  • Recommending similar groups instead of just individuals
  • Improving the similarity metric by tuning the sigmoidal function and adding to the data
  • Showing a match's top shared artists and tracks
  • More user statistics like uniqueness
  • More involved UX like recommending a concert to a match
  • Facebook integration
Share this project: