OCTABOATS: Enterprise-Grade Yacht & Luxus-Trip-Buchungsplattform

Premium Full-Stack SPA, die für ein nahtloses Buchungserlebnis bei maritimen Luxusabenteuern entwickelt wurde – mit Payment-Orchestrierung auf Enterprise-Niveau, Echtzeit-Verfügbarkeitsmanagement und einem hochentwickelten Admin-Operations-Dashboard.

Der Business Case

OCTABOATS löst den fragmentierten Markt für Luxusyachten und Erlebnisse durch eine einheitliche, reibungslose Plattform, auf der Kunden maritime Premium-Erlebnisse entdecken, vergleichen und buchen können. Die Plattform verwandelt die Komplexität der Buchung in ein intuitives, auf Conversion optimiertes Erlebnis – und generiert durch intelligentes Upselling, flexible Promotionen und strategische Warenkorb-Wiederherstellungsmechanismen einen höheren durchschnittlichen Bestellwert (AOV). OCTABOATS ist auf Performance im Sub-Sekunden-Bereich, 99,9% Zahlungssicherheit und nahtlose Skalierbarkeit ausgelegt und demonstriert auf jeder architektonischen Ebene Engineering-Praktiken auf Produktionsniveau.

Kern-Wertversprechen

Performance & Skalierbarkeit

Optimierte Query-Ausführung: Eager-Loading von Beziehungen mit strategischen Query-Constraints zur Eliminierung von N+1-Problemen in Warenkorb-, Checkout- und Verfügbarkeits-Flows.
Intelligente Caching-Strategie: 1-Stunden-Cache für Startseiten-Props (Städte, Yachthäfen, Yacht-Kataloge) mit Cache-Invalidierung bei kritischen Updates; dadurch wird die Datenbanklast auf hochfrequentierten Seiten um ca. 70% reduziert.
Datenbank-Architektur: Polymorphe Beziehungen für ein einheitliches Buchungsmodell (handhabt sowohl Yachten als auch Trips), was eine einzige Geschäftslogik-Schicht für unterschiedliche Produkttypen ermöglicht.
Echtzeit-Verfügbarkeitsprüfung: Race-Condition-sichere Verfügbarkeitsvalidierung mittels Datenbanktransaktionen während des Checkouts, um Doppelbuchungen und Überverkäufe zu verhindern.

UX/UI-Exzellenz

Responsives Luxus-Design: Mobile-First React-Architektur mit Tailwind CSS v4, die auf allen Viewports ein pixelgenaues Erlebnis liefert.
Conversion-optimierte Abläufe: Mehrstufiger Checkout mit Progressive Disclosure, Warenkorb-Persistenz und Ein-Klick-Upsell-Akzeptanz.
Premium-Komponenten-Bibliothek: Radix UI Headless-Komponenten stellen Barrierefreiheit (WCAG 2.1 AA) sicher, ohne dabei das Design zu beeinträchtigen.
Intelligentes Form-Handling: Serverseitige Validierung mit Laravel Form Requests, Echtzeit-Feedback auf Client-Seite durch TypeScript-Typsicherheit.
Dark-Mode-Unterstützung: Theme-Persistenz mit localStorage, kein Flackern von ungestylten Inhalten (FOUC).

Sicherheit & Zuverlässigkeit

Gehärtete Authentifizierung: Laravel Fortify mit Zwei-Faktor-Authentifizierung (2FA/TOTP), Session-Management und sicherem Passwort-Hashing (bcrypt).
Zahlungssicherheit: PCI-konforme Kashier-Integration mit 3DS-Authentifizierung, serverseitiger Transaktionsprüfung und Validierung der Webhook-Signatur.
Autorisierungs-Layer: Feingranulare, Policy-basierte Zugriffskontrolle (Admin-only-Dashboard, benutzerspezifische Buchungsansichten).
CSRF- & XSS-Schutz: Natives Laravel Middleware-Schutzmodell für alle zustandsverändernden Operationen.
Transaktionale Integrität: Datenbanktransaktionen während der Webhook-Verarbeitung stellen sicher, dass Buchungsdatensätze nicht ohne entsprechende Zahlungsdatensätze existieren können.

Technische Architektur & Stack

