beats.me

• 

  The website interface

• 

  Authenticating

• 

  Processing the data

• 

  Visualizing the data

Inspiration

Music is a universal form of human connection, but describing personal taste to someone else is surprisingly difficult. Our project streamlines the process by graphically visualizing an individual's music preferences.

What it does

The application connects to a user's Spotify account and obtains information on the artists and songs the user listens to. Then, it filter's through that data, and creates a two-dimensional bubble chart that groups together the user's tracks by artist, danceability, and instrumentation.

How we built it

We utilized Spotify's API to access user playlists and track information, which was then processed on metrics like artist frequency, song energy, and instrumentality. This was accomplished by a Meteor.js backend utilizing OAuth2.0 authentication in order to allow users to log in with their Spotify accounts. We then used Chart.js to create the visual representation of the output. The front-end was built using React.js and routing was done using React-Router.

Challenges we ran into

Spotify account authentication proved to be a major difficulty, as the amount of resources available on-line for support, especially those relating to Meteor.js, are quite scarce. In addition, several of our team members ended up learning React.js for the first time, and thus, creating the dynamic components for the graph took a lot of trial and error.

Accomplishments that we're proud of

Being able to successfully authenticate users' Spotify accounts, creating a beautiful front-end, and creating a functional, intelligent React component for the chart were all accomplishments we're proud of!

What we learned

We learned how to implement OAuth2.0 authentication, Chart.js using React, and the entire Meteor.js framework in general.

What's next for beats.me

We plan to add functionality allowing multiple users to access an online "party." Then beats.me would analyze each individual's musical preferences and compare them to the rest of the group in order to automatically generate a party play-list.

Built With

• chart.js
• css
• heroku
• html
• javascript
• meteor.js
• node.js
• react