WorkInProgress README

A Web Application to visualize the spotify currently playing track on a projector (or some big screen), without requiring you to change which spotify device is playing.

Features

• QRCode spotify authentication (no need to mouse or keyboard);
• No "stealing" your spotify connect. (running this won't interact with or affect your spotify playback in anyway);
• Persisted UI layout;
• Synched realtime UI layout editing;
• Dragabble, rotatable and resizable UI components;

authentication.mp4

---

Requirements

• Spotify developer account
• Node 18

Setup

1. Access your spotify developer account dashboard, create a new app with Web Api permissions (see print below)

   

2. Then, for both server/ and client/ folders:

   • Edit .env file and fill the spotify Client ID and Client Secret variables on it

      VITE_SPOTIFY_CLIENT_ID="client id goes here"
      VITE_SPOTIFY_CLIENT_SECRET="client secret goes here"

     (you can get those values at spotify app settings):
   • run npm install

Running

Enter server/ folder, build the repo and run it:

cd server
npm run build
npm run prod

open https://localhost:3000/

Debugging and dev build

For debugging and local development:

cd server
npm run dev

FAQ

I want to change the authenticated spotify account

You'll need to clear the browser localstorage

I've openned the website, but the sound bars visualizer wont appear

Most modern browsers require a initial user interaction to access audio nodes, to solve this you can do one of these:

• change the Autoplay policy (at chrome://flags/#autoplay-policy ) to 'No user gesture is required'
• press f5 and quicly click anywhere on the website