Spotify Battle Website Project

Tracking popularity of different styles of entertainment is a huge thing to do for many people. And thankfully, Spotify has most of their data out in the open. This project is a way for people who love that kind of data, and even those who don’t, to have an interactive game to guess which artist has more monthly listeners on Spotify.

There are a total of 50 artists to choose from. Ranging from some of the most popular currently, some of the legends of decades past, or even lesser known acts who have developed “cult followings”. It is a bit tricker picking who has more monthly followers as it depends on a wide arrange of factors. I tested this game so many times for bugs and I still got some answers wrong!

The design was to trying to mimic Spotify’s signature style on their web and mobile applications. While still feeling different enough to know that you aren’t on their website.

User Experience (UX)

• User stories

  • First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and what I do whilst I am there.
  2. As a First Time Visitor, I want to be able to easily navigate throughout the site.
  3. As a First Time Visitor, I would like to have clear instructions about how to play the game and clear instructions of the score, high score, and how to reset the score if needed.
  4. As a First Time Visitor, I would like the site to be aesthetically pleasing and responsive no matter the device I am viewing it on.

  • Returning / Frequent Visitor Goals

  1. As a Returning Visitor, I want there to be excitement in the game and make it a little challenging.
  2. As a Returning Visitor, I want a visually pleasing site to return back to.
  3. As a Returning Visitor, I would like the game and site to be viewable on each device I chose to use.

  • Design

  • Colour Scheme

  
  
  I thought it best to use the Spotify colour theme that runs in their app and website. That is a green hue of #1ed760, black background of #000, charcoal black/grey of #333, and the text is generally in white(#fff) or the previously used green.

• Typography

- #### Imagery

3 Gifs are from GIPHY and are clickable to the site. There is a competition.png that was downloaded from FlatIcon.com And the battle.jpg is provided from a free trial on Shuttershock. And the loading.png was just made in photoshop. Each artist photo is taken from their own Spotify account. It is their cover photo when you click to view their profile that is the one that appears in the game.

Basic Wireframes

• Home Page And Battle Page Wireframe - View

Features -

• There is a playlist that features the current top 50 songs in the world on the home page. There is also some supporting text that explains a little bit about monthly viewers and Spotify numbers.
  

• The Battle page or the game has the feature that when you get a point it is counted and you can play and try to get a high score, and it remember your high score. But if you want to forget your high score you can press the remove high score button and it will start new.
  

• When you hover over the Artist photo in desktop it will turn slightly opaque and if you hover on the artist name it will display a charcoal background and green text colours to show that it Is ready for you to pick. If you click on the artist name in mobile it will do this function.
  
  

• When you click on an answer it will calculate both artists scores. And if you get it right you will have a modal with a gif in it congratulating you for getting it correct. If you get it wrong, it is game over and a button that asks you to try again. This modal is not able to click out of besides refreshing to ensure the user can’t cheat. There are 50 artists and you will get one new artist each time you press on the winning artist. The winning artist of the first round will still be displayed for the next round with their monthly count so you can have an idea of what the newcomer is up against. And if the user gets to the end of these artists then there will be another modal that shows they beat the game!
  

Technologies Used

Languages Used

• HTML5
• CSS3
• Javascript

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:

   • Bootstrap was used to assist with the responsiveness and styling of the website. And many of the different components.

2. CSS-Tricks:

   • Was used to help with the hover over the artist boxes.

3. Font Awesome:

   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes and using the Spotify logo.

4. Git

   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

5. Gitpod:

   • Gitpod was the primary IDE used throughout the project.

6. GitHub:

   • GitHub is used to store the projects code after being pushed from Git.
   • The website is also deployed using GitHub Pages.

7. Balsamiq:

   • Balsamiq was used to create the wireframes during the design process.

8. sp-playcount-librespot:

   • This user evilarceus on GitHub was essential to this project. The API is used to get the monthly listener count and display the artist name and photos

9. Spotify

   • I used Spotify’s actual data that helped evilarceus be able to get his api to work. Along with that I used their colour schemes to try and mimic the feel of their website.

10. Shuttershocks

    • Shuttershocks image helped me find a good image to use for the home page that would evoke a sense of a friendly music ‘battle’.

11. Flat Icon

    • Flat icon was used for the photo in the instructions of how to play to show that it is a battle or vs.

12. CORS Anywhere

    • The Api wouldn’t work without CORS being enabled so I added some code from CORS Anywhere to help it run.

    Testing

The W3C Markup Validator, W3C CSS Validator Services, and Code Beautify were used to validate every page of the project to ensure there were no syntax errors in the project. Results down below.

• Index.HTML Test - View
• Battle.HTML Test - View
• CSS Test - View
• JavaScript Test - View

• Small errors with the CORS Anywhere and CSS Bootstrap but everything else checks out.

This site has been tested on different mobile and tablet devices such as Moto G4, Galaxy S5, Pixel2, Pixel2 XL, iPhone5/SE, iPhone6/7/8, iPhone 6/7/8 plus, iPhoneX, iPad, iPad Pro, and Surface Duo. It has also been tested on 5 different browsers. Bravo, Safari, Chrome, Ecosia, and Firefox. It has been tested by a number of friends and family. That could be why it may seem there is a surplus of instructions because feedback has not made it super clear to them how to continue playing.

• First Time Visitor Goals

  • As a First Time Visitor, I want to easily understand the main purpose of the site and learn how to easily play the game.

    • Upon entering the site, they will see a question asking which artist do they think has the most monthly listeners and a button to play the game. Below is text that will tell them a little bit more about the site and a playlist of some of the most popular songs which are also done by popular artists.

  • As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

    • There is a big button that lets the user know where to play the game and once they click on it there are instructions on how to play and clicking on the Spotify battle logo will bring them back home.

  • As a First Time Visitor, I want engaging content that will keep it in my memory.

    • Thankfully I don’t believe there are many Spotify “games” so I think that is a good indication it could be memorable. And I feel I made the game as user friendly as I could as a beginner coder.

• Returning / Frequent Visitor Goals

  • As a Returning Visitor, I want to be able to have enough content that I can keep playing the game.

    • I believe 50 is a good number that not a lot of people can reach without having to play again and again so it will keep the user engaged and want to come back to play again.

  • As a returning visitor, I would like the website to be responsive no matter the device.

    • Thankfully, I tested it on many devices that seemed to all work and still be aesthetically pleasing!

Known Bugs

• On mobile the numbers on the artist box don’t appear as nice as they do in desktop. They appear more suddenly.
• The Api and Spotify’s api have gone very slow a few times during testing. Where it keeps iterating through the array and takes a moment to find an artist.
• The artist images are different sizes and on mobile it can make the artist box appear to be too big.
• The footer doesn’t seem to hang at the bottom of some tablet sizes.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository

2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.

3. Scroll down the Settings page until you locate the "GitHub Pages" Section.

4. Under "Source", click the dropdown called "None" and select "Master Branch".

5. The page will automatically refresh.

6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `Spoon-Knife`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• w3schools: For help remembering many code elements in CSS, HTML, and Javascript.

• Bootstrap4: Bootstrap Library used throughout the project to make site responsive using the Bootstrap Grid System. But also many components were used to give functional features.

• Spotify This site wouldn’t be able without Spotify allowing their data to be seen.

• sp-playcount-librespot Without this user I wouldn’t have been able to get the artist name, monthly count, and photos as readily.

• CORS-Anywhere Without this help from here I wouldn’t have been as readable without a CORS extension.

• CSS-Tricks for styling of the artist boxes on the battle page.

Media

• Spotify: All the images of the artist were taken from here.


• Shuttershock: For the image on the home page.

• Flat Icon: For the competition/vs. image.

Acknowledgements

• My Mentor Matthew Rudge for continuous helpful feedback and guidances to this project and me as a developer.


• The design is very closely related to the design of Spotify.


