Für das fiktive Hotel Celestial Haven haben wir die Website gestaltet und ein Buchungsportal entwickelt, das wirklich bucht: Gäste wählen Zeitraum und Suite, und die Buchung landet in einer echten Datenbank. Kein Klick-Dummy, sondern vom Kalender bis in die Datenbank selbst geschrieben.
- Projektart
- Semesterprojekt Webentwicklung 2, Astro + SolidJS
- Rolle
- Zweierprojekt: Full-Stack-Entwicklung & UI/UX-Design
- Jahr
- 2026
- Tools & Stack
- Astro 6
- SolidJS
- TypeScript
- Tailwind CSS 4
- SQLite
Die Technik dahinter
Umgesetzt haben wir das Projekt mit Astro und SolidJS: Astro liefert die Seiten und Routen, SolidJS übernimmt überall dort, wo es interaktiv wird, etwa im Buchungs-Flow und im Admin-Dashboard. Alles ist in TypeScript geschrieben, das Styling läuft über Tailwind CSS.
Als Datenbank dient SQLite. Dort liegen Suiten, Buchungen und Sperrzeiten, und Gäste-Ansicht und Admin-Bereich greifen auf dieselben Daten zu. Der Admin-Bereich liegt hinter einem eigenen Login.
Gäste
Hausleitung (mit Login)
Seiten und Interaktion
Astro + SolidJS
Gespeicherte Daten
SQLite
Die Startseite
Die Startseite empfängt mit einem Video der Klippen-Suiten statt eines Standbilds, darunter sechs Suiten mit eigener kleiner Geschichte. Ruhige, editoriale Gestaltung: Serifen-Headlines, warme Stein- und Meerestöne, viel Weißraum.
Die Startseite soll Atmosphäre statt Information liefern: wenig Text, große Bilder, jede Suite mit eigener kleiner Geschichte. Die Details und Preise kommen erst, wenn Gäste sich für eine Suite interessieren.
Der Buchungs-Flow
Herzstück ist ein 5-stufiger Buchungs-Flow: Suite wählen, Zeitraum festlegen, Extras ergänzen, Kontaktdaten, Bestätigung. Damit das Buchen so einfach wie möglich bleibt, entscheiden Gäste immer nur eine Sache pro Schritt, und Nächte und Gesamtpreis werden bei jeder Änderung live neu berechnet.
Der Kalender zeigt belegte Nächte direkt aus den echten Buchungen und Sperrzeiten, sodass Gäste nur Zeiträume wählen können, die wirklich frei sind. Vor dem Speichern prüft das System alles noch einmal.
Admin-Bereich
Hinter dem Login liegt ein Dashboard mit 4 Ansichten: Wochenübersicht, Buchungsliste mit Filtern und Gantt-Kalender, Suiten-Stammdaten und Sperrzeiten. So schließt sich der Kreis: Was Gäste buchen, verwaltet die Hausleitung auf genau denselben Daten, eine gesperrte Nacht verschwindet sofort aus dem Gäste-Kalender.
Behind the Scenes
Kein Klick-Dummy, sondern echter Code
Geschrieben haben wir den Code gemeinsam mit Claude, aber nicht blind: Architektur, Datenmodell und Login haben wir selbst aufgebaut, jede Datei durchgelesen und verstanden, und wo etwas nicht zu unserer Struktur passte, umgeschrieben. Die KI war Werkzeug und Sparringspartner für Kleinteiliges, die Entscheidungen lagen bei uns.
Der Schwerpunkt im Fach war der Code, das Design gehört trotzdem dazu: Ich habe das Erscheinungsbild und die Buchungsführung gestaltet. Zwei Dinge waren mir wichtig: ein modernes, ruhiges Design und ein möglichst einfacher Buchungsflow.
Links
Zum Ausprobieren, live und direkt auf deinem Gerät.
New York
Marokko