mixtape.
A in-sync listening experience for Spotify
How To Run
You will need:
- make
- Erlang 20 or better with rebar3
- node and npm or yarn
- a web server that can fallback on unknown paths (beefy, apache, nginx)
With all this setup you can:
- Start the server with
make run
from themixtape_service
folder - Build the client with
make
from theweb_client
folder - Profit!
Now you can open the web server, get the client, connect with Spotify, and start listening to your favorite playlist.
Trying the Synchronization
Bring up someone else, and have them load the client from the browser (could be by accessing your local server, or maybe you're running this somewhere public).
Once they're connected, they just need to paste in the same playlist URI and you're good to go.
System Description (with pictures!)
As synchronization can be tricky, and because this is an experiment in both synchronizing state between web players, and also a small thesis on building web applications with typed actions and a minimum set of dependencies, I've described some of the flows with swimlane diagrams.
Setup, and Authorization Flow
Web-client Synchronization Flow
Sync-service Flow
What This Thing Experiments With
- Typed Actions and User-defined Pattern Matching
- Effects Pattern
- CSS in Javascript
- Profunctor Lenses for manipulating Data structures