Multiplayer Quiz

Projektbeschreibung: Ich habe eine browserbasierte Quiz-Plattform mit React entwickelt, die speziell für den Einsatz in einem lokalen Netzwerk (z. B. im Wohnzimmer mit Freunden, Familienabenden oder Klassenzimmern) konzipiert wurde. Die Anwendung ermöglichte ein dynamisches Quiz-Erlebnis mit mehreren Teilnehmer:innen, ohne dass eine Internetverbindung oder externe Server erforderlich waren. Die Website lief lokal auf einem Host-Gerät und war über die lokale IP-Adresse im Netzwerk erreichbar. Nach dem Aufruf der Startseite gaben Nutzer:innen einfach einen Namen ein, um beizutreten. Je nach eingegebenem Namen oder Schlüsselwort wurden automatisch drei unterschiedliche Rollen zugewiesen: - Spieler: Erhielten auf ihrem Smartphone eine einfache Oberfläche mit einem großen Buzzer-Button (für Buzzerfragen) oder einem Eingabefeld (für Schätzfragen). - Hauptbildschirm: Bei Eingabe von „screen“ wurde der Browser direkt auf eine Projektionsansicht umgeleitet, die die aktuelle Frage, alle Spieler:innen und deren Punktestände großflächig anzeigte. - Admin: Durch Eingabe einer geheimen Zeichenkette gelangte man ins Admin-Panel, von dem aus die nächste Frage freigegeben, Buzzer zurückgesetzt und der Spielstand gesteuert werden konnte. Die Quizfragen wurden in einer lokalen JSON-Datei gespeichert. Das Punktesystem war wie folgt: Bei korrekter Antwort erhielt der/die buzzende Spieler:in 4 Punkte. Bei falscher Antwort erhielten alle anderen Spieler:innen je 1 Punkt, und die Frage wurde erneut freigegeben. Die Kommunikation zwischen allen Geräten erfolgte in Echtzeit über WebSockets (Socket.io), sodass Buzzer-Drücke, Antworten und Punktstände sofort synchronisiert wurden. Hauptfunktionen: - Fullstack-ähnliche React-Entwicklung mit clientseitigem Routing und rollenbasierter UI - Echtzeit-Kommunikation mit WebSockets (Socket.io) für Buzzer, Punktesynchronisation und Admin-Steuerung - Rollenbasiertes Access-Management ohne echte Authentifizierung - Responsive Design: Optimierte Ansichten für Mobile (Spieler), TV (Hauptbildschirm) und Admin-Panel(Host-Gerät) - Persistenz über Browser-Cookies: Vergabe und Speicherung von Session-IDs zur Wiederherstellung des Spielstands nach Standby/Neuladen - Lokale Datenverwaltung: Laden und Verarbeiten von Quizfragen aus JSON Technische Herausforderungen: - Echtzeit-Synchronisation - Session-Wiederherstellung: Ursprüngliches Problem, dass beim Standby-Modus des Smartphones eine neue Browser-Session gestartet wurde und der Spieler den Punktestand verlor – gelöst durch Speicherung einer eindeutigen ID im Browser-Cookie und Server-seitiger Zuordnung Ergebnis: - Vollständig funktionierende, lokale Multiplayer-Quiz-Anwendung, die mehrfach erfolgreich bei privaten Quiz-Abenden eingesetzt wurde - Hohe Spieler:innen-Akzeptanz dank einfachem Einstieg, fairem Buzzer-System und motivierendem Punktemechanismus - Robuste Lösung für das Session-Problem durch Cookie-basierte IDs – Spieler:innen blieben auch nach Standby oder Neuladen verbunden - Praktisches Projekt, das tiefgehende Kenntnisse in React, State-Management, Echtzeit-Kommunikation und browserbasierten Anwendungen vermittelt hat