spoti-vote

Web application to vote for the next song in Spotify Queue

Project Description:

The idea for this project resulted as we have a Spotify class playlist with great songs we listen to in our breaks. The problem with it was that Spotify's shuffling feature didn't please the majority of the class. To solve this problem I thought about creating a website where users could choose between four songs (depending on the settings). The song with the most votes would be added to the queue as next song.

Requirements:

• Node v8.0 and higher
• Zeit Account for deploying
• Spotify Premium Account for the DJ

Usage

Installation

To use my webpage, you first want to download NodeJS. Then clone my repository using:

git clone https://github.com/Gabsii/spoti-vote.git
cd spoti-vote 

Then you can install all the dependencies of the projekt using npm:

npm install

After that, copy the .env.template file and rename it to .env. Here you can configure ports and address. The SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET are provided by spotify after you sign up for their developer system.

PORT=80
PORTBACK=8888
ADDRESS="localhost"
SPOTIFY_CLIENT_ID="foo"
SPOTIFY_CLIENT_SECRET="bar"

Replace foo with your SPOTIFY_CLIENT_ID and bar with your SPOTIFY_CLIENT_SECRET.

To setup the backend you need to start the backup process using npm and follow the creation of a new vercel project.

npm run start-backend

Then run npm start to get started

Info

If you can't run a port below 1024 without root permission see this. Thanks to MPJ for providing a framework for the backend-logic.

Congratulations! You now are able to use my webpage.

Testing

By running npm test you can start a jest testing environment respectively.

Credits

Frameworks/Tools

• Git
• React
• FontAwesome

Useful links

• SpotifyGit - Check their repo for tutorials.
• SpotifyTut - Check the tutorial on their page.
• SpotifyBranding - Don't do anything Spotify wouldn't do
• SpotifyDoc - DOCUMENTATION
• SpotifySEO - SEO is Key

Images

• Credits to Austin Neill for his picture (found on Unsplash)
• Credits to Samantha Gades for her picture (found on Unsplash)
• Credits to Eric Nopanen for his picture (found on Unsplash)
• Credits to Etienne Boulanger for his picture (found on Unsplash)
• Credits to Cory Bouthillette for his picture (found on Unsplash)
• Credits to Mohammad Metri for his picture (found on Unsplash)
• Credits to Michiocre for the Backend Magic
• Credits to Treer for his icon (found on openclipart)