City Soundtracks

• 

  The playlist generated by users

• 

  Highlight of a county when cursor is hovered over

Inspiration

The inspiration of our project was our interest in traveling. With traveling, the culture in many places are so different and diverse with one another. People usually connect with other cultures through food, but not usually with songs. You may know songs that come from many places, but what do users from that place listen to? Do they like the songs originating from their region, or do they like venturing out and listening to various different genres? These were questions we were intrigued about and wants to solve.

What it does

Our application allows you to choose a county in California and see user generate playlists that represent their county. As you enter our app, you are greeted with a map and you are able to choose a county within California. Once you choose a country, you have the option to add to the playlist to your spotify or even add songs the user feels really represents the county. We also implemented a voting system in order to get user feedback on if a song really represents the county or not.

How we built it

We utilized the Spotify api and leaflet api to gain the resources for music and geographical location. For our programming languages, we had many drafts and were thinking about using Python, but ultimately decided to use Javascript for both our backend and frontend. We also used Node.js and the Express framework to help create our project.

Challenges we ran into

The main challenge we ran into was implementing a function to obtain a access token for the spotify api. With Spotify api, they are very secure and you need an access token every hour to utilize their application. Once we obtained our access token, we still had the issued that it expires every hour and need to create functions to repopulate tokens every hour or whenever it expires. This definitely caused us to be behind as it took us much longer than we expected to get an access token for Spotify's api.

Accomplishments that we're proud of

The accomplishments we are proud of is the frontend portion of our project. As beginner hackers, we were more familiar with backend, but our frontend turned our really well. Even though there are some flaws, the overall visual of our project was very much what we were aiming for.

What we learned

The main thing we learned is the process of a hackathon as it was most of ours first hackathon. We learned that getting stuck on one problem results in us falling behind.

Built With

• express.js
• javascript
• leaflet.js
• spotifyapi