Alle Projekte

Case Study13

Kampfsport Event Management Plattform

React-basierte Veranstaltungsmanagement-Webapplikation für Kampfsport-Event-Veranstalter mit Live-Ergebnissen

Sport & Events
Kampfsport Event Management Plattform, Ansicht 1
Ansicht 01

Partner

Kundenprojekt

Branche

Sport & Events

Kerntechnologien

React · PHP · MySQL

Auf einen Blick

Eine Webplattform ersetzt bei Kampfsportgalas die gedruckte Kampfliste: Zuschauer öffnen die Fightcard per QR-Code im Browser und sehen Paarungen, Kämpferprofile, die laufende Runde und Ergebnisse. DuoByte entwickelt die Plattform gemeinsam mit dem Betreiber weiter und hat unter anderem die Live-Steuerung, ein Tippspiel mit Losnummern und einen Turniermodus im K.-o.-System gebaut.

Unsere Rolle: DuoByte setzt Fachfunktionen in React-Frontend und PHP-Backend um und arbeitet dazu Anforderungen aus dem GitLab-Projekt des Betreibers ab, der selbst an Landingpage und Sprachversionen entwickelt.

Projektarbeit

Von der Anforderung zur belastbaren Lösung.

Wie das Projekt entstanden ist: vom Kontext und den Anforderungen über die Umsetzung bis zum heutigen Stand.

01

Ausgangslage

Kampfsportgalas ohne veraltete Papierlisten

Bei Kampfsportgalas liegen meist gedruckte Zettel mit den Paarungen auf den Plätzen. Fällt ein Kämpfer aus oder ändert sich die Reihenfolge, stimmen sie nicht mehr, und über die Athleten selbst erfahren Zuschauer kaum etwas. Aus dieser Beobachtung eines langjährigen Kickboxtrainers ist die Plattform entstanden.

Veranstalter legen ihre Events in einer Webkonsole an, pflegen Kämpfe, Kämpfer, Pausen und Sponsoren und geben die Fightcard frei, wenn sie fertig ist. Zuschauer brauchen keine App: Sie scannen einen QR-Code auf Ticket oder Aufsteller und sehen alles im Browser. Der Betreiber der Plattform schaltet einzelne Funktionen pro Event frei, etwa Ticketlink, Tippspiel oder Turnier.

DuoByte arbeitet seit August 2025 an der Plattform. Die Anforderungen kommen als Issues aus dem GitLab-Projekt des Betreibers, der parallel Landingpage, Texte, strukturierte Daten sowie die spanische und niederländische Sprachversion entwickelt.

02

Herausforderung

Live-Betrieb am Kampfabend ohne Datenfehler

Am Veranstaltungsabend trägt der Veranstalter Ergebnisse oft selbst am Smartphone ein, während in der Halle gekämpft wird. Die Oberfläche muss mit wenigen Eingaben auskommen und Fehler verzeihen: Ein falsch eingetragenes Ergebnis muss sich korrigieren lassen, ohne dass abhängige Daten kaputtgehen.

Mit dem Tippspiel kam eine zweite Anforderung hinzu. Zuschauer tippen mit einer Losnummer, die der Veranstalter gedruckt ausgibt, auf den Ausgang jedes Kampfes. Das System muss Tipps sperren, sobald ein Kampf beginnt, das Durchprobieren von Losnummern verhindern und die Rangliste aktuell halten.

Der Turniermodus verschärft das. Im K.-o.-System hängt jede Paarung ab der zweiten Runde von früheren Ergebnissen ab, und wird ein Ergebnis korrigiert, ändern sich Folgepaarungen, auf die womöglich schon getippt wurde.

03

Lösung

Fightcard, Tippspiel und Turnierbaum aus einer Konsole

Im Bearbeitungsmodus ordnet der Veranstalter Kämpfe per Drag-and-drop und legt Kämpferprofile mit Bilanz, Team, Gewicht, Größe, Alter, Titeln und Herkunftsland an. Fotos schneidet er direkt zu, den Bildhintergrund entfernt auf Wunsch eine Bildverarbeitung im Browser. Während des Events schaltet er den laufenden Kampf live, zählt die Runden mit und trägt das Ergebnis samt Ergebnisart ein, die Fightcard der Zuschauer aktualisiert sich automatisch.

Für das Tippspiel erzeugt der Veranstalter bis zu 3.000 Lose pro Event und lädt sie als druckfertiges PDF herunter, auf Wunsch mit Sponsorenlogos, die gleichmäßig auf die Lose verteilt werden. Zuschauer geben ihre Losnummer ein, tippen auf rote Ecke, blaue Ecke oder Unentschieden und sehen nach dem Kampf, ob sie richtig lagen. Die Rangliste aktualisiert sich alle 15 Sekunden und lässt sich nach Losnummer durchsuchen.

Im Turniermodus trägt der Veranstalter nur die Teilnehmer und die Paarungen der ersten Runde ein. Alle weiteren Paarungen leitet das System aus den Siegern ab und zeigt sie in einem Turnierbaum, der sich in den Zeitplan der übrigen Kämpfe einfügt.

  • Event-Seite mit Countdown, Beschreibung, Ticketlink und Sponsoren
  • Sponsoren pro Kampf und pro Turnierrunde, auch als Video
  • Pausen und Zeitmarken im Ablauf des Abends
  • Farbrollen pro Event mit Vorschau, dazu Hell- und Dunkelmodus
  • Instagram-Grafik der aktuellen Fightcard per Klick
  • Vier Sprachen mit automatischer Spracherkennung
  • Gewichtsangaben wahlweise in kg oder lbs
04

Umsetzung

Turnier- und Tipplogik in PHP, abgesichert durch Tests

Das Frontend ist eine React-Anwendung mit Vite, Tailwind CSS und React Bootstrap, übersetzt mit i18next. Das Backend ist bewusst schlicht: PHP mit Controllern und Modellen, MySQL über PDO mit vorbereiteten Statements, Sitzungen für die Anmeldung und gehashte Passwörter. Es läuft auf einem klassischen Apache-Webhosting, PDFs erzeugt Dompdf, E-Mails verschickt PHPMailer.

Schemaänderungen kommen als datierte SQL-Migrationen. Die Turnierlogik berechnet Folgepaarungen unter Datensatzsperren neu. Bevor eine Ergebniskorrektur eine Paarung ändert, ermittelt sie, welche Folgekämpfe betroffen sind und wie viele Tipps verloren gingen, und fragt beim Veranstalter nach; läuft ein Folgekampf bereits oder hat er ein Ergebnis, bleibt seine Paarung gesperrt.

Beim Start eines Kampfes setzt das System einen Zeitstempel, ab dem die API keine Tipps mehr annimmt. Wieder öffnen lässt sich die Tippabgabe nur für einen Kampf, der zurückgesetzt wurde und kein Ergebnis hat. Tauscht der Veranstalter die Ringecken, erkennt die API veraltete Daten im Browser und verlangt einen neuen Tipp, statt ihn dem falschen Kämpfer zuzuordnen. Losnummern bestehen aus neun Zeichen ohne verwechselbare Zeichen, und nach zu vielen Fehlversuchen sperrt die Datenbank weitere Eingaben vorübergehend.

Für diese Regeln hat DuoByte 17 PHP-Testskripte mit simulierten Datenbankverbindungen geschrieben, unter anderem für Tippsperren, Wertung, Eckentausch, Turnierzeitplan und Tippverluste bei Korrekturen. Sitemap und strukturierte Daten nach Schema.org entstehen aus den freigegebenen Events, damit einzelne Veranstaltungen über die Google-Suche auffindbar sind.

05

Ergebnis

Was Veranstalter und Zuschauer heute nutzen

Veranstalter steuern ihren Kampfabend aus einer Konsole: Sie ändern die Reihenfolge bis zur letzten Minute, tragen Ergebnisse live ein, geben Lose für das Tippspiel aus und richten Turniere ein, deren Baum sich selbst fortschreibt. Zuschauer verfolgen den Abend auf dem eigenen Smartphone, und wer nicht vor Ort ist, kann die Ergebnisse von zu Hause abrufen.

Die Plattform wird laufend erweitert. Der Turniermodus ist die jüngste größere Funktion und seit August 2026 in die Event-Verwaltung integriert. Die Tests sichern vor allem die Stellen ab, an denen eine falsche Berechnung die Tipps von Zuschauern entwerten würde.

Produkt & Kontext

Einblicke in die Umsetzung.

Ausgewählte Ansichten zeigen, wie das System im fachlichen Kontext gedacht und umgesetzt wurde.

Kampfsport Event Management Plattform, Ansicht 2
Ansicht 02
Kampfsport Event Management Plattform, Ansicht 3
Ansicht 03

Systemarchitektur

Die technische Basis, klar gegliedert.

Technologien wurden passend zur Aufgabe, zum Betriebsmodell und zur langfristigen Wartbarkeit kombiniert.

01

Frontend

ReactJavaScriptViteTailwind CSSReact Bootstrapi18next
02

Backend

PHPPDOSession ManagementDompdfPHPMailer
03

Datenbank

MySQLphpMyAdmin
04

Infrastruktur

FTPApache
05

SEO

Schema.orgJSON-LDMeta TagsOpen Graph

Weiter entdecken

Nächste Case Study

Hausverwaltung WordPress Website

Hausverwaltung WordPress Website

Ihr Projekt

Aus einer komplexen Aufgabe wird ein klarer nächster Schritt.

Erzählen Sie uns, was Ihr System leisten muss. Wir bringen Struktur in Anforderungen, Architektur und Umsetzung.

Projekt besprechen