Eine Buchungs-App mit Coderblock erstellen: Schritt für Schritt

Was du erstellen wirst

In diesem Tutorial erstellst du eine vollständige Buchungs-App, in der sich Kunden registrieren, verfügbare Zeitfenster ansehen, Termine buchen und ihre Buchungen verwalten können. Den Mitarbeitern steht außerdem ein Admin-Dashboard zur Verfügung, über das sie Termine prüfen und aktualisieren können. Coderblock generiert anhand natürlichsprachlicher Anweisungen das React-Frontend, die Backend-Logik, die Postgres-Datenbank, die Authentifizierung und die Sicherheitsrichtlinien. Du steuerst die Entwicklung direkt über den Chat, ohne API-Routen, Authentifizierungscode oder Datenbankmigrationen manuell schreiben zu müssen.

1. Projekt starten

Erstelle ein neues Projekt in Coderblock. Du kannst mit der Vorlage für Buchungsplattformen beginnen oder deine App von Grund auf beschreiben. Für eine individuelle Lösung kannst du mit einem Prompt wie diesem starten:

Erstelle eine responsive Buchungs-App für ein Wellnesscenter. Besucher sollen sich die angebotenen Leistungen und verfügbaren Zeitfenster ansehen können. Registrierte Kunden können Termine buchen, verschieben oder stornieren. Die Mitarbeiter benötigen ein Admin-Dashboard, um Leistungen, Arbeitszeiten und Buchungen zu verwalten. Verwende ein klares, entspannendes Design, das für Mobilgeräte optimiert ist.

Gib an, um welche Art von Unternehmen es sich handelt, wer die App verwenden wird, wie lange Buchungen dauern und welchen visuellen Stil du bevorzugst. Je mehr Kontext du dem Agenten gibst, desto besser entspricht die erste Version deinen Anforderungen.

2. Erste Version generieren und prüfen

Coderblock generiert eine echte Full-Stack-App und verwendet dafür React, Vite, TypeScript und Tailwind CSS im Frontend. Außerdem erhält die App ein eigenes Supabase-Projekt mit Postgres, Authentifizierung, Storage und Row Level Security.

Öffne die Live-Entwicklungsvorschau unter der .coderblock.dev-Adresse deines Projekts. Während du im Chat weiterarbeitest, werden Änderungen innerhalb weniger Sekunden übernommen und angezeigt. Bevor du neue Funktionen hinzufügst, solltest du die wichtigsten Ansichten prüfen:

• Startseite
• Leistungsverzeichnis
• Verfügbarkeitskalender
• Buchungsformular
• Persönlicher Kundenbereich
• Mitarbeiter-Dashboard

Wenn etwas nicht funktioniert oder nicht deinen Vorstellungen entspricht, fordere gezielte Änderungen an, statt von vorn zu beginnen. Zum Beispiel:

Gestalte die Leistungskarten kompakter, ergänze jede Karte um Dauer und Preis und zeige die Buchungsübersicht auf dem Desktop dauerhaft an.

Oder:

Zeige auf Mobilgeräten zuerst die Leistungsauswahl, danach den Kalender und zum Schluss die verfügbaren Uhrzeiten an.

3. Buchungsdaten festlegen

Beschreibe dem Agenten nun, welche Informationen die App verwalten soll. In diesem Beispiel umfassen die wichtigsten Daten Leistungen, Mitarbeiter, Verfügbarkeiten, Buchungen und Kundenprofile. Du kannst einen Prompt wie diesen verwenden:

Erstelle die Datenbankstruktur für Leistungen, Mitarbeiter, wöchentliche Verfügbarkeiten, gesperrte Termine und Buchungen. Jede Buchung muss den Kunden, die Leistung, den Mitarbeiter, die Startzeit, die Endzeit, den Status, Notizen und den Zahlungsstatus enthalten. Füge geeignete Beziehungen und Indizes hinzu.