┌─────────────────────────────────────────────────────────────────────┐ │ CLIENT LAYER (React 19) │ │ ┌─────────────┬──────────────┬──────────────┬──────────────────┐ │ │ │ Pages │ Components │ Hooks │ Services │ │ │ │ (TypeScript)│ (Radix UI) │ (Custom) │ (API Calls) │ │ │ └─────────────┴──────────────┴──────────────┴──────────────────┘ │ │ ↓ Inertia Protocol ↓ │ ├─────────────────────────────────────────────────────────────────────┤ │ SERVER LAYER (Laravel 12, PHP 8.2) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Controllers (Thin) → Form Requests (Validation) → Policies │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Business Logic Services │ │ │ │ • KashierPaymentService (Zahlungsorchestrierung) │ │ │ │ • KashierWebhookService (Transaktionsverarbeitung) │ │ │ │ • PageServices (Domain-spezifische Datenaggregation) │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Eloquent Models & Relationships │ │ │ │ • Polymorphe Buchungen (Yacht/Trip) │ │ │ │ • Verfügbarkeitsmanagement (Echtzeit-Validierung) │ │ │ │ • Warenkorbsystem (Multi-Item, persistent) │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ DATABASE LAYER (MySQL/Postgres) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ Normalisiertes Schema: Users → Bookings ← (Yachts/Trips) │ │ │ │ Verfügbarkeits-Indizes, Foreign Key Constraints, Cascading │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ EXTERNAL SERVICES & INFRASTRUCTURE │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ • Kashier Payment Gateway (3DS aktiviert) │ │ │ │ • E-Mail-Benachrichtigungen (Laravel Mail) │ │ │ │ • Session Storage (Redis-kompatibel) │ │ │ │ • File Storage (Local/S3) │ │ │ └──────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘

Frontend-Stack

Framework: React 19 mit striktem TypeScript (tsconfig.json: Strict-Mode aktiviert)
SSR/Hydration: Inertia.js v2 mit serverseitig gerenderten Page-Props, was Waterfall-Anfragen eliminiert
Styling: Tailwind CSS v4 + Tailwind CSS Vite-Plugin für optimierte Builds
UI-Komponenten: Radix UI (headless, barrierefrei, ungestylt) verpackt in eine eigene Komponentenbibliothek
Formular-Management: React Hook Form mit serverseitigem Laravel-Validierungs-Feedback
Routing: Wayfinder v0 für typsichere Routengenerierung aus Laravel-Routen
Typsicherheit: Volle TypeScript-Abdeckung mit strikten Null-Checks, Discriminated Unions für API-Antworten
Build-Tooling: Vite mit React-Compiler-Plugin für optimiertes JSX, intelligentes Tree-Shaking

Backend-Stack

Framework: Laravel 12 mit optimierter Dateistruktur (kein Kernel.php, Middleware in bootstrap/app.php)
ORM: Eloquent mit Eager Loading, polymorphen Beziehungen und Query-Optimierung
Authentifizierung: Laravel Fortify (headless Auth-Backend) mit 2FA/TOTP-Unterstützung via TwoFactorAuthenticatable-Trait
API-Layer: RESTful-Endpunkte gemäß JSON:API-Konventionen, Rückgabe von Laravel API-Resources für konsistente Antwortformatierung
Validierung: Form Request-Klassen für deklarative, wiederverwendbare Validierungsregeln
Autorisierung: Policy-basierte Zugriffskontrolle mit Laravel Gates und Policies
Caching: Laravel Cache-Facade mit 1-Stunden-Default-TTL für Startseiten-Aggregationen
Hintergrund-Jobs: Queue-System (konfiguriert für Sync in der Entwicklung, Datenbank/Redis in der Produktion)
Testing: Pest 4 mit RefreshDatabase-Trait für isolierte Testausführung

Technische Deep Dives

1. Polymorphe Buchungsarchitektur: Ein Modell, mehrere Produkttypen

Die Herausforderung: Yachten und Trips repräsentieren grundlegend verschiedene Produkttypen mit unterschiedlichen Preismodellen, Verfügbarkeitsbeschränkungen und Geschäftsregeln. Ein naiver Ansatz würde separate Buchungstabellen und doppelten Code erfordern. OCTABOATS vereinheitlicht dies elegant mittels der polymorphen Beziehungen von Eloquent.


**Warum das wichtig ist:**
- **Single Source of Truth** für Buchungsfreigabe, Zahlungsabwicklung und Rückerstattungen – unabhängig vom Produkttyp.
- **Gemeinsames Admin-Dashboard** mit Einblick in alle Buchungen, inklusive einheitlichem Filter- und Freigabeworkflow.
- **Skalierbar auf N Produkttypen** (Zukunft: Hotels, Dining-Erlebnisse) ohne Controller-Duplizierung.
- **Datenbanknormalisierung** sichert referenzielle Integrität; Foreign Keys verhindern verwaiste Buchungen.

---
<h3 id="section-b5f7d6ac479f612a0b9f8ffe6899b103">2. Payment-Webhook-Architektur: Robuste Transaktionsverarbeitung aufbauen</h3>


Die Herausforderung:
Zahlungsgateways (Kashier) sind von Natur aus unzuverlässig – Webhooks können in falscher Reihenfolge ankommen, doppelt gesendet werden oder ganz ausbleiben. Ohne idempotente Verarbeitung und atomare Transaktionen könnten Benutzer mit mehreren Buchungen für eine Zahlung enden oder umgekehrt.

Warum das wichtig ist:

Exactly-once-Semantik mittels merchantOrderId als idempotentem Schlüssel; erneut zugestellte Webhooks werden sicher ignoriert.
Datenbanktransaktionen stellen sicher, dass Buchungs- und Zahlungsdatensätze atomar gemeinsam erstellt werden.
Cascading Deletes bei Warenkorbpositionen nur nach bestätigter Zahlung verhindern verlorene Bestellungen.
Webhook-Resilienz: Fehlgeschlagene Zahlungen blockieren zukünftige Versuche nicht; Retry-Logik ist in der Kashier-Konfiguration integriert.

Ergebnis: Keine verlorenen Zahlungen, vorhersehbarer Status, Audit-Trail via response_data JSON-Feld.

3. Echtzeit-Verfügbarkeitsprüfung: Doppelbuchungen verhindern

Die Herausforderung: Zwei Kunden sehen dieselbe Yacht am selben Datum und klicken gleichzeitig auf "Jetzt buchen". Ohne Pessimistic Locking oder intelligente Validierung schlagen beide Buchungen fehl oder überbuchen den Bestand.

Warum das wichtig ist:

Race-Condition-sichere Validierung innerhalb desselben HTTP-Request-Zyklus minimiert Time-of-check-time-of-use (TOCTOU) Race-Windows.
Benutzer-Feedback erfolgt sofort und spezifisch ("nur noch 2 Plätze frei"), was die Conversion fördert.
Webhook-Idempotenz bedeutet, dass die Buchungserstellung sicher ist, wenn die Zahlungsverarbeitung neu versucht wird.
Audit-Trail via yacht_availabilities-Tabelle zeigt die Buchungshistorie.

Ergebnis: Keine Überverkäufe, transparente Verfügbarkeit, sichere Buchungen.

4. Komplexe Preis- & Warenkorb-Engine: Multi-Item, Multi-Währung, Werbelogik

Die Herausforderung: Der Checkout muss den Gesamtpreis unter Berücksichtigung folgender Faktoren berechnen:

Mehrere Warenkorbpositionen (Yachten + Trips gemischt)
Ticketanzahl pro Artikel (Erwachsene/Kind)
Preisvariationen pro Tag (Yacht-Verfügbarkeiten)
Rabattcodes (pauschal oder prozentual)
Upsells (Getränke, Ausrüstungsverleih) mit Preisgestaltung pro Yachthafen
Yachthafen-Steuern (prozentbasiert)

Die technische Lösung:

Warum das wichtig ist:

Komponierbare Preislogik erfordert keinen neuen Code für neue Rabattarten.
Snapshot-Muster (erfasst in der Buchung) sichert historische Genauigkeit; Preisänderungen nach dem Checkout beeinflussen Bestätigungen nicht.
Typsichere Berechnungen mittels Laravels decimal-Cast verhindern Gleitkommafehler.
Frontend-Spiegel (React-Komponenten) nutzt identische Berechnungslogik für die WYSIWYG-Checkout-Vorschau.

5. Frontend-Optimierung: Inertia + React für Stateful SPAs

Die Herausforderung: Traditionelle serverseitig gerenderte Apps erfordern Neuladen der gesamten Seite; SPAs blähen JavaScript-Bundles auf. Inertia schließt diese Lücke: Der Server rendert Seiten als React-Komponenten, hydriert sie mit Props und eliminiert die Komplexität der Status-Synchronisierung.

Warum das wichtig ist:

Typsicherheit über die HTTP-Grenze hinweg via Wayfinder; Routenparameter/Antworten werden automatisch aus Laravel-Routen generiert.
Progressive Enhancement via Deferred Props; Skeleton-UIs laden sofort, während schwere Listen asynchron laden.
Reaktive Updates ohne Neuladen der Seite; Warenkorbänderungen lösen sofortige UI-Updates aus.
Kein JavaScript-Ballast für Seiteninteraktivität; nur kritische UI-Komponenten werden hydriert.

Funktionen & Fähigkeiten

Funktionen für Kunden

Suchen & Durchstöbern: Yachten und Trips nach Stadt, Yachthafen, Kapazität, Preisspanne filtern
Intelligenter Warenkorb: Mehrere Artikel hinzufügen, für später speichern, Mengen/Daten in Echtzeit bearbeiten
Ein-Klick-Checkout: Optimierter Zahlungsablauf mit Kashier 3DS
Doppelte Buchungsmöglichkeit: Yachten (stunden-/tageweise) oder kuratierte Trips (Preise für Erwachsene/Kinder) buchen
Promotion-Engine: Rabattcodes anwenden, Rabatte automatisch berechnen
Upsells: Zusatzservices (Getränke, Ausrüstung) an der Kasse
Chatbot: KI-gestützter Kundensupport mit Fallback auf Kontaktformular
Inhaltsseiten: Galerie-Showcase, FAQs, Über uns/Kontakt

Admin-Dashboard

Buchungsmanagement: Alle Buchungen ansehen, genehmigen, bearbeiten und Zahlungen erfassen
Bestandsmanagement: Yachten/Trips erstellen/bearbeiten, Verfügbarkeit/Preise festlegen
Galeriemanagement: Galeriebilder nach Kategorien hochladen und organisieren
Promo-Codes: Rabattcodes mit Nutzungslimits erstellen/verwalten
Upsells & Add-ons: Zusätzliche Services und Preise konfigurieren
Seiteneinstellungen: FAQs, Kontakteinstellungen, globale Konfiguration verwalten

Technische Features

2FA-Authentifizierung: TOTP-basierte Zwei-Faktor-Authentifizierung
Rollenbasierte Zugriffsrechte: Admin-Policies erzwingen Berechtigungsgrenzen
Responsives Design: Mobile-First, funktioniert auf allen Geräten
Dark Mode: Theme-Persistenz, automatische Erkennung der Systemeinstellungen
Barrierefreiheit: WCAG 2.1 AA-Konformität via Radix UI-Komponenten
SSR-Ready: Serverseitiges Rendering für SEO und schnellere Erstladevorgänge

Projektstruktur

octaboats/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Admin/              # Admin-Dashboard-Controller
│   │   │   ├── Api/                # API-Endpunkte
│   │   │   └── *.php               # Controller für öffentliche Seiten
│   │   ├── Requests/               # Form-Request-Validierung
│   │   ├── Resources/              # JSON-Antwort-Formatierer
│   │   ├── Middleware/             # HTTP-Middleware
│   │   └── Policies/               # Autorisierungs-Policies
│   ├── Models/                     # Eloquent-Modelle
│   ├── Services/                   # Geschäftslogik (Zahlung, Webhook, Seitenaggregation)
│   └── Actions/                    # Single-Action-Klassen (Fortify-Auth)
├── resources/
│   ├── js/
│   │   ├── pages/                  # React-Seitenkomponenten
│   │   │   ├── admin/              # Seiten für Admin-Dashboard
│   │   │   ├── auth/               # Login, Registrierung, Passwort-Reset
│   │   │   └── *.tsx               # Öffentliche Seiten
│   │   ├── components/             # Wiederverwendbare React-Komponenten
│   │   ├── hooks/                  # Eigene React-Hooks
│   │   ├── services/               # Frontend-API-Clients
│   │   ├── types/                  # TypeScript-Interfaces
│   │   ├── layouts/                # Layout-Wrapper
│   │   └── app.tsx                 # Inertia-Setup
│   ├── css/
│   │   └── app.css                 # Tailwind-Direktiven
│   └── views/                      # E-Mail-Vorlagen (Blade)
├── routes/
│   ├── web.php                     # Routen für Gäste/Öffentlichkeit
│   ├── api.php                     # API-Endpunkte
│   ├── admin.php                   # Admin-Dashboard-Routen (erfordert Auth + Admin-Policy)
│   ├── settings.php                # Routen für Benutzereinstellungen
│   └── console.php                 # Artisan-Befehle
├── database/
│   ├── migrations/                 # Schema-Migrationen
│   ├── factories/                  # Modell-Factories für Tests
│   └── seeders/                    # Datenbank-Seeder
├── config/                         # Applikationskonfiguration
├── bootstrap/
│   ├── app.php                     # Applikations-Setup (Middleware, Routing)
│   └── providers.php               # Service-Provider-Registrierung
├── tests/                          # Pest-Tests
├── storage/                        # Uploads, Logs, Cache
├── vite.config.ts                  # Frontend-Build-Konfiguration
├── composer.json                   # PHP-Abhängigkeiten
├── package.json                    # Node-Abhängigkeiten
└── README.md                       # Diese Datei

