https://github.com/greerpage/spotify-party
🎵 an app to sync spotify playback between users (written before spotify implemented this feature)
https://github.com/greerpage/spotify-party
flask javascript music python react reactjs socket-io socketio-server spotify spotify-api sync-spotify-playback
Last synced: 9 months ago
JSON representation
🎵 an app to sync spotify playback between users (written before spotify implemented this feature)
- Host: GitHub
- URL: https://github.com/greerpage/spotify-party
- Owner: GreerPage
- License: mit
- Created: 2020-06-06T03:35:22.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T05:58:42.000Z (over 2 years ago)
- Last Synced: 2025-04-24T05:15:24.929Z (9 months ago)
- Topics: flask, javascript, music, python, react, reactjs, socket-io, socketio-server, spotify, spotify-api, sync-spotify-playback
- Language: JavaScript
- Homepage: https://spotify.greerpage.com
- Size: 647 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Spotify Party   
An app to sync Spotify playback between users.
[https://spotify.greerpage.com](https://spotify.greerpage.com) - if people use it I will get a real domain name
## About
This project uses the [Spotify Web API](https://developer.spotify.com/documentation/web-api/) to get and set user playback. It is using [Socket.IO](https://github.com/socketio/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](https://reactjs.org/)
- 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](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](https://github.com/miguelgrinberg/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](https://palletsprojects.com/p/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
```bash
$ git clone https://github.com/GreerPage/spotify-party.git
$ cd spotify-party
```
- Install the dependencies
```bash
$ 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)
```bash
$ cd js
$ npx babel --watch . --out-dir ../static/js/build --presets react-app/prod
```
- Make `app/spotify_access.py`
```python
# spotify client and secret id (https://developer.spotify.com/dashboard)
client_id = 'your_client_id'
secret = 'your_client_secret'
```
- Run Flask
```bash
$ cd ..
$ python app.py
```