Der Agent entwirft das Postgres-Schema und führt die Migrationen aus. Die erstellten Tabellen kannst du im Tab Backend des Editors zusammen mit den authentifizierten Benutzern, dem Storage und den Funktionen überprüfen. Um die ersten Oberflächentests zu vereinfachen, kannst du auch einige Beispieldaten hinzufügen lassen:

Füge drei Beispielangebote mit unterschiedlichen Laufzeiten und Preisen, zwei Mitarbeiter und deren Verfügbarkeiten für die nächsten zwei Wochen hinzu.

4. Benutzeranmeldung und Berechtigungen hinzufügen

Jede App enthält bereits eine Profiltabelle und eine grundlegende Rollenstruktur. Nun kannst du Coderblock damit beauftragen, die vollständige Kontoverwaltung zu erstellen:

Füge die Registrierung und Anmeldung für Kunden per E-Mail und Passwort hinzu. Schütze die Buchungsseite der Kunden und das Mitarbeiter-Dashboard. Kunden dürfen nur ihre eigenen Buchungen anzeigen und bearbeiten. Mitarbeiter können alle Leistungen, Arbeitszeiten und Buchungen verwalten.

Der Agent konfiguriert Supabase Auth, die Sitzungsverwaltung, geschützte Routen und die Row Level Security von Postgres. Du musst weder eine eigene Passworttabelle anlegen noch Code für JWTs oder das Hashing von Passwörtern schreiben. Wenn du zusätzlich die Anmeldung über soziale Netzwerke anbieten möchtest, kannst du dies ausdrücklich anfordern. Teste jetzt beide Rollen: Melde dich einmal als Kunde und einmal als Mitarbeiter an und vergewissere dich, dass jeder Benutzer nur die zulässigen Daten sehen und die für ihn freigegebenen Aktionen ausführen kann.

5. Zuverlässige Verfügbarkeitsregeln erstellen

Ein Buchungssystem benötigt mehr als nur einen Kalender. Die verfügbaren Zeitfenster müssen Arbeitszeiten, die Dauer der Leistung, bereits vorhandene Buchungen und mögliche Sperrzeiten berücksichtigen. Beschreibe diese Regeln direkt in natürlicher Sprache:

Erzeuge die verfügbaren Zeitfenster anhand der Arbeitszeiten der einzelnen Mitarbeiter. Schließe gesperrte Termine und bestehende Buchungen aus, plane zwischen Terminen einen Puffer von 15 Minuten ein und verhindere, dass Kunden bereits vergangene Zeiten buchen.

Auch gleichzeitige Anfragen müssen korrekt verarbeitet werden:

Verhindere Doppelbuchungen sowohl auf Datenbank- als auch auf Backend-Ebene, selbst wenn zwei Kunden fast gleichzeitig dasselbe Zeitfenster auswählen. Zeige eine verständliche Meldung an, wenn ein Zeitfenster vor der Bestätigung nicht mehr verfügbar ist.

Teste Leistungen mit unterschiedlicher Dauer, Termine kurz vor Geschäftsschluss, Stornierungen und Tage ohne verbleibende Verfügbarkeit.

6. Abläufe für Kunden und Administratoren erstellen

Der Ablauf für Kunden sollte einfach und vorhersehbar sein: Leistung auswählen, bei Bedarf einen Mitarbeiter bestimmen, eine Uhrzeit auswählen, die Angaben bestätigen und eine Buchungsbestätigung erhalten. Du kannst ihn mit einem Prompt wie diesem optimieren:

Füge eine abschließende Bestätigungsseite hinzu, auf der Leistung, Mitarbeiter, Datum, Uhrzeit, Dauer und Preis angezeigt werden. Leite den Kunden nach der Buchung zum Bereich „Meine Buchungen“ weiter, wo er zukünftige Termine verschieben oder stornieren kann.

Für die Mitarbeiter solltest du stattdessen eine stärker auf die tägliche Arbeit ausgerichtete Ansicht anfordern:

