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.
Prerequisites
- 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
Design the booking database schema
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.
Build the resource selection and calendar view
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.
Implement conflict detection and booking creation
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.
Send booking confirmations and reminders
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.
Handle cancellations and rescheduling
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 working example
1BOOKING SYSTEM ARCHITECTURE2============================34DATA TYPES:5 Resource: name, type, description, location, is_active6 Booking: resource, user, start_time, end_time, status, notes7 TimeSlot (optional): resource, day_of_week, start_hour, end_hour89CONFLICT DETECTION:10 Search Bookings where:11 resource = selected resource12 AND status is not Cancelled13 AND start_time < new end_time14 AND end_time > new start_time15 If count > 0: CONFLICT — show error16 If count = 0: SAFE — create booking1718BOOKING WORKFLOW:19 1. Run conflict check (backend workflow)20 2. If clear: Create Booking (status: Confirmed)21 3. Send confirmation email22 4. Schedule reminder (24h before start)2324CANCELLATION:25 Allowed: start_time > now + 24 hours26 Action: status → Cancelled, send email27 Not allowed: show policy message2829REMINDER (scheduled, runs hourly):30 Search Bookings where start_time in next 25 hours31 AND reminder_sent = no AND status = Confirmed32 Send reminder email, set reminder_sent = yesCommon mistakes when building a booking system in Bubble.io: Step-by-Step Guide
Why it's a problem: Using only frontend workflows for booking creation
How to avoid: Use a backend workflow for the conflict check and booking creation to reduce the race condition window
Why it's a problem: Checking only start_time equality instead of time range overlap
How to avoid: Use the full overlap formula: existing start < new end AND existing end > new start
Why it's a problem: Not handling time zones for booking times
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a room booking system in Bubble.io where users can see available rooms on a calendar, book time slots, receive confirmation emails, and cancel with a 24-hour policy. Help me design the database and conflict detection logic.
Create a booking page with a resource dropdown, date/time pickers for start and end, and a Book button. The workflow checks for conflicts (overlapping bookings), creates the booking if clear, and sends a confirmation email. Add a Cancel button that works only if the booking is more than 24 hours away.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation