Airbnb Host Pricing & Availability Calendar
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
Requirements
1.
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.
2.
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?
3.
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?
4.
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.
5.
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.
6.
Discuss how you would ensure the system is resilient. How does the application behave with a slow network or when an API fails?
7.
Address data synchronization. How would you update the view when a date gets booked or a co-host changes a price in another session?
8.
Consider how this complex component would fit into a larger application, potentially built with a micro-frontend architecture.
Design Brief
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.
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.