Website

Harbor Booking

Eine schnelle Buchungs-Website für eine kleine Marina mit Live-Verfügbarkeit der Liegeplätze und gehostetem Checkout.

Platzhalter-Vorschau der Oberfläche von Harbor Booking

Daten zum Projekt

Rolle
Entwickler
Art
Website
Stack
  • Astro
  • TypeScript
  • Stripe Checkout
Dauer
2 Monate
Jahr
2023
Status
Live
Links
Demo

Die Herausforderung

Ein Anruf für jeden Liegeplatz

Jede Buchung erforderte einen Anruf, und die alte Website war in mobilen Netzen langsam.

So entstand es

Der Entwicklungsprozess

Sechs Phasen vom ersten Gespräch bis zum Release. Der Balken zeigt, wie sich die Zeit verteilt hat.

5 Wochen insgesamt

  1. Analyse

    Das Hafenteam zeigte, wie Buchungen per Telefon und E-Mail ankamen und wo sie verloren gingen.

    3 Tage · Buchungsablauf

  2. Architektur

    Datenmodell, Rendering-Strategie und API-Verträge standen fest, bevor der erste Screen entstand.

    3 Tage · ADR, Datenmodell

  3. Oberfläche

    Ein Komponenteninventar und responsive Layouts, vollständig aus Design-Tokens aufgebaut.

    1 Woche · Token-Set, Komponenteninventar

  4. Umsetzung

    Funktionen gingen in kleinen Schritten hinter Feature-Flags live, mit typisierten Grenzen zwischen Client und Server.

    2 Wochen · Feature-Schnitte

  5. Tests

    Unit-, End-to-End- und Barrierefreiheitstests liefen bei jedem Pull Request.

    2 Tage · Testsuite in der CI

  6. Deployment

    Jeder Branch bekam eine Vorschau-Umgebung; der Rollout in die Produktion war ein Klick.

    2 Tage · Vorschau- und Release-Pipeline

  7. Ergebnis

    Die Online-Buchungen stiegen in der ersten Saison um ein Drittel.

Ansichten

Wirkung

Die Ergebnisse

Platzhalter-Vorschau der Oberfläche von Harbor Booking

Was sich nach dem Launch verändert hat

Die Online-Buchungen stiegen in der ersten Saison um ein Drittel.

  • Astro
  • TypeScript
  • Stripe Checkout

Kennzahlen

Buchungen
+32 %
LCP
0,8 s
SEO-Score
100

Unter der Haube

Statisch als Standard

Nur der Verfügbarkeitskalender liefert JavaScript aus; alles andere ist statisches HTML.

  • Astro
  • TypeScript
  • Stripe Checkout

Nächstes Projekt

So etwas geplant? Lass uns reden.

Lass uns reden

Erzähl mir von deinem Projekt. Ich antworte in der Regel innerhalb von zwei Werktagen.