Travel Booking System

Design a travel booking system (Airbnb, Booking.com) with search, filters, maps, and multi-step booking.

R - Requirements

Key Questions:

• Search by? (dates, location, guests, price)
• Filters? (amenities, rating, price range)
• Map integration? (yes, interactive map)
• Real-time availability? (yes, prevent double booking)
• Multi-step booking? (search → select → book → confirm)

Common Answers:

• Date range, location, guests
• Multiple filters (amenities, price, rating)
• Interactive map with listings
• Real-time availability check

Talking Points:

• Search UI - Date picker, location autocomplete, guest selector, search button
• Search results - List/grid view, map view, filters, sorting, pagination
• Booking UI - Multi-step form, availability check, payment, confirmation

A - Architecture

Booking Flow:

Search & Booking Architecture:

Architecture Decisions:

• SSR/ISR for search pages (SEO) - Pre-render search results for SEO
• Client-side for filters and map - Fast interactions, real-time filtering
• Real-time for availability (WebSocket/SSE) - Prevent double bookings
• State machine for booking flow - Linear flow, validation at each step

Relevant Content:

• Pre-rendering - SSR/ISR
• State Machines - Booking flow
• Real-Time Architecture - Availability

D - Data Model

State Management:

• Search query (dates, location, guests)
• Filter state (amenities, price, rating)
• Selected property
• Booking state (multi-step flow)
• Real-time availability

Implementation Example - Multi-Step Booking State Machine:

// Using XState or similar state machine
const bookingMachine = createMachine({
  id: 'booking',
  initial: 'propertyDetails',
  states: {
    propertyDetails: {
      on: { NEXT: 'selectDates' }
    },
    selectDates: {
      on: { 
        NEXT: 'selectGuests',
        BACK: 'propertyDetails'
      }
    },
    selectGuests: {
      on: {
        NEXT: 'payment',
        BACK: 'selectDates'
      }
    },
    payment: {
      on: {
        NEXT: 'confirmation',
        BACK: 'selectGuests'
      }
    },
    confirmation: {
      type: 'final'
    }
  }
});

// Usage
const [state, send] = useMachine(bookingMachine);
send('NEXT'); // Move to next step
send('BACK'); // Move to previous step

Caching:

• Search results (cache popular searches)
• Property data (normalized cache)
• Filter combinations (cache common filters)

Relevant Content:

• Data Fetching Strategies - Search, caching
• Caching Patterns - Result cache
• Request Deduplication - Same search

I - Interface

Talking Points:

• Search UI - Date picker (range), location autocomplete, guest selector, search button
• Search results - List/grid toggle, map view toggle, filter sidebar, sorting, pagination, virtual scrolling
• Booking UI - Multi-step form (property details → dates → guests → payment → confirm), progress indicator

Features:

• Search UI (date picker, location autocomplete, guest selector)
• Search results (list/grid, map view, filters, sorting)
• Filter sidebar (amenities, price, rating)
• Interactive map (markers, clustering)
• Booking UI (multi-step form, availability check, payment)
• Loading states
• Empty states

Accessibility:

• Keyboard navigation
• Screen reader support
• Form accessibility (date picker, filters)
• Map accessibility (keyboard, screen reader)

Relevant Content:

• Accessible Forms - Multi-step form
• Autocomplete Search - Location search

O - Optimizations

Performance:

• Search debounce (don't search on every keystroke)
• Map lazy loading (load map library on demand)
• Results virtualization (for large result sets)
• Image optimization (property photos, LQIP)
• Prefetch popular searches (load before user searches)

UX:

• Optimistic booking (show confirmation, sync later)
• Filter persistence (remember user preferences)
• Smooth map interactions (60fps pan/zoom)

Relevant Content:

• Virtualized List - Results list
• Progressive Image Loading - Property photos
• Prefetching Strategies - Popular searches
• Optimistic Updates - Booking

Implementation Checklist

• Date range picker
• Location autocomplete
• Filter sidebar (amenities, price, rating)
• Results list/grid
• Interactive map (markers, clustering)
• Multi-step booking flow (state machine)
• Real-time availability check
• Search debounce
• Results virtualization
• Image optimization

Common Pitfalls

❌ Search on every keystroke → Too many requests
✅ Debounce search (300-500ms)

❌ No map lazy loading → Large bundle, slow load
✅ Load map library on demand, code split

❌ Rendering all results → Performance issues
✅ Virtualize results list, paginate or infinite scroll

❌ No real-time availability → Double bookings
✅ WebSocket/SSE for availability updates