Fallstudie
Serpentina Transfers: eine Buchungswebsite für Flughafentransfers
Eine Konzept-Website für ein fiktives Transferunternehmen in Brașov, gestaltet und gebaut als Portfolio-Projekt. Sie zeigt, was ein kleines Transfer- oder Tourunternehmen haben kann: einen Festpreis in Sekunden, eine Buchung in unter einer Minute auf dem Handy und ein Dashboard dahinter.
Die Aufgabe
Reisende landen in Bukarest Otopeni, Brașov-Ghimbav, Sibiu oder Cluj und wollen nach Brașov, Poiana Brașov, Bran, Predeal oder Sinaia. Viele kommen aus Deutschland oder Österreich, viele buchen spätabends auf dem Handy. Die Website muss drei Fragen auf einmal beantworten: Was kostet es, wie buche ich, und wer holt mich ab?
Was die Website kann
- Ein Festpreis auf der ersten Seite, pro Fahrzeug, in Euro oder auf den rumänischen Seiten in Lei.
- Das Schild des Fahrers mit dem Namen des Fahrgasts, das sich beim Tippen mitändert.
- Buchung in drei Schritten: Flugsuche, Personen und Gepäck, ein passendes Fahrzeug, Rückfahrt, Kalenderdatei.
- Buchung verwalten: Abholzeit ändern oder stornieren, mit der Erstattungsregel vor der Bestätigung.
- Ein Inhaber-Dashboard: die Fahrten des Tages mit einem Status, der der Uhr folgt, Fahrerzuweisung und ein Preiseditor, der die ganze Website ändert.
- 20 Streckenseiten mit einer Karte aus echten Koordinaten, alles auf Englisch, Rumänisch und Deutsch.
Gestaltung
Der Look kommt aus der Flughafen-Beschilderung: gelbe und schwarze Schilder, nummerierte Abschnitte, ein strenges Raster und eckige Formen. Das prägende Element ist das Namensschild, das jeder Reisende aus der Ankunftshalle kennt. Es gibt keine Fotos: Fahrzeuge und Karte sind im Code gezeichnet. Die Richtung wurde aus zwei Entwürfen in Claude Design gewählt und dann von Hand umgesetzt.
Barrierefreiheit · Tempo
Barrierefreiheit
axe prüft jede Seite bei 375, 768 und 1440 px, Buchung und Stornierung werden nur mit der Tastatur getestet: ein Link zum Inhalt, eine sichtbare Beschriftung an jedem Feld, Fehler in Worten direkt am Feld mit einer Zusammenfassung, die den Fokus erhält, ein nativer Dialog zum Stornieren, ein sichtbarer Fokus und keine Animation für alle, die Bewegung ausgeschaltet haben.
Tempo
Lighthouse-Labormessungen auf der Live-Website (27. September 2026): Leistung 100 am Desktop; auf einem gedrosselten Handy lag der Wert je nach Durchlauf zwischen 73 und 94, gemessen auf einem einfachen Laptop. Barrierefreiheit 100 und Best Practices 100 in jedem Durchlauf. Der SEO-Wert ist absichtlich niedriger: Ein Konzept soll nicht in Suchergebnissen erscheinen.
Technik
- Next.js 16 als statische Website auf GitHub Pages
- React 19, TypeScript, Tailwind CSS 4
- 34 Unit-Tests für Preise, Buchungen, Strecken und die Dashboard-Regeln
- Formatierung, Typen, Lint und Tests bei jedem Push geprüft
- Keine Cookies, keine Tracker, keine Anfragen an andere Websites
Was Demo ist
Es wird nichts berechnet und nichts verschickt. Die Kartenzahlung ist ein gekennzeichneter Platzhalter, an dem eine echte Website den Stripe-Checkout öffnen würde, Buchungen bleiben nur im Browser des Besuchers, und Preise, Fahrer und Flüge sind Beispieldaten.
Gestaltung und Umsetzung: Daniel Butnar.