Inspiration

Our inspiration was to see how we can enhance people's music experience as they're travelling around the world or simply walking and going about their day. Embedded in this idea of an enhanced music experience is having ample opportunity to be exposed to all types of new music, while celebrating and enjoying the tastes you already have.

What it does

There are two components to this app. The first is referred to as "On the Hunt". Inspired by the Little Free Library concept, the goal is for virtual "music libraries" to be setup at various geolocation hotspots around one's community. The app should be able to detect when a user is within an adequate radius of this library, allowing them to then view the libraries song contents and "check out" a song. The song contents are Spotify songs that have been "dropped off" by other local users. The idea is when you like and want to "check out" a song (i.e. add it to your Saved Songs playlist), you must contribute your own song recommendation. This replaces the song that you checked out from the library, thus creating a cycle of ever new music recommendation opportunities for users throughout their day.

The second is referred to as "On the Road". The idea is that users have lots of choice in styling a playlist for drives, and eliminate the stress of needing to "figure out the radio". Note these playlists also are intended to include podcasts. The feature accomodates any sort of drive, from 5 min to an entire 18 hour roadtrip. You can choose to have a "random" playlist built, that's based on literally nothing and can introduce you to far out music options. The other is "curated" which design a playlist based off an indicated mood. And finally, you can create a playlist off of certain genre(s). All of these allow for a smoother ride in the car without having to fumble or worry about what to put on next.

How we built it

We created a multi-page React web app to host our idea. It makes use of React components to create dynamic web content and allow different views for different routes. The app root/homepage is a simple title screen that prompts the user to login with their Spotify account. This grants them access to the another page with application's "On the Road" and "On the Hunt" features. There is cover art from album's in the user's own library to decorate the page. Each feature is also sponsored through a separate page. "On the Hunt" uses Google Cloud Platform's Maps Embed Api to show a view of the users current region. The Check-in button will then let them center in on the library location and give them access to library features. Ideally, the library contents would be able to be brought in and handled by a backend database and the Spotify API would be used to let people listen to songs and view a larger selection for which songs to contribute. Looking at the "On the Road" feature: this is a collection of React Components also connected to the Spotify API in order to create the playlists.

Challenges we ran into

Learning JavaScript and React. We were all completely new to the language and had never worked on a project with it before. A specific issue includes taking a long time to figure out how to interact with the Spotify API (we were still able to implement some features, like authentication, displaying album art from users' saved songs, and getting a user's currently playing song (this feature not showed in the demo)., being unable to constantly fetch a user's current location (could only do it one time to load the initial map) and figure out how to exploit location radiuses. Working together to bring in different components without conflicts

Accomplishments that we're proud of

It was all of our first virtual hackathon! (And some, their first ever hackathon!) Being able to successfully create and app and interact with APIs for the first time!

What we learned

React and working with APIs for the first time! How to bring different components together

What's next for SpotifyGO

Build out a stronger connection with the Spotify API and include more dynamic geolocating features. Also social network/user capabilities

Built With

Share this project:

Updates