Skip to content

brentvollebregt/spotify-lyrics-viewer

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Spotify Lyrics Viewer Banner

View the lyrics of the current playing Spotify song in your browser.

🌐: spotify-lyrics-viewer.nitratine.net

🛠️ Setup

  1. Clone the repo.
  2. Setup the server
    • Execute npm install to install dependencies
    • Execute cp .env.example .env (or copy for Windows) and populate .env by replacing XXXXXX's
  3. Setup the client
    • cd client to change directories to the client project
    • Execute npm install to install dependencies
    • Execute cp .env.example .env (or copy for Windows)
    • Execute npm run build to build the client (the server will host these built files)
    • Go back to the project root: cd ..
  4. Execute npm start to start the server

🧪 Development Setup

Client

When running the client in development mode using npm start, the client will use the REACT_APP_API_ROOT environment variable value to decide where to send requests. If this is not provided, the current hosted URL will be used.

Server

npm run dev can also be used for development of the server; this allows for hot-reloading. Running the client using npm start and setting REACT_APP_API_ROOT to where the server is running will allow for a development setup with hot-reloading.

When running the server locally, HTTPS needs to be setup due to the use of Secure=true on cookies (due to SameSite="none"). The server will look for server.cert and server.key in the current working directory to use for SSL. When first setting up the server, do the following:

  1. Generate server.cert and server.key by execute openssl req -nodes -new -x509 -keyout server.key -out server.cert in the root directory.
  2. Start the server by executing npm run dev in the root directory.
  3. Go to https://localhost:5000/ and click "Advanced" -> "Proceed to localhost (unsafe)", this solves ERR_CERT_AUTHORITY_INVALID for development.

launch.json offers the ability to connect and debug the the server when running npm run dev.

Screenshots

Spotify Lyrics Viewer showing lyrics Spotify Lyrics Viewer showing lyrics in dark mode

📝 Features

  • Spotify authorization (Authorization Code Flow) for current song identification
  • GENIUS lyric fetching
  • Tokens stored in a session-like object
    • Session is in a cookie due to server restrictions
  • Dark theme

Why?

I often get curious of what the lyrics of the current playing song is. I use Spotify a lot so having somewhere where I could login and it immediately provide the lyrics of the current playing song would be very helpful and save a lot of time.

About

View the lyrics of the current playing Spotify song in your browser

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages