Team #18 - TopCharts

TopCharts is a website that allows you to connect with trending music and podcasts from all around the globe using an interactive map.

Comment

Inspiration

The three of us all love music and podcasts. Coming from very diverse backgrounds, we all enjoy listening to content from a variety of places all around the globe. We wanted to design a platform where users can easily find new content from anywhere to enable cultural interconnectivity.

What it does

TopCharts allows you to place a pin anywhere in the world using our interactive map, and shows you the top songs and podcasts in that region. You then can follow the link directly to Spotify and listen!

How we built it

We used the MapBox API to display an interactive map, and also reverse GeoLocate the area in which the pin is dropped. We used the Spotify API to query data based on the geolocation. The app itself is built in React and is hosted through Firebase!

Challenges we ran into

Getting the MapBox API customized to our needs!

Accomplishments that we're proud of

Making a fully functional website with clean UI/UX within ~30 hours of ideation. We also got to listen to a lot of cool podcasts and songs from around the world while testing!

What we learned

How robust the MapBox API is. It is so customizable, which we love! We also learned some great UI/UX tips from Grace Ma (Meta)!

What's next for TopCharts

Getting approval from Spotify for an API quota extension so anyone across the world can use TopCharts! Team #18 - Ben (benminor#5721), Graham (cracker#4700), Cam (jeddy#1714)

Built With

Share this project:

Updates