SilentDisco
Shared listening rooms with React and Firebase
Problem
A silent disco needs everyone to hear the same track at the same moment on their own phone, with no setup for guests.
Approach
Create React App with React Router. Firebase Auth handles hosts and Firestore live listeners handle rooms and participant lists. Custom hooks clean up when someone leaves or closes the tab, and a host can delete a room, which sends everyone back to the menu. Spotify sign-in uses its OAuth flow.
Process
4 dated steps, from the project’s history
-
A chat app
Google sign-in and a working chat with sorted messages, following a tutorial.
-
Hosted lobbies
Branched off the tutorial into hosted chat lobbies, then cut Firestore reads and split the chat component.
-
Rooms and a game
Working rooms and the start of a game mode.
-
Music instead
Turned the game-hosting app into a Spotify-based listening room. See Fig. 1, above.
Results
Ten days from a tutorial chat app to a synced listening room. The repo is private.
Lesson
The history is a good record of how I learned: tutorial, then lobbies, then a game, then a product, with attention to Firestore read costs early on.