Spotify Party

An app to sync Spotify playback between users.

https://spotify.greerpage.com - if people use it I will get a real domain name

About

This project uses the Spotify Web API to get and set user playback. It is using Socket.IO to sync user playback. Essentially, the host sends requests to the Spotify API and when it detects a change, it sends the updated information to the Socket.IO server which disributes necessary information to the clients.

Web Stack

• Frontend

  • The frontend is primarily written in React
  • React renders the necessary information for all of the pages
  • The requests to the Spotify API are done in the frontend to prevent my server from getting heavily rate limited
  • As a result, all data bettween the Socket.IO server and the clients is done in JavaScript
  • All React files can be found in app/js/, when they are compiled (see the build notes) they go to app/static/js/build/

• Socket.IO Server

  • The Socket.IO server is done in the Python library flask_socketio
  • The server handles all of the syncing between the host of the "party" and all of the members
  • Essentially, when the host sends new information with the update method the server sends the new playback to all members of the corresponding party
  • This code can be found in app/app.py

• Web Server

  • The web server is written in Python with Flask
  • The web server handles all of the routing and the rendering of HTML files and such
  • The code for the web server can be found in app/app.py along with the Socket.IO server

• JSON

  • The "database" I am using is just simply JSON. This stores some Spotify user info and the current running parties
  • This is stored in the app/json/ directory which is created when you run the app

Building and Running

• Prerequisites

  • Python 3.7 or 3.8 (and pip)
  • npm

• Clone the repo and cd into it

$ git clone https://github.com/GreerPage/spotify-party.git
$ cd spotify-party

• Install the dependencies

$ pip install -r requirements.txt
$ cd app
$ npm install

• Transpile the JSX to app/static/js/build/ (you can keep this running in the background)

$ cd js
$ npx babel --watch . --out-dir ../static/js/build --presets react-app/prod

• Make app/spotify_access.py

# spotify client and secret id (https://developer.spotify.com/dashboard)
client_id = 'your_client_id'
secret = 'your_client_secret'

• Run Flask

$ cd ..
$ python app.py