Spoilers!!!!

If you need help getting to the game over modal. The Weekend is the most listened to artist. With J Balvin, and Dua lipa being 2nd and third. And below will be the artist ID's of all the artists included in the game if debugging is needed.

Artist IDs:

Abba - 0LcJLqbBmaGUft1e9Mm8HV

Adele - 4dpARuHxo51G3z768sgnrY

Ariana Grande - 66CXWjxzNUsdJxJ2JdwvnR

Bad Bunny - 4q3ewBCX7sLwd24euuV69X

Beyonce - 6vWDO969PvNqNYHIOW5v0m

Billie Eilish - 6qqNVTkY8uBg9cP3Jd7DAH

Beatles - 3WrFJ7ztbogyGnTHbHJFl2

BTS - 3Nrfpe0tUJi4K4DXYWgMUX

Britney Spears - 26dSoYclwsYLMAKD3tpOr4

Bruno Mars - 0du5cEVh5yTK9QJze8zA0C

Calvin Harris - 7CajNmpbOovFoOoasH2HaY

Cardi B - 4kYSro6naA4h99UJvo89HB

Charli XCX - 25uiPmTg16RbhZWAqwLBy5

Coldplay - 4gzpq5DPGxSnKTe4SA8HAU

David Bowie - 0oSGxfWSnnOXhD2fKuz2Gy

Dua Lipa - 6M2wZ9GZgrQXHCFfjv46we

Ed Sheeran - 6eUKZXaKkcviH0Ku9w2n3V

Elvis Presley - 43ZHCT0cAZBISjO8DG9PnE

Fiona Apple - 3g2kUQ6tHLLbmkV7T4GPtL

Frank Ocean - 2h93pZq0e7k5yf4dywlkpM

J Balvin - 1vyhD5VmyZ7KMfW5gqLgo5

John Mayer - 0hEurMDQu99nJRq8pTxO14

Imagine Dragons - 53XhwfbYqKCa1cC15pYq2q


Kanye West - 5K4W6rqBFWDnAN6FQUkS6x

Kendrick Lamar - 2YZyLoL8N0Wb9xBt1NhZWg

Khalid - 6LuN9FCkKOj5PcnpouEgny

Kodaline - 4BxCuXFJrSWGi1KHcVqaU4

Kim Kardashian - 0VyNiaUWxot9V0efpoi0qt

Kylie Minogue - 4RVnAU35WRWra6OZ3CbbMA

Lady Gaga - 1HY2Jd0NmPuamShAr6KMms

Little Mix - 3e7awlrlDSwF3iM0WBjGMp

Madonna - 6tbjWDEIzxoDsBA1FuhfPW

Maroon 5 - 04gDigrS5kc9YWfZHwBETP

Mariah Carey - 4iHNK0tOyZPYnBU7nGAgpQ

Nirvana - 6olE6TJLqED3rqDCT0FyPh

Oasis - 2DaxqgrOhkeH0fpeiQq2f4

Post Malone - 246dkjvS1zLTtiykXe5h60

Prince - 5a2EaR3hamoenG9rDuVn8j

Queen - 1dfeR4HaWDbWqFHLkxsg1d

Selena Gomez - 0C8ZW7ezQVs4URX5aX7Kqx

Shakira - 0EmeFodog0BfCgMzAIvKQp

Sufjan Stevens - 4MXUO7sVCaFgFjoTI5ox5c

Spice Girls - 0uq5PttqEjj3IH1bzwcrXF

Rihanna - 5pKCCKE2ajJHZ9KAiaK11H

Rolling Stones - 22bE4uQ6baNwSHPVcDxLCe


Rosalia - 7ltDVBr6mKbRvohxheJ9h1

Taylor Swift - 06HL4z0CvFAxyc27GXpf02

The Weeknd - 1Xyo4u8uXC1ZmMpatF05PJ

U2 - 51Blml2LZPmy7TTiAg47vQ

Usher - 23zg3TcAtWQy7J6upgbUnj