When you are with a large group of friends, you often have no say in the music being played. Your suggestions are lost in a sea of other suggestions and the guy with control over music usually gets the final say no matter what. So what if we made an application that could play music that everyone can enjoy? That’s where the idea for Melody Maps was born.

What it does

You start by connecting the app with your Spotify account, and then you are brought to a Google Maps screen that shows where you are and all the sessions around you. The sessions are essentially different machine learning models that are trained based on people who have been within the range of each session. Sessions nearby will automatically be trained on your song preferences. You can listen to song lists that are generated by any session, no matter how far it is. Finally, you can create your own session, and define a range from just your apartment to your entire college campus.

How I built it

We started off by building a Node.js and React.js application. To login, we used Spotify Oauth 2.0 to make it easy to work with Spotify’s web APKs. We used the Google Maps API with React.js for the main part of our interface which consisted of finding and creating sessions. However, we realized that exporting our machine learning model from Python to the Node server would take a lot of time, so we decided to create a Flask server dedicated to generating recommendations. To create our machine learning model, we implemented a collaborative filtering algorithm from scratch in Python using Numpy and Pandas.

Challenges I ran into

There were several big challenges we ran into. The biggest was creating our own recommendation engine. We originally planned to use Spotify’s recommendation end point, but we found out it could only recommend songs based on a maximum of 5 seed songs. We would need song recommendations based on 100’s of seed songs. Of course, the best solution was to build our own. Another challenge we faced was writing React can sometimes be harder than machine learning. Making our frontend look like how we envisioned took a lot of work, Additionally, we ran into difficulty creating circles on our map. We overcame this by implementing Polygon structures instead.

Accomplishments that I'm proud of

We were proud of how are UI turned out. We were also pleasantly surprised when our machine learning model gave fairly decent recommendations. Finally, getting 3 servers communicating with each other was also no small feat. As a side note, jamming to our own application while working was pretty cool!

What I learned

We learned a lot of React.js and about collaborative filtering. We also learned how to deploy a server on Google App Engine, which will no doubt be useful for the future.

What's next for Melody Maps

Improving the machine learning model is the first issue. We also need to make our app more robust and include things such as form validation and error handling. Finally, we want to make this a mobile application instead of a mobile web app.

Share this project: