Skip to content

aliceakesson/Heardle-Spotify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LinkedIn

"Buy Me A Coffee"


Logo

Heardle Spotify

Heardle built on a Node.js server using Spotify's Web API

About The Project

This is another version of Heardle made completely by me, where the user can choose freely regarding choice of music. For example: song by artist, song by playlist or a song from the user's top songs.





Requirements

Sadly, this project requires the user to have some sort of Spotify Premium membership. This is because, as for now, you will need to start your own Spotify Application to play it (more about this in the installation guide further down).

Built With

The site runs on a local host, made using Node.js. Further, it's built using Spotify's Web API and the Spotify Web Playback SDK, where the user will have to authenticate using OAuth 2.0.

  • Node
  • JavaScript
  • HTML
  • CSS

Installation

If you don't already have NodeJS installed, you will need to do that first. NodeJS can be installed here.

As mentioned in the requirements, you will first need to create your own Spotify Application. This is easily done through the Spotify Dashboard. The steps are as following:

  1. Click on "Create app"
  2. Give the app a name (any) and a short description
  3. Leave the textfield for "Website" blank. This is not needed
  4. Enter 'http://localhost:8888/callback' for the redirect URL
  5. Check the terms of service box
  6. Click on "Save"

Now, proceed to download and extract the zip-file of this GitHub project. Open the project in any code editor and locate the environment-file (.env) which is located in the 'public' folder. The values for CLIENT_ID and CLIENT_SECRET can be found by clicking on the settings of your Spotify Application (The client secret will be visible by clicking on "View client secret"). Enter these values for their respective variables in the environment.

Note: The values should not be written inside string literals, they should just be inserted as they are (eg. CLIENT_ID=1234567890, not CLIENT_ID="1234567890")

The application requires you to run it on a local server (this is done using Node.js and nodemon), thus you will therefore afterwards have to download these. In the your terminal, go to the directory of the project and then go to the folder named 'public' using this command:

  cd public

Note: This command is based off of the Windows terminal. It may vary depending on the operative system.

After that, install npm and nodemon in the current folder using the following two commands:

  npm install 
  npm install -g nodemon

If everything goes well, the application should then be playable by calling the command to start the server, then open up the server in your browser of choice at http://localhost:8888/login.

 nodemon server.js

It can be exited at anytime by using Ctrl+C in the terminal, or be refreshed by simply writing the following:

  rs

Having Problems?

First, check the following:

  • Your Spotify-application is open
  • You've opened it thorugh the correct URL, i.e. localhost:8888/login
  • Your server is running through your commando prompt

After that, you might try the following:

  • Check that you've achieved an accesstoken in public/views/index.html, at first it was empty
  • Start some song thorugh Spotify, restart the server through rs and reload the page
  • Check that your application through Spotify Dashboard is correctly made and that you've inserted the correct CLIENT_ID and CLIENT_SECRET in your public/.env

Contact

Alice Åkesson - alicek732@gmail.com