Fullstack Application
Party Queue
for Spotify
Project Information
"This app helps me and my friends streamline music selection at our private gatherings. Guests can submit and manage their song requests through a shared invitation link, which takes the pressure off the host and makes the whole evening more enjoyable."
Client
Me
Type
Fullstack Application
Status
Finished
Project Story
The Problem
Manually organizing song requests is stressful and prone to errors.
Before the development of this application, coordinating music requests at parties was challenging. Guests had to express their wishes directly to the host, leading to interruptions. Additionally, songs were often played accidentally, disrupting the playlist. With multiple guests, managing requests quickly became confusing and stressful.
The solution was a web application that allows guests to independently add their songs via an invitation link. The app features a clear queue displaying current, past, and upcoming songs, and offers an intuitive song search. Time limits prevent guests from adding songs too frequently or duplicating entries. The integration of WebSockets ensures all changes are visible in real-time for all users.
The Solution
A central, user-friendly platform for music requests
Challenges
Efficient Communication with the Spotify API and Real-Time Updates
One of the biggest challenges was updating the queue status for all users in real-time without frequently calling the Spotify API, which could lead to exceeding the API quota. This was addressed by implementing a backend-controlled update system that regularly polls the queue status and communicates changes to users via WebSockets.
Another issue was decoupling search requests on the frontend to avoid unnecessary load on the backend. A mechanism was implemented that executes search queries only every 1-2 seconds, even if users continuously input text.
Project Showcase
Organized Queue
The application displays the entire playlist in real-time, clearly showing the current, past, and upcoming songs. Each song is presented along with its cover art, artist, title, and duration. This way, guests always know which song is currently playing, what’s coming up next, and which songs have already been played. This clear presentation creates a relaxed atmosphere without the need to constantly ask what song is next or what the current song is called.
Simple Song Adding
Guests can find and add their favorite songs to the queue with minimal input. The app is crafted to make the entire process intuitive and user-friendly. Using a search bar, users can directly select songs from Spotify, enabling them to add their music choices effortlessly while keeping the host informed. Time limits and restrictions on song repeats ensure a balanced and seamless music selection process.
Aesthetically Pleasing Fullscreen Mode
The application's fullscreen mode offers a stylish way to showcase the current song on a large screen. The background in this mode automatically adjusts to match the color scheme of the cover art for the song currently playing. This feature not only provides an appealing visual presentation but also creates a modern and dynamic atmosphere that leaves guests in awe.
Developing Showcase
Primary Frontend Technologies
React
React is a JavaScript library used for building user interfaces, particularly single-page applications, by creating reusable UI components.
Typescript
TypeScript is a superset of JavaScript that adds static typing to the language, helping to catch errors during development.
Zustand
Zustand is a lightweight state management library for React that simplifies global state handling with a minimal API and high performance.
NextUI
NextUI is a modern, fast, and beautiful React UI library designed for ease of use and customization, leveraging Tailwind CSS for styling.
Socket.io-Client
Socket.io is a JavaScript library that enables real-time, bidirectional communication between web clients and servers.
Superstruct
Superstruct is a JavaScript library that simplifies defining data interfaces and validating data against them at runtime.
Primary Backend Technologies
Node.js
Node.js is a JavaScript runtime built on Chrome's V8 engine that enables server-side scripting.
Typescript
TypeScript is a superset of JavaScript that adds static typing to the language, helping to catch errors during development.
Express
Express is a web application framework for Node.js designed for building web applications and APIs.
Socket.io
Socket.io is a JavaScript library that enables real-time, bidirectional communication between web clients and servers.
Superstruct
Superstruct is a JavaScript library that simplifies defining data interfaces and validating data against them at runtime.
Conclusion
Since the development of this application, it has become an essential tool for my parties and those of my friends. The evening is more relaxed for the hosts, and the queue turns into a surprise as guests add their favorite songs.