Sicherheitsüberlegungen

HTTPS erzwungen: Alle externen Integrationen erfordern sichere Verbindungen.
CSRF-Schutz: Token-Validierung bei allen POST/PUT/PATCH/DELETE-Anfragen.
SQL-Injection-Prävention: Parametrisierte Abfragen via Eloquent ORM.
XSS-Prävention: React escaped dynamische Inhalte automatisch; kein dangerouslySetInnerHTML.
Authentifizierung: Fortified 2FA-Unterstützung für Admin-Benutzer.
Zahlungssicherheit: 3DS aktiviert, PCI-Konformität via Kashier.
Sensible Daten: Passwort-Hashing (bcrypt), Secrets in .env, two_factor_*-Felder in API-Antworten verborgen.
WICHTIG: Niemals .env- oder *.key-Dateien committen; .env.example als Vorlage verwenden.

Technologien & Abhängigkeiten

| Layer | Technologie | Version | Zweck | |-------|-----------|---------|---------| | PHP | Laravel Framework | 12.0 | Backend-Framework | | PHP | Laravel Fortify | 1.30 | Headless-Authentifizierung | | PHP | Laravel Inertia | 2.0 | Server-seitige Props an React | | PHP | Laravel Wayfinder | 0.1.9 | Typsichere Routengenerierung | | PHP | Pest | 4.4 | Test-Framework | | Frontend | React | 19.2 | UI-Rendering | | Frontend | TypeScript | Aktuell | Typsicherheit | | Frontend | Tailwind CSS | 4.0 | Utility-First Styling | | Frontend | Radix UI | Aktuell | Headless-Komponenten | | Frontend | Inertia.js | 2.3.7 | Client-seitiger Adapter | | Build | Vite | Aktuell | Schnelles Build-Tool | | Payments | Kashier | Live API | Zahlungsgateway |

Wichtige Erkenntnisse & Best Practices

Dieses Projekt verdeutlicht Engineering auf Produktionsniveau durch:

Architektonische Sauberkeit: Polymorphe Beziehungen eliminieren Codeduplizierung; Thin-Controller delegieren an Services; Policies erzwingen Autorisierung auf Modell-Ebene.
Transaktionale Integrität: Datenbanktransaktionen sichern Buchungs- und Zahlungsatomarität; Webhook-Idempotenz verhindert Doppelverarbeitung.
Typsicherheit: Volle TypeScript-Abdeckung verhindert Laufzeitfehler; Laravel Form Requests validieren serverseitig; API-Resources formen Antworten konsistent.
Performance-Optimierung: Eager Loading eliminiert N+1-Abfragen; intelligentes Caching reduziert Datenbankdruck; Vite-Builds liefern nur das notwendige JavaScript aus.
Benutzererfahrung: Inertia + React bieten SPA-Responsivität ohne JavaScript-Blähungen; Tailwind CSS ermöglicht schnelle, konsistente UI-Iteration.
Testbarkeit: Pests ausdrucksstarke Syntax macht Testabsichten klar; RefreshDatabase-Trait isoliert Tests; Factories liefern realistische Fixtures.
Sicherheit: Fortify behandelt Edge-Cases der Authentifizierung; Policies zentralisieren Autorisierung; Webhook-Verarbeitung der Zahlungen ist idempotent und transaktional.
Entwicklererfahrung: Wayfinder generiert typsichere Routen automatisch; ESLint + Prettier erzwingen Code-Stil; modulare Services fördern Komposition.

Danksagungen

Laravel-Team: Für das elegante, meinungsstarke Framework.
Inertia.js-Autoren: Für die Brücke zwischen server-gerenderten und SPA-Welten.
Tailwind Labs: Für die Ermöglichung schneller, konsistenter UI-Entwicklung.
React Core Team: Für die kampferprobte Komponentenbibliothek.