Airbnb Host Pricing & Availability Calendar

System Design

hard

Airbnb Host Pricing & Availability Calendar

Hard

frontend

system design

architecture

caching

state management

api design

Design the frontend architecture for a highly interactive and performant pricing and availability calendar for Airbnb hosts. This component is critical for a host's business, allowing them to manage their listing's price, availability, and booking rules for up to two years in the future. The system must handle a large amount of data, provide a fluid user experience, and be resilient to network failures.

Constraints

Scale: The calendar must display data for 24 months.
Performance: Initial load should be under 2 seconds on a standard 4G connection. User interactions (e.g., selecting a date range, opening a modal) must feel instantaneous (<100ms).
Data Volume: Each day has multiple data points: price, availability status (available, blocked, booked), booking details, demand predictions, and custom rules.
Concurrency: Assume the host might have the calendar open on multiple devices, or a co-host might be making changes simultaneously.

Requirements

Propose a high-level component architecture. How would you break down the UI into reusable and manageable components? Pay special attention to rendering performance for the 24-month view.

Design a data fetching and caching strategy. How do you efficiently load the large dataset without blocking the UI? How do you keep the data fresh and invalidate the cache?

Detail your state management approach. What global and local state is needed? How would you manage complex state like date range selections, pending (optimistic) updates, and server data?

Define the necessary client-server API contracts. What endpoints are needed to fetch calendar data and to update pricing/availability? Consider efficiency for bulk updates.

Describe the user interaction flow for a bulk price update, from selection to successful save, including how you would handle API errors and optimistic UI rollbacks.

Discuss how you would ensure the system is resilient. How does the application behave with a slow network or when an API fails?

Address data synchronization. How would you update the view when a date gets booked or a co-host changes a price in another session?

Consider how this complex component would fit into a larger application, potentially built with a micro-frontend architecture.

Design Brief

Prompt

You are tasked with designing the frontend architecture for the Host Multi-Calendar, a core feature for Airbnb hosts. This interface allows hosts to view and manage pricing and availability for their listings over an extended period.

The goal is to create a highly performant, scalable, and intuitive system. Hosts use this tool to apply pricing strategies, block dates for personal use, and react to demand signals provided by Airbnb. A slow or buggy experience can directly impact a host's income, so reliability and performance are paramount.

Your Task:

Design the end-to-end frontend system for this calendar interface. You should focus on the high-level architecture, data flow, state management, and API design. You will use a diagramming tool like Excalidraw to illustrate your architecture.

Core Features:

Infinite Scroll Calendar View: A vertically scrolling calendar displaying 24 months of data. Each month is a grid of days.
Day Cell Information: Each day cell must display the price, availability status (e.g., booked, blocked, available), and a visual indicator for high-demand days.
Bulk Editing: Hosts need to be able to select a date range (e.g., drag-and-select) and apply bulk actions, such as setting a new price for all selected dates or marking them as unavailable.
Optimistic Updates: When a host makes a change, the UI should update immediately while the request is being processed in the background. The system must handle potential failures and revert the state gracefully, informing the host.
Data Synchronization: The calendar should reflect changes made from other sources (e.g., a co-host updating prices on their device, or a new booking coming in) in near real-time.