# How to build a booking system in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Building a booking system in Bubble involves creating resource and time slot Data Types, implementing conflict prevention logic, building a calendar-based selection interface, sending confirmation notifications, and handling cancellation policies. This tutorial covers the complete architecture for resource-based scheduling of rooms, equipment, or people with automatic conflict detection.

## Overview: Building a Booking System in Bubble

This tutorial guides you through building a complete booking system in Bubble. You will create a resource management structure, implement time slot selection with conflict prevention, build the user-facing booking flow, and add confirmation emails and cancellation workflows.

## Before you start

- A Bubble app with user authentication
- Understanding of Bubble Data Types and workflows
- A SendGrid or email plugin for confirmation notifications (optional)

## Step-by-step guide

### 1. Design the booking database schema

Create these Data Types: (1) Resource — fields: name (text), type (Option Set: ResourceType — Room, Equipment, Person), description (text), location (text), is_active (yes/no). (2) Booking — fields: resource (Resource), user (User), start_time (date), end_time (date), status (Option Set: BookingStatus — Pending, Confirmed, Cancelled), notes (text), cancellation_reason (text). (3) Optionally, TimeSlot — fields: resource (Resource), day_of_week (Option Set), start_hour (number), end_hour (number), is_available (yes/no). TimeSlots define recurring availability windows for each resource.

**Expected result:** Your database supports resources, bookings with time ranges, and optional availability schedules.

### 2. Build the resource selection and calendar view

Create a booking page with a Dropdown or card-based selector for resources (filtered by type). Below, display a weekly calendar view using a Repeating Group with 7 columns (days) and rows for each hour. Show existing bookings as colored blocks within the calendar cells. Users click an available time slot to start the booking process. For a simpler approach, use two Date/Time Pickers for start and end time instead of a visual calendar. Filter resource options by availability using constraints.

**Expected result:** Users can browse resources, view availability on a calendar, and select their desired time slot.

### 3. Implement conflict detection and booking creation

When the user clicks Book, run a conflict check before creating the Booking. Search for existing Bookings where resource = selected resource AND status is not Cancelled AND ((start_time is before new end_time) AND (end_time is after new start_time)). This overlap check catches all conflict scenarios. If the search returns results, show an error: 'This time slot is already booked.' If no conflicts, create the Booking with status = Confirmed. Use a backend workflow for the creation to prevent race conditions where two users book simultaneously.

> Pro tip: Run the conflict check in a backend workflow with 'Ignore privacy rules' to ensure you catch all existing bookings regardless of the current user's privacy context.

**Expected result:** Bookings are created only when no time conflicts exist, preventing double bookings.

### 4. Send booking confirmations and reminders

After creating a Booking, send a confirmation email to the user with booking details (resource, date, time, location). Use the SendGrid plugin or Bubble's built-in email action. Create a scheduled backend workflow that runs 24 hours before each booking's start_time, sending a reminder email. For the reminder, search for Bookings where start_time is between now and now + 25 hours and reminder_sent is no. After sending the reminder, set reminder_sent to yes on the Booking.

**Expected result:** Users receive confirmation emails immediately and reminder emails 24 hours before their booking.

### 5. Handle cancellations and rescheduling

Add a Cancel Booking button on the user's booking detail page. The cancellation workflow: check if cancellation is within the allowed window (e.g., at least 24 hours before start_time). If allowed, change status to Cancelled and send a cancellation confirmation email. If too late, show a message about the cancellation policy. For rescheduling, cancel the existing booking and create a new one with the updated time (running conflict detection again). Add a cancellation_reason field to track why bookings are cancelled.

**Expected result:** Users can cancel bookings within the policy window and receive cancellation confirmation.

## Complete code example

File: `Workflow summary`

```text
BOOKING SYSTEM ARCHITECTURE
============================

DATA TYPES:
  Resource: name, type, description, location, is_active
  Booking: resource, user, start_time, end_time, status, notes
  TimeSlot (optional): resource, day_of_week, start_hour, end_hour

CONFLICT DETECTION:
  Search Bookings where:
    resource = selected resource
    AND status is not Cancelled
    AND start_time < new end_time
    AND end_time > new start_time
  If count > 0: CONFLICT — show error
  If count = 0: SAFE — create booking

BOOKING WORKFLOW:
  1. Run conflict check (backend workflow)
  2. If clear: Create Booking (status: Confirmed)
  3. Send confirmation email
  4. Schedule reminder (24h before start)

CANCELLATION:
  Allowed: start_time > now + 24 hours
  Action: status → Cancelled, send email
  Not allowed: show policy message

REMINDER (scheduled, runs hourly):
  Search Bookings where start_time in next 25 hours
    AND reminder_sent = no AND status = Confirmed
  Send reminder email, set reminder_sent = yes
```

## Common mistakes

- **Using only frontend workflows for booking creation** — Two users could pass the conflict check simultaneously and both create bookings for the same slot, since frontend workflows cannot lock records Fix: Use a backend workflow for the conflict check and booking creation to reduce the race condition window
- **Checking only start_time equality instead of time range overlap** — Bookings often span different durations — checking only start_time misses bookings that overlap partially Fix: Use the full overlap formula: existing start < new end AND existing end > new start
- **Not handling time zones for booking times** — Users in different time zones may see different times for the same booking slot, causing confusion Fix: Store all times in UTC and display in the user's local timezone using Bubble's date formatting

## Best practices

- Use the complete overlap formula for conflict detection
- Create bookings in backend workflows to minimize race conditions
- Send confirmation emails and schedule reminders automatically
- Store all booking times in UTC for time zone consistency
- Define clear cancellation policies and enforce them in workflows
- Add a reminder_sent field to prevent duplicate reminder emails

## Frequently asked questions

### How do I prevent double bookings completely?

Use backend workflows for booking creation to minimize the race condition window. For absolute prevention in high-volume scenarios, implement an optimistic locking pattern with a version field on the resource.

### Can I add recurring bookings?

Yes. Create a RecurringBooking Data Type with pattern fields (weekly, biweekly, etc.) and a backend workflow that generates individual Booking records for each occurrence.

### How do I show availability on a calendar?

Use a Repeating Group laid out as a weekly grid. Query existing bookings for the displayed week and show them as colored blocks. Empty cells represent available time slots.

### Can I charge for bookings through Stripe?

Yes. Add a Stripe checkout step between conflict detection and booking confirmation. Only create the Booking after successful payment.

### Can RapidDev help build a booking system in Bubble?

Yes. RapidDev can build complete booking systems with calendar views, conflict prevention, payment integration, reminder notifications, and cancellation management tailored to your specific resource types.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-a-booking-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-a-booking-system-in-bubble