MarketplaceReisen und Hotellerie

Reservierungs-App

Geben Sie einem kleinen Hotel eine Website, die den Aufenthalt verkauft und die Buchung gleich mit annimmt. Gäste wählen Daten, sehen freie Zimmer, buchen in drei Schritten und zahlen vor Ort. Das Team führt das Haus aus einem Backoffice: Reservierungen, Kalender, Zimmer, Gäste und Nachrichten, mit Kalendersynchronisierung für Booking.com.

Diese App holen
  • In den Plänen Starter und Pro enthalten
  • Eine exakte Kopie der ganzen Anwendung
  • Frontend, Backend und Daten inklusive
  • Ihre App zum Behalten und Ändern, in Ihrem eigenen Repository
  • Mehrsprachig, für jedes Land, das Sie brauchen
Startseiten-Hero mit Buchungsleiste über dem Meer bei Sonnenuntergang
Startseiten-Hero
öffentliche Seiten
10
Backoffice-Bereiche
8
Backend-Workflows
23
Datentabellen
10
Bild-Bucket für Zimmerfotos
1
Gemacht für
  • Pensionen, B&Bs und Boutique-Hotels, von wenigen Zimmern bis zum kleinen Haus
  • Inhaber, die mehr Direktbuchungen möchten
  • Agenturen, die für einen Kunden aus der Hotellerie rebranden
Jede Ansicht

So sehen es Gäste und Team

Eine Website, die den Aufenthalt verkauft

  • Vollbild-Hero mit Buchungsleiste für Daten, Gäste und Zimmer
  • Eine verschiebbare Zimmerleiste mit Foto, Preis, Bett, Personenzahl und Größe
  • Abschnitt zur Geschichte des Hauses, Ausstattungsband und Fotogalerie
  • Anfahrtsbereich mit Adresse und Kartenlink sowie Kontaktseite mit Formular
Startseiten-Hero mit Buchungsleiste über dem Meer bei Sonnenuntergang

1 / 8Startseiten-Hero mit Buchungsleiste über dem Meer bei Sonnenuntergang

So läuft eine Buchung

Von reservierten Daten bis zum Check-out

Eine Buchung reserviert ihre Daten sofort. Eine stornierte gibt sie wieder frei, und Gäste können sie nicht zurückholen.

  1. Ausstehend
  2. Bestätigt
  3. Eingecheckt
  4. Ausgecheckt
Bestätigungsseite mit Buchungsreferenz
Das bekommen Sie

Die ganze Anwendung, eins zu eins

Öffentliche Website

  • Startseite
  • Zimmer
  • Zimmerseite
  • Buchung
  • Bestätigung
  • Kontakt
  • Anmelden
  • Konto erstellen
  • Passwort vergessen
  • My bookings

Backoffice

  • Dashboard
  • Reservierungen
  • Kalender
  • Zimmer
  • Gäste
  • Nachrichten
  • Channel Sync
  • Einstellungen

Backend

  • 23 Workflows für Anmeldung, Zimmer, Verfügbarkeit, Buchungen, Gäste, Nachrichten, Kalendersync und Einstellungen
  • 10 Tabellen: Benutzer, Zimmer, Zimmerbilder, Buchungen, Verfügbarkeitssperren, Kalender-Feeds, Sync-Protokolle, Nachrichten, Einstellungen, Anmeldelink-Tokens
  • 1 Bild-Bucket für Zimmerfotos

Technologie

  • React 18, Tailwind CSS 4, Komponenten im shadcn-Stil, Lucide-Icons
  • Passwörter werden als Hashes gespeichert; die Anmeldung nutzt signierte Tokens
  • Backoffice-Seiten und ihre Daten erfordern ein Mitarbeiterkonto
  • Anmelde-E-Mails werden über Resend versendet
  • Der Kalenderaustausch nutzt das Standardformat iCal
Im Backoffice

Ändern, ohne Code anzufassen

  • Name des Hauses, Adresse, Telefon, E-Mail, Check-in- und Check-out-Zeiten
  • Währung, Kurtaxe und Stornierungsbedingungen
  • Jedes Zimmer und seine Fotos
Im Code

Schnell geändert für ein komplettes Rebranding

  • Überschrift, Geschichte, Ausstattungsband und Gästezitate der Startseite
  • Die Zeile „Lagos · Algarve · since 1998“ und die Überschrift des Anfahrtsbereichs
  • Die Texte auf Kontakt- und Bestätigungsseite
  • Die Fußzeile und der Seitentitel
  • Die Fotos der Website
Einrichtung

Acht Schritte zu Ihrer eigenen Buchungsseite

Das brauchen Sie

  • Ein Ubex-Konto, auf dem die Workflows und Tabellen der App laufen
  • Ein Resend-Konto mit verifizierter Absenderdomain für die E-Mails mit dem Anmeldelink
  • Zugang zum Booking.com-Extranet, wenn Sie die Kalendersynchronisierung nutzen möchten
  1. Legen Sie die Secrets an, die die Workflows nutzen: JWT_SECRET und für Anmelde-E-Mails RESEND_API_KEY und EMAIL_FROM. APP_URL ist optional und legt die Adresse im E-Mail-Link fest.
  2. Verifizieren Sie eine Absenderdomain bei Resend. Ohne sie funktioniert die App weiterhin mit Passwörtern.
  3. Tragen Sie die Adresse der App in die erlaubten Origins der Workflows ein. Ändern sich die Workflow-Adressen beim Kopieren des Projekts, aktualisieren Sie sie in der API-Datei der App.
  4. Legen Sie den ersten Inhaber an: Registrieren Sie ein Konto und setzen Sie dessen Rolle in der Tabelle „Users“ auf admin.
  5. Entfernen Sie die Demo-Benutzer, -Zimmer und -Buchungen.
  6. Tragen Sie die Daten des Hauses in den Einstellungen ein und fügen Sie im Backoffice Zimmer und Fotos hinzu.
  7. Verbinden Sie für jedes Zimmer die Kalender im Booking.com-Extranet über die Seite „Channel sync“.
  8. Veröffentlichen Sie die App auf einer Subdomain oder eigenen Domain.
Gut zu wissen

Was die App nicht kann

Besser jetzt wissen als später. All das können Sie selbst ergänzen: Den Code können Sie beliebig ändern.

  • Keine Online-ZahlungKeine Kartenerfassung, Anzahlungen, Erstattungen oder Vorautorisierungen. Gäste zahlen vor Ort.
  • Keine Buchungs-E-MailsBestätigungen, Erinnerungen und Stornierungshinweise werden nicht verschickt. Die einzige E-Mail ist der einmalige Anmeldelink.
  • Keine Hinweise für das TeamNeue Buchungen und Nachrichten warten im Backoffice. Nachrichten haben keinen Gelesen-Status und keine Antwortansicht: Das Team antwortet aus dem eigenen E-Mail-Konto.
  • Kein Channel ManagerDie Verbindung zu Booking.com tauscht nur Daten aus, keine Preise, Zimmerkontingente, Gästenamen oder Reservierungsdetails, und sie arbeitet nicht in Echtzeit.
  • Sync startet von HandDie Kalender werden synchronisiert, wenn das Team auf Sync klickt. Für einen Zeitplan fügen Sie dem Workflow „Channel Sync Clock“ einen Schedule hinzu.
  • Ein Preis pro ZimmerKeine Saisonpreise, Ratenpläne, Mindestaufenthalte, Rabatte oder Gutscheincodes. Die Kurtaxe ist der einzige Zuschlag.
  • Gäste können eine Buchung nicht ändernSie stornieren und buchen neu.
  • Stornierungsbedingungen sind nur TextSie werden Gästen angezeigt. Gebühren werden weder berechnet noch eingezogen.
  • Ausstehende Buchungen laufen nicht abDas Team bestätigt oder storniert sie. Jeder Gast kann bis zu 3 ausstehende Buchungen haben.
  • Jeweils nur einsEin Haus und eine Währung pro App.
  • Keine BewertungenDie Zitate auf der Startseite sind Beispieltext im Code.
  • Wenige KontoansichtenKeine Ansicht zum Ändern des Passworts, denn „Passwort vergessen“ schickt einen Anmeldelink. Keine Ansicht, um die Rolle eines Teammitglieds zu ändern oder ein Mitarbeiterkonto zu entfernen.
  • Zimmer mit Bedacht löschenBeim Löschen eines Zimmers werden bestehende Buchungen nicht geprüft, blenden Sie ein solches Zimmer also aus. Die Reihenfolge der Zimmerfotos lässt sich nicht per Ziehen ändern.
  • Backoffice für Desktop und TabletEs ist nicht für Smartphones ausgelegt. Die Gästeseite schon.

Alles in diesen Ansichten ist erfunden: Casa Aurora, Adresse, Telefonnummern und E-Mail-Adressen, Gäste, Team, Buchungen, Umsatzzahlen und Zitate. Die Fotos sind Platzhalter von Unsplash. Sie gehören nicht zur App, ersetzen Sie sie also durch eigene.

Nehmen Sie Buchungen auf Ihrer eigenen Website an

Holen Sie sich eine exakte Kopie, setzen Sie Ihren Namen darauf und machen Sie sie zu Ihrer App.