Groovy Globe

Image of Interactive Map
GIF
GIF of Homepage

Inspiration

Music is a language that truly transcends borders. No passport, plane ticket, or hotel is needed to understand the culture and the human experience of those around the world. So, we wanted to capture that in our app, showing what the possibilities for modern music are and bringing a little bit of each country to our audience.

What it does

Our app integrates geography, music, and fun facts into one, tidy location. With the help of some APIs and datasets, we are able to present each country with its top songs, artists, and a brief description. Likewise, artists and songs can be further explored by simply clicking on each one, bringing you to MusicBrainz or Spotify. Not to mention, the songs are actually playable, so you can groove out with your friends without needing to travel all the way to Japan, Germany, or Australia!

How we built it

We built this app using HTML, CSS, and JavaScript for the front end and used python flask for the back end. We created API endpoints in Flask to grab specific data whether that be about the artists, Spotify songs, or the country. We made a call to those endpoints through the front-end javascript code in order to fetch the data and use it in the front end. We got data from Spotify API, REST Countries API, and MusicBrainz Data. We styled the front end using primarily CSS & Bootstrap whether that be to add a nicer scroll-bar or the effects for our buttons.

Challenges we ran into

One of the biggest challenges we ran into was finding the data that would allow us to create this app. The data on the web for music tended to only focus on Western artists and popular music like Billboard Top 100s. We want a diverse set of music and facts so that any country on the map can be represented! So a good amount of data cleaning was done for the datasets as well as finding good APIs that had the right query parameters available for us to use.

Accomplishments that we're proud of

We didn’t use a framework like Django or Angular and instead decided on wanting to learn Python Flask. We chose to do so because we knew we were primarily working with sending data back and forth to the front and back end with no need to save states, which Flask is known for. As a result, it made developing the project a bit more difficult since we essentially started from scratch with no pre-built templates or built-in database management.

What we learned

We learned that Flask is a great method for making API requests as well as sending data over to the front end! But, frameworks like Django would have made parts of this project a lot easier. We also learned how to do a bunch of cool UI designs.

What's next for Groovy Globe

The next step for Groovy Globe would be to link tickets to our application. Say you listen to a life-changing song and you want to experience it live in concert. Well, from there we could direct you to TicketMaster so you can purchase the ticket with ease based on the future concert dates of the artist.