Füge ein Admin-Dashboard mit Tages- und Wochenansichten der Buchungen, Filtern nach Mitarbeiter und Status sowie Steuerelementen zum Bestätigen, Abschließen und Stornieren einer Buchung hinzu. Ergänze Übersichtskarten für die heutigen Buchungen und die nächsten Termine.

7. Gesamten Stack prüfen und testen

Teste die App jetzt mit verschiedenen Benutzern. Erstelle zwei Kundenkonten und ein Mitarbeiterkonto und überprüfe Folgendes:

• Nicht angemeldete Besucher dürfen nicht auf geschützte Seiten zugreifen.
• Kunden dürfen die Buchungen anderer Kunden nicht sehen.
• Mitarbeiter können Buchungen verwalten, während Kunden keinen Zugriff auf die Admin-Funktionen haben.
• Stornierte Zeitfenster werden wie vorgesehen wieder verfügbar.
• Ungültige oder kollidierende Buchungen werden abgelehnt.
• Das Layout bleibt sowohl auf Desktop- als auch auf Mobilgeräten benutzerfreundlich.

Wenn du ein Problem findest, beschreibe direkt im Chat, was du getan hast und welches Ergebnis du erwartet hattest. Zum Beispiel:

Wenn ein Kunde einen Termin storniert, bleibt das Zeitfenster weiterhin nicht verfügbar. Korrigiere die Berechnung der Verfügbarkeiten und füge einen Test für diesen Fall hinzu.

8. Bei Bedarf Stripe-Zahlungen hinzufügen

Wenn für Termine eine Anzahlung oder vollständige Zahlung erforderlich ist, kannst du Folgendes anfordern:

Ermögliche Kunden, bei der Bestätigung einer Buchung eine Anzahlung von 20 $ zu leisten. Starte im Stripe-Testmodus und aktualisiere den Zahlungsstatus der Buchung, sobald der Checkout abgeschlossen ist.

In der Standardkonfiguration kann der Agent ein verwaltetes Stripe-Konto erstellen, nachdem er dich nach einigen Angaben wie dem Land und dem Unternehmensnamen gefragt hat. API-Schlüssel sind nicht erforderlich, und Coderblock verwaltet den Zahlungs-Webhook. Die Einrichtung der Zahlungen und die Identitätsprüfung kannst du später über den vom Agenten bereitgestellten Stripe-Link abschließen. Wenn du lieber dein eigenes Stripe-Konto verwenden möchtest, wähle die Option BYOK. Der Agent fordert STRIPE_SECRET_KEY über einen sicheren, speziell für Umgebungsvariablen vorgesehenen Ablauf an, speichert den Schlüssel serverseitig und registriert den Webhook automatisch. Gib sensible Daten niemals direkt in den Chat oder den generierten Code ein. Teste erfolgreiche, abgebrochene und fehlgeschlagene Zahlungen, bevor du in den Live-Modus wechselst.

9. Buchungs-App veröffentlichen

Wenn du alle Tests abgeschlossen hast, klicke auf Publish. Coderblock stellt die App unter der zugehörigen .coderblock.app-Adresse in der Produktionsumgebung bereit, einschließlich SSL. Bei späteren Veröffentlichungen werden Aktualisierungen schnell übernommen. Wenn du eine eigene Domain verwenden möchtest, öffne Settings → Domains. Du kannst eine bestehende Domain mithilfe des Assistenten für die DNS-Konfiguration verbinden oder direkt in Coderblock eine Domain kaufen. In diesem Fall werden DNS und SSL automatisch eingerichtet.

Bevor du die App als fertig betrachtest, solltest du über die Produktionsdomain eine echte Testbuchung durchführen. Prüfe die Anmeldung, die Verfügbarkeiten, die Buchungsverwaltung, gegebenenfalls die Zahlungen und das Mitarbeiter-Dashboard. Damit hast du eine echte Full-Stack-Buchungs-App erstellt, die sofort eingesetzt und über denselben chatbasierten Arbeitsablauf kontinuierlich weiterentwickelt werden kann.