Fullstack Anwendung
Party-Warteschlange
für Spotify
Projekt Informationen
Dieses Projekt ermöglicht es mir und meinen Freunden, bei privaten Feiern Musik einfach und stressfrei zu organisieren. Durch die Anwendung können Gäste ihre Musikwünsche selbstständig über einen Einladungslink verwalten, was den Abend für den Gastgeber deutlich entspannter macht.
Auftraggeber
Ich
Typ
Fullstack Anwendung
Status
Abgeschlossen
Projektgeschichte
Das Problem
Manuelle Organisation von Musikwünschen ist stressig und fehleranfällig.
Vor der Entwicklung dieser Anwendung war es schwierig, Musikwünsche bei Feiern zu koordinieren. Gäste mussten ihre Wünsche direkt beim Gastgeber äußern, was zu Unterbrechungen führte. Zudem kam es häufig vor, dass Lieder versehentlich angespielt wurden, wodurch die Playlist gestört wurde. Bei mehreren Gästen wurde die Verwaltung der Wünsche schnell unübersichtlich und stressig.
Die Lösung war eine Webanwendung, die es Gästen ermöglicht, ihre Songs eigenständig über einen Einladungslink hinzuzufügen. Die Anwendung bietet eine übersichtliche Warteschlange, die aktuelle, vergangene und kommende Songs anzeigt, und ermöglicht eine intuitive Suche nach Liedern. Zeitlimits verhindern, dass Gäste zu oft oder doppelte Songs hinzufügen. Durch die Integration von Websockets werden alle Änderungen in Echtzeit für alle Nutzer sichtbar gemacht.
Die Lösung
Eine zentrale, intuitive Plattform für alle Musikwünsche.
Herausforderungen
Effiziente Kommunikation mit der Spotify-API und Echtzeit-Updates.
Eine der größten Herausforderungen war es, den Status der Warteschlange
für alle Nutzer in Echtzeit zu aktualisieren, ohne die Spotify-API zu
häufig aufzurufen und damit die API-Quota zu überschreiten. Dies wurde
durch ein Backend-gesteuertes Update-System gelöst, das den Status der
Warteschlange regelmäßig abfragt und Änderungen über Websockets an die
Nutzer weitergibt.
Ein weiteres Problem war die Entkopplung von Suchanfragen im Frontend, um
unnötige Last auf das Backend zu vermeiden. Hier wurde ein Mechanismus implementiert,
der Suchanfragen nur alle 1–2 Sekunden ausführt, auch wenn Nutzer kontinuierlich
Texteingaben machen.
Projektpräsentation
Übersichtliche Warteschlange
Die Anwendung zeigt die gesamte Playlist in Echtzeit an, mit klarer Darstellung des aktuellen, vergangenen und zukünftigen Songs. Jeder Song wird zusammen mit dem Cover, dem Künstler, dem Titel und der Länge angezeigt. So wissen die Gäste jederzeit, welcher Song gerade gespielt wird, was als Nächstes kommt und welche Lieder bereits abgespielt wurden. Diese übersichtliche Darstellung sorgt für eine entspannte Atmosphäre, ohne dass man ständig nachfragen muss, welches Lied als Nächstes kommt oder wie das aktuelle Lied heißt.
Einfaches Hinzufügen von Songs
Gäste können mit nur wenigen Eingaben ihre Wunschlieder suchen und zur Warteschlange hinzufügen. Die Anwendung ist so gestaltet, dass der gesamte Prozess intuitiv und benutzerfreundlich ist. Über eine Suchleiste können Songs direkt aus Spotify ausgewählt werden, und Gäste können ihre Musik nach Belieben einfügen – alles ohne, dass der Gastgeber den Überblick verliert. Zeitlimits und Song-Wiederholungsbeschränkungen garantieren eine faire und reibungslose Musikauswahl.
Optisch ansprechender Fullscreen-Modus
Der Fullscreen-Modus der Anwendung bietet eine stilvolle Möglichkeit, den aktuellen Song auf einem großen Bildschirm zu präsentieren. Der Hintergrund dieses Modus passt sich automatisch an das Farbschema des Covers des aktuell abgespielten Songs an. Diese Funktion sorgt nicht nur für eine ansprechende visuelle Darstellung, sondern schafft auch eine moderne und dynamische Atmosphäre, die die Gäste zum Staunen bringt.
Entwicklungspräsentation
Verwendete Frontend Technologien
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.
Verwendete Backend Technologien
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.
Zusammenfassung
Seit der Entwicklung dieser Anwendung hat sie sich bei meinen Feiern und denen meiner Freunde als unverzichtbares Tool etabliert. Der Abend ist für Gastgeber entspannter, und die Warteschlange wird zu einer Überraschung, wenn Gäste ihre Lieblingssongs hinzufügen.
