Home
This application offers a fun way to collaborate on a music playlist for parties and gatherings. Users can create a party and invite others to the party room. Each party member can search tracks that they like and add them to the queue. The order of the play queue is determined by the number of votes on each track.
To become a host and create a party, a user needs to sign in with their Spotify premium account. Once the party is created, all other users can join without signing in to a Spotify account.
Our application consists of three main pages; the landing page, the guest page, and the host page.
From this page, the user is able to either sign into Spotify and create a party as a host, or input an existing party code and join as a guest. These options will lead the user to the respective guest and host pages.
Hosts signing in for the first time will be redirected to Spotify's Oauth sign in page. After successful sign in, they will be redirected to their party. Currently, a host can only have 1 party. If the host has an ongoing party, this party will be loaded upon sign in.
Each party has a unique party code. This can be found on the left in the sidebar. This code is generated randomly upon sign in and can be shared with others to join the party.
The host has control over playback, they can choose to play and pause the current track, skip a track and delete a track.
Each track has a vote number, tracks with higher votes are placed above those with lower votes.
Users can also search for tracks in the search bar. Tracks that they like can be added to the queue by clicking on the track.
The guest page has a very similar interface as the host page. However, guests have no control over the playback of songs. Guests can search and add songs to the playlist without login their Spotify account. they can also vote for tracks that they like to bump them up the queue.
Any changes in the playlist, for example, changes in votes, new tracks added, or changes in the state of playback, will be simultaneously reflected in every user's browser who is currently in the party room.
A simple Responsive UI is implemented so that this App fits into windows with different widths.
This application is built with a MERN stack. MongoDB, Express, and Node were used on the backend. React was used on the frontend. Socket.io was used on both the front and the back end to synchronize data.
Some future work that could be done to improve the app include:
- Allowing a host to have multiple parties
- More customisation such as colour themes, changing the party picture/name
- Allowing users to import an existing playlist from Spotify