Tonhalle Düsseldorf
Headless-Architektur, Echtzeit-Ticketing und Cloud-Infrastruktur für eines der schönsten Konzerthäuser Deutschlands.
Das Projekt
Im ehemaligen Planetarium am Düsseldorfer Rheinufer befindet sich die Tonhalle – eines der schönsten Konzerthäuser Deutschlands. Über 450 Konzerte pro Jahr, 300.000 Besucher, eine Marke mit Geschichte.
2021 stand der Website-Relaunch an. Das neue Corporate Design war fertig, die technische Basis veraltet. Die Anforderungen: moderne Architektur, Anbindung an Ticketsystem und Veranstaltungsmanagement, Performance die auch bei Verkaufsstart von hochfrequentierten Events nicht einbricht.
Umgesetzt als Headless-Setup: Drupal als CMS-Backend, Next.js im Frontend, AWS Cloud für Hosting und Skalierung. Tausende Besucher pro Jahr nutzen die Website heute – für Programmrecherche, Ticketkauf und Abo-Konfiguration
Die Herausforderungen
Integration mit bestehenden Systemen
Die Tonhalle arbeitet mit zwei externen Systemen: **Evis** für Veranstaltungsmanagement und **Secutix** für Ticketing. Beide Systeme mussten sauber angebunden werden – keine manuelle Datenpflege, keine Inkonsistenzen zwischen Website und Shop.
Evis-Integration: Events, Künstler, Termine – alle Daten werden automatisch importiert. Drupal holt sich die Informationen über eine SOAP-API, verarbeitet sie und stellt sie strukturiert zur Verfügung. Redakteure pflegen Inhalte nur noch an einer Stelle.
Secutix-Integration: Verfügbarkeiten in Echtzeit, direkter Sprung in den Ticketshop. Besucher sehen sofort ob Tickets verfügbar sind und landen mit einem Klick im Kaufprozess. Keine Medienbrüche, keine veralteten Daten.
App-like User Experience
Das Design kam von der Kreativagentur Grand Quest – modern, nahtlos, orientiert an Streamingdiensten. Keine klassische Website mit Seitenreloads, sondern ein flüssiges Erlebnis. Das Frontend musste dem gerecht werden.
Umgesetzt mit Next.js – React-basiert, optimiert für Performance. Inhalte werden über Drupals JSON:API ausgeliefert, das Frontend rendert sie clientseitig. Besucher navigieren durch die Website ohne Ladezeiten, Backend und Frontend arbeiten entkoppelt.
Das macht die Website nicht nur schneller, sondern auch flexibler: Änderungen am Frontend lassen sich unabhängig vom CMS umsetzen.
Skalierung und Performance
450 Konzerte pro Jahr bedeutet viele Verkaufsstarts – und jeder Verkaufsstart bedeutet Traffic-Spitzen. Wenn ein hochfrequentiertes Event online geht, greifen hunderte Besucher gleichzeitig zu. Die Infrastruktur muss das aushalten.
AWS Cloud mit automatischer Skalierung: Server werden bei Bedarf hochgefahren, bei niedrigem Traffic wieder heruntergefahren. Das spart Kosten und garantiert Verfügbarkeit.
OpenSearch für die Suche: Auch bei großen Datenmengen bleiben Suchergebnisse schnell. Besucher finden Konzerte nach Datum, Genre, Künstler oder Reihe – gefiltert und sortiert in Millisekunden.
Background-Worker: Datenimporte und aufwändige Prozesse laufen im Hintergrund. Die Website bleibt für Besucher performant, während im Backend Events synchronisiert werden.
Automatisches Bild-Management
Über 450 Veranstaltungen bedeuten hunderte Event-Bilder pro Jahr – in verschiedenen Formaten, für Desktop, Tablet, Mobile. Jedes Bild manuell zuzuschneiden wäre Wahnsinn.
Cloudinary übernimmt das automatisch: KI analysiert die Bilder, erkennt Gesichter und zentrale Motive, schneidet intelligent zu. Redakteure laden ein Bild hoch, Cloudinary liefert es in allen nötigen Größen und Formaten aus – optimiert für jedes Gerät.
Das spart Zeit, Geld & Nerven mit garantiert guten Bildern.
Der Abonnement-Konfigurator
Eine der komplexesten Anforderungen: Ein Konfigurator mit dem Besucher ihr individuelles Konzert-Abo zusammenstellen können. Laufzeit, Ticketanzahl, Zusatzleistungen, bevorzugte Veranstaltungen – alles dynamisch, basierend auf Echtzeit-Verfügbarkeiten aus Secutix.
Jede Auswahl wird live validiert, nur verfügbare Optionen werden angezeigt. Das Ergebnis: Besucher konfigurieren komplexe Abonnements selbst, die Tonhalle spart Beratungsaufwand, Fehler durch manuelle Verarbeitung fallen weg.
Unsere Zusammenarbeit mit Bitmade Solutions war eine beeindruckende Erfahrung. Mit ihrer professionellen, innovativen Herangehensweise und ihrem unerschütterlichen Engagement haben sie unsere Erwartungen übertroffen. Wir freuen uns auf weitere Projekte in der Zukunft.
Das Ergebnis
Tausende Besucher nutzen die Website – für Programmrecherche, Ticketkauf, Abo-Verwaltung.
Automatisierte Datenpflege: Events, Künstler, Verfügbarkeiten synchronisieren sich automatisch. Redakteure pflegen Inhalte nur noch an einer Stelle.
Performante Infrastruktur: Auch bei Verkaufsstarts hochfrequentierter Events bleibt die Website stabil.
Runner-Up bei den Splash Awards 2021 in der Kategorie E-Commerce.
Für die Tonhalle-Website setzten wir auf ein modernes Headless-Setup mit Drupal als CMS, Next.js/React im Frontend, Tailwind CSS für das Styling, Elastic/OpenSearch für schnelle Suche, Cloudinary für automatisches Bilder-Management und die AWS Cloud für da Hosting.
Technologie-Details
Drupal Headless CMS
Drupal fungiert als Content-Management-System und steuert alle Inhalte – Events, Seiten, Künstler-Profile, News. Das Frontend greift über die JSON:API auf die Daten zu.
Der Vorteil: Backend und Frontend sind entkoppelt. Änderungen am Design lassen sich umsetzen ohne das CMS anzufassen. Neue Channels (z.B. Mobile-App) können dieselbe API nutzen.
Next.js Frontend
Next.js bringt React-Komponenten, Server-Side-Rendering und statische Generierung zusammen. Seiten werden bei Bedarf generiert und gecacht – schnell für Besucher, effizient für Server. TailwindCSS sorgt für konsistentes Styling ohne aufgeblähte CSS-Dateien. Das Design ist responsiv, moderne Devices werden unterstützt.
AWS Cloud-Infrastruktur
Die Infrastruktur läuft auf AWS: EC2 für Server, RDS für Datenbanken, S3 für Medien-Storage, CloudFront als CDN. Autoscaling sorgt dafür dass die Website auch bei Traffic-Spitzen verfügbar bleibt. Docker-Container machen Deployments reproduzierbar. CI/CD-Pipelines automatisieren Tests und Releases.
OpenSearch
Die Suche basiert auf OpenSearch (Fork von Elasticsearch). Konzerte können nach Datum, Genre, Künstler, Reihe gefiltert werden – auch bei tausenden Events bleibt die Suche schnell. Faceted Search ermöglicht Filterung über mehrere Dimensionen gleichzeitig.
Cloudinary
Cloudinary übernimmt das gesamte Bild-Management: Upload, Transformation, Auslieferung. KI-gestütztes Cropping erkennt Gesichter und zentrale Motive, schneidet intelligent zu. Bilder werden automatisch in modernen Formaten (WebP, AVIF) ausgeliefert – optimiert für Bandbreite und Ladezeit.
