Semesterprojekt Webentwicklung 2, Astro + SolidJS · 2026
Celestial Haven
Kein Klick-Dummy: ein Buchungssystem, das wirklich bucht, vom Kalender bis in die Datenbank selbst geschrieben.
- Rolle
- Studienprojekt Webentwicklung 2, Team (2 Personen), UI/UX-Design & Full-Stack-Entwicklung
- Methodik
- System- & Interaction-Design, Entwicklung in Astro und SolidJS gegen eine echte Datenbank
- Projektziel
- Der Schwerpunkt lag auf dem Buchungssystem: keine nachgebaute Buchung, sondern eine echte, mit realer Verfügbarkeit, Preisberechnung und Speicherung.
- Jahr
- 2026
Tools & Stack
- Astro 6
- SolidJS
- TypeScript
- Tailwind CSS 4
- 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.
Technisch ist die Startseite komplett statisch: Astro liefert reines HTML aus, kein JavaScript im Browser. Das hält sie schnell und macht den Unterschied zum interaktiven Buchungsteil sichtbar.
Der Buchungs-Flow
Herzstück ist ein 5-stufiger Buchungs-Flow: Suite wählen, Zeitraum festlegen, Extras ergänzen, Kontaktdaten, Bestätigung. Gebaut als SolidJS-Komponente mit rund 490 Zeilen und 19 Signals, sodass Nächte und Gesamtpreis bei jeder Änderung live neu berechnet werden.
Der Kalender zieht belegte Nächte direkt aus den Buchungen und Sperrzeiten der Datenbank, ohne zweite Tabelle, die auseinanderlaufen könnte. Gespeichert wird erst nach einer erneuten Prüfung auf dem Server, Preise werden dort neu gerechnet statt aus dem Browser übernommen.
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.
Technisch: Astro 6 für die Seiten, SolidJS für die interaktiven Teile, TypeScript, SQLite. Astro im SSR-Modus, 4 Tabellen, rund 20 API-Endpunkte, bcrypt-gehashte Passwörter und httpOnly-JWT-Sessions.
Links
Zum Ausprobieren, live und direkt auf deinem Gerät.
