Artist Battle App: Take Two

After recently graduating from my Web Development course, I took it upon myself to take a look back at some of my college projects and improve on them where I could. I definely remember the Spotify musician battle app that I created near the beginning of the 2nd year of the course, and how I never really created it to my expectations.

Originally for this project, I was tasked with creating an app which would allow the user to enter two seperate names of artists, which would in turn access information on the two selected artists from the Spotify API, such as popularity, number of followers, and so forth, and display it for the user to review.

For the app, I was required to use JavaScript (as that was the coding language I was studying at the time), or, if we had to for some aspects, JQuery. If I was unable to access the Spotify API, there was a local JSON file with information on several artists that I could use instead.

For the version that I achieved while in college, I was unable to access the Spotify API to recieve the information on the selected artists, so I had to refer to the local JSON file. I used JQuery to code the retrieving aspect of the app, which was a little bit messily written, contained unneccessary repetition, and the design was not entirely what I aimed to achieve with my mockup and wireframe. Also, the app was not mobile responsive, but was more focused on functionality. I did manage to create an effective score counter with a simple if / else solution.

View the older version of the artists battle app here: Artist battle app



With this renewed version of the Spotify artist battle app, I aimed to resolve the issues I had with the older version. The first improvement I decided to make was to retrieve the information of the artist, rather than the local JSON file I used previously. I had a fair amount more experience with JavaScript, which meant, from the template provided to me for this project, I was able to read the code featured in it more effectively to figure out how to use fetch, a promise based method used for gathering information from a provided URL, and use a funtion to create an access token, and implement them both the recieve the desired information from the Spotify API.

fetch code

After that, I figured out how to display the fetched information on the DOM itself in an orderly listed style.

search example

Try as I might, I was unable to create a score counter function in renewed version of the app as I did in the previous version, as I was unable to access the information of the artists after they had been fetched, and was forced the exclude it this time. Finally, I vastly improved the design elements from the last version of the app, making this version mobile responsive and adding a background image to the DOM.

mobile layout

Renewed Spotify artist battle app code files:

Launched renewed version through Heroku: 

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s