Jam Map
Have you ever wondered what songs play at the same tempo? What about if there any similarities with your favorite song and another in a whole different genre? Well, that’s what my team members and I set out to accomplish with, Jam Map. We developed this application to allows users to search for songs that meet their exact parameters to make a playlist with songs that are similar, or to find that one song that accomplishes what their heart desires. Jam Map allows you sort by a range of BPM, a year range, the country of origin, Genre, and the original key the song was recorded in.
FUNCTIONALITY:
So how does this beautiful application work? Well, this application was built using the Bulma css framework, along with HTML and Vanilla JavaScript. The JavaScript uses two API calls: Getsongbpm and iTunes in order to retrieve the song data along with album cover art and song snippets. With getsongbpm we had to create a function to fetch the data with the correct endpoint reference which was the tempo since the functionality is not meant to search for a specific artist or song, it is a discovery tool of new songs. When we have song, data retrieved from getsongbpm, the results are then sent to a function that filters these songs to only return the songs that meet ALL the user parameters. These preferences are also saved to the local storage of your browser as well as your results for future reference. Once we have saved those results to the local storage and variables for the script.js file, we then use the iTunes API to get the album cover art and link those songs to the snippets of the song. The iTunes API call had to use ajax in order to work properly compared to the getsongbpm call which just used a normal fetch.
The Bulma css framework was able to create the card we used to display the songs and have them separated evenly between one another. As well allow us to create a side bar for the search preferences that doesn’t interfere with our results section. This framework was able to let us make a clean and appealing application for the user to make them come back and spend even more time searching through songs.
If you are curious to try this application out for yourselves, check out this link below to our deployed site.
https://pdpco.github.io/jam-map/
If you are curious to see how this application was built, the link to the code repository is linked below as well.
https://github.com/PDPco/jam-map
If there any comments or questions, leave a reply to this blog post or head over to the GitHub page and leave a comment there. Any feedback is appreciated as this is a new application and still having growing pains.