MarketplaceTravel and hospitality

Reservation App

Give a small hotel a website that sells the stay and takes the booking. Guests pick dates, see which rooms are free, book in three steps and pay at the property. Staff run the house from one back office: reservations, calendar, rooms, guests and messages, with calendar sync for Booking.com.

Get this app
  • Included with the Starter and Pro plans
  • An exact copy of the whole application
  • Frontend, backend and data included
  • Yours to keep and change in your own repository
  • Multilanguage, for whatever country you need
Home page hero with a booking bar over the sea at sunset
Home page hero
public pages
10
back office sections
8
backend workflows
23
data tables
10
image bucket for room photos
1
Made for
  • Guesthouses, B&Bs and boutique hotels, from a handful of rooms up to a small property
  • Owners who want more direct bookings
  • Agencies rebranding for a hospitality client
Every screen

See it the way guests and staff do

A website that sells the stay

  • Full-screen hero with a booking bar for dates, guests and room
  • A sliding rail of rooms with photo, price, bed, sleeps and size
  • Story section, amenities band and photo gallery
  • Visit section with address and map link, plus a contact page with a form
Home page hero with a booking bar over the sea at sunset

1 / 8Home page hero with a booking bar over the sea at sunset

How a booking moves

From held dates to checked out

A booking holds its dates straight away. A cancelled one frees them, and a guest can't bring it back.

  1. Pending
  2. Confirmed
  3. Checked in
  4. Checked out
Confirmation page with the booking reference
What you get

The whole application, one to one

Public website

  • Home
  • Rooms
  • Room page
  • Booking
  • Confirmation
  • Contact
  • Sign in
  • Create account
  • Forgot password
  • My bookings

Back office

  • Dashboard
  • Reservations
  • Calendar
  • Rooms
  • Guests
  • Messages
  • Channel sync
  • Settings

Backend

  • 23 workflows for sign-in, rooms, availability, bookings, guests, messages, calendar sync and settings
  • 10 tables: users, rooms, room images, bookings, availability blocks, calendar feeds, sync logs, messages, settings, sign-in link tokens
  • 1 image bucket for room photos

Technology

  • React 18, Tailwind CSS 4, shadcn-style components, Lucide icons
  • Passwords stored as hashes; sign-in uses signed tokens
  • Back office pages and their data require a staff account
  • Sign-in emails sent through Resend
  • Calendar exchange uses the standard iCal format
In the back office

Change it without touching code

  • Property name, address, phone, email, check-in and check-out times
  • Currency, city tax and cancellation policy
  • Every room and its photos
In the code

A quick edit for a full rebrand

  • The home page headline, story, amenities band and guest quotes
  • The “Lagos · Algarve · since 1998” line and the Visit heading
  • The contact and confirmation wording
  • The footer line and the site's page title
  • The site photography
Setting it up

Eight steps to your own booking site

You will need

  • A Ubex account, where the app's workflows and tables run
  • A Resend account with a verified sending domain, for the sign-in link emails
  • Access to the Booking.com extranet, if you want calendar sync
  1. Add the secrets the workflows use: JWT_SECRET, and for sign-in emails RESEND_API_KEY and EMAIL_FROM. APP_URL is optional and sets the address used in the email link.
  2. Verify a sending domain with Resend. Without it the app still works with passwords.
  3. Set the app's address in the allowed origins of the workflows. If the workflow addresses change when the project is copied, update them in the app's API file.
  4. Create the first owner: register an account, then set its role to admin in the Users table.
  5. Remove the demo users, rooms and bookings.
  6. Enter the property's details in Settings and add its rooms and photos in the back office.
  7. For each room, connect the calendars in the Booking.com extranet from the Channel sync page.
  8. Publish the app on a subdomain or custom domain.
Good to know

What it doesn't do

Better to know now than later. You can add any of this yourself: the code is yours to change.

  • No online paymentNo card capture, deposits, refunds or pre-authorisation. Guests pay at the property.
  • No booking emailsConfirmations, reminders and cancellation notices are not sent. The only email is the one-time sign-in link.
  • No alerts for staffNew bookings and messages wait in the back office. Messages have no read state or reply screen: staff reply from their own email.
  • Not a channel managerThe Booking.com connection exchanges dates only, not rates, room counts, guest names or reservation details, and it is not real time.
  • Sync starts by handCalendars sync when staff press Sync. To run it on a timer, add a schedule to the Channel Sync Clock workflow.
  • One price per roomNo seasonal prices, rate plans, minimum stays, discounts or promo codes. City tax is the only extra.
  • Guests can't change a bookingThey cancel and book again.
  • The cancellation policy is textIt is shown to guests. No fees are calculated or charged.
  • Pending bookings don't expireStaff confirm or cancel them. Each guest can hold up to 3 pending bookings.
  • One of eachOne property and one currency per app.
  • No reviews or ratingsThe quotes on the home page are sample text in the code.
  • Few account screensNo password change screen, since “Forgot password” sends a sign-in link. No screen for changing a staff member's role or removing a staff account.
  • Delete rooms with careDeleting a room doesn't check for existing bookings, so hide a room that has them. Room photos can't be reordered by dragging.
  • Back office for desktop and tabletIt is not designed for phones. The guest side is.

Everything in these screens is made up: Casa Aurora, its address, phone numbers and email addresses, its guests, staff, bookings, revenue figures and quotes. The photos are placeholders from Unsplash. They are not part of the app, so replace them with your own.

Take bookings on your own website

Get an exact copy, put your name on it and make it yours.