Gay Party Hamburg

Hintergrund

Unter gaypartyhamburg.de laufen die queeren Partyreihen der WunderBar zusammen — Pink Inc, BLUEBEATS., Babylon, 136 Grad und RUSH. Fünf Reihen mit eigener Bildsprache, gemeinsamem Publikum und einem Terminkalender, der sich ständig ändert.

Vorher war das eine WordPress-Seite mit einer „Save the Date"-Liste, in die jeder Termin von Hand eingetragen wurde. Das eigentliche Problem lag aber nicht im Aussehen, sondern in der doppelten Arbeit: Jede Party musste zweimal angelegt werden — einmal im Ticketsystem, wo sie ohnehin entsteht, und danach noch einmal auf der Website. Zwei Systeme, zwei Wahrheiten, und die Website war regelmäßig die veraltete von beiden.

Die Aufgabe hinter dem Redesign

Der Wunsch des Kunden war deutlich: So viel wie möglich soll im Ticketsystem gepflegt werden, und sonst nirgends. Damit war die Kernaufgabe nicht das neue Layout, sondern die direkte Anbindung an die Quinbook-API — dort entstehen Termin, Slots, Poster und Beschreibung, und von dort holt die Website sie sich selbst.

Das Admin-Tool der Seite gibt es weiterhin, aber es hat die Rolle gewechselt: vom täglichen Arbeitsplatz zum Werkzeug für Sonderfälle. Im Normalbetrieb muss der Kunde es nicht mehr öffnen.

Warum die Seite nicht live aus der API liest

Der naheliegende Weg wäre gewesen, die Eventdaten bei jedem Seitenaufruf direkt aus der API zu holen. Genau das schließt die SEO-Anforderung aber aus.

Google braucht fertig gerendertes HTML, stabile URLs pro Event und schnelle Antworten. Inhalte, die erst im Browser aus einer fremden API nachgeladen werden, sieht die Suchmaschine praktisch nicht — und wäre das Ticketsystem einmal langsam oder gestört, würde ein Crawl auf eine leere Seite treffen.

Gelöst ist es als Spiegel: Ein Sync-Job zieht die Daten einmal täglich in eine lokale Datenbank, die Seiten rendern serverseitig daraus. Google sieht nie die API, sondern immer fertiges HTML samt strukturierter Daten. Der Ticketshop selbst wird weiterhin im Browser nachgeladen — für den Kaufbutton ist das richtig, als Quelle für den Seiteninhalt taugt er nicht.

Design

Fünf Partyreihen mit fünf sehr eigenen Ästhetiken auf einer Seite — das kann schnell nach Sammelsurium aussehen. Die Entscheidung dagegen war, dem Design bewusst zurückzutreten: Das Flyer-Poster ist das Design. Die Website liefert nur den Rahmen, dunkel und neutral, damit die Poster wirken können.

Der Regenbogen bleibt deshalb der Dachmarke vorbehalten — Navigation, Trennlinien, Ränder. In den Karten selbst gibt es kein zusätzliches Farbsystem, das mit den Flyern konkurrieren könnte.

Der Hero löst ein praktisches Problem. Ein Vollbild-Foto hätte für jedes Event ein passend geschnittenes Querformat gebraucht, das es nie gibt. Stattdessen: ein wählbarer Farbverlauf als Hintergrund, das Reihen-Logo groß daneben, und rechts zwei Fotos in der Optik von Instagram-Posts, leicht gedreht und gestapelt. Der Kunde lädt einfach zwei Bilder hoch — kein Crop, kein Weichzeichner, kein schiefes Format.

Die Reihen-Blöcke auf der Startseite scrollen horizontal, wobei die nächste Karte immer halb hereinschaut. Dieser Peek-Effekt sagt ohne Worte, dass es hier weitergeht. Vergangene Events verschwinden automatisch, statt als Karteileichen liegenzubleiben.

Umsetzung

Gebaut ist die Seite mit Nuxt 3 und Tailwind, die gespiegelten Daten liegen in einer SQLite-Datenbank über Prisma. Ausgeliefert wird sie serverseitig gerendert über PM2 hinter nginx. Alle Inhalte gibt es auf Deutsch und Englisch.

Zwei Details, die im Alltag den Unterschied machen: Beim Umzug wurden 171 vergangene Events aus dem Altbestand importiert, damit das Archiv nicht bei null anfängt. Und weil der Ticketshop Inhalte von Dritten nachlädt, fragt ein Consent-Banner vorher — ohne Zustimmung funktioniert die Seite vollständig weiter, nur der Shop bleibt aus.

Ergebnis

Die Seite ist seit August 2026 unter gaypartyhamburg.de live. Neue Partys landen dort, ohne dass jemand sie ein zweites Mal eintippt: angelegt wird im Ticketsystem, den Rest erledigt der Sync.