Spot A Key website working example.
Spot-A-Key was designed as a platform for aspiring DJ's and music lovers to find a playlist from Today's Top Hits that matches their favorite music key! Especially for our team, we love to listen to music in our free time when we're not coding!
What it does
The user inputs a musical key and a mode (major or minor) on the website, and it returns a table of songs with the same key and mode from Today's Top Hits Playlist, with the album art, artist name, and track name. Given a musical key, the Spot-A-Key web server parses through Spotify's Today's Top Hits playlist (The Hottest 50), and provides the client with a json containing songs matching the parameters specified by the application. This is done by having the client make a HTTP GET cross origin request to the backend flask server.
How we built it
- HTML,CSS, React to create the website
- Flask to create a local server
- Spotify API the Python version of the Spotify API, called Spotipy, was used to access track information (artists, track names, playlists, keys, modes) to output our information.
Challenges we ran into
Our team came to ZotHacks to challenge ourselves and learn, and that definitely happened! There were many firsts over this weekend for our team.
- We had a very tough time with CORS pre-flight requests, until realizing there was a simple solution.
- None of us knew how to use Flask; It was difficult to run our Python program (done on Idle) on Flask from the backend to merge with the front end.
- Initially, we struggled to use the Spotify API because it required log in credentials that we were unaware of. We watched multiple youtube tutorials and read the API documentation where we finally resolved the issue.
We are proud that we finally synced the front and back ends. We learned a lot about react.js as well as many of the principles that are behind web development. Overall, we polished all our skills in interacting with APIs and using HTML/CSS.
What's next for Spot-A-Key
We still have a lot of ideas to implement in the future for Spot-A-Key. One of our ideas is for the user to input a song, that automatically reads its features such as danceability, tempo, instrumentalness, and liveness, so that the user has many more features to choose from. Another idea is for the generated playlist to be directly added to the user's account where they can immediately listen to it in their free time! Instead of just the Top 50 Hits that we chose to parse through, the user could also select what playlist they would like to use instead.