-
Our app features a manual country selection feature and a fun guessing game
-
The map featuring celestial body tracking is the highlight of our app
Inspiration
We were excited to learn about the Spotify API, and as a group, we are interested in a wide range of musical styles, from many different areas of the world. We thought it would be exciting to have a way to broaden our musical horizons, and thought that following a celestial body's journey around our globe would be a fun way to do it.
What it does
Users log in to their Spotify account via OAuth. From there, they can "follow" a celestial body of their choice, which will add music from various regions around the world to their queue over time. They can also select a particular country to listen to music from, and play a fun guessing game, which plays a song from a random country and asks the user to guess what region the tune is from.
How we built it
This app is built with an NodeJs and Express backend and a react front end. It is hosted on a Oracle server running a Ubuntu VM. The server has a NGINX server running which reverse proxies the requests to the Express backend server. Authentication is done though Spotify OAuth2.0 which asks users to login to the app using their Spotify credentials. Once they do this and authorize access to the app, an access token is used to make user specific API calls to the Spotify API. To display the map, a library called OpenStreetMap is used and the ISS API is used to get the coordinates on the Earth relative to the space station. To get the name of the country a coordinate is mapped to, OpenWeather's reverse-geocoding API was used. We use these country codes for querying Spotify playlists from each region.
Challenges we ran into
The biggest challenge we ran into was using the authentication API from Spotify. We ran into a hurdle following their documentation, and our mentors were equally stumped. We were able to find a workaround for this issue by redirecting one of our backend endpoints to itself, in a pseudo-recursive configuration. This allowed us to circumvent the strange circumstances surrounding our API dilemma, and we were able to continue using the API as expected from there.
Accomplishments that we're proud of
We successfully managed to implement OAuth alongside incorporating the Spotify API. Incorporating these two technologies felt rewarding because both of these things have been hot topics just in terms of technologies. People have made such cool applications using the Spotify API in the last couple of months, and OAuth has been a relevant technology for the last couple of years, which has always intrigued us in terms of how it really works. We are also proud of our usage of the ISS location API and how we were able to represent the ISS in motion on the web application. Additionally, we had to write a wrapper for a slightly messy API that was hard to work with, which allowed us to more easily obtain information about other celestial objects, such as the sun, the moon, and the planets in the Solar System.
What we learned
This was our first introduction to the Spotify API, and to OAuth in general. We learned how to handle redirects to an external application for authentication, and bolstered our skills in working with proprietary APIs. We also learned a lot about the orbital patterns of various celestial bodies, and broadened our musical horizons along the way.
What's next for Music Around the World
Music Around the World hopes to continue creating an interactive way to explore the cultures of the world. We feel that music is one of the few things that can bring people together and enjoyed making this tool to make exploring music of the world fun and easy. Some future integrations we hope to achieve would be to add more celestial objects to track like Mars or maybe aircraft as well.
Log in or sign up for Devpost to join the conversation.