Design Airbnb (Stays Marketplace) - Frontend System Design Interview Guide
Hard•
Design a production-ready Airbnb-like frontend with map + list search, date/guest filtering, listing detail pages, availability-aware booking flow, and host/guest messaging entry points.
Backend as Black Box: Assume APIs exist for listings, search ranking, calendar availability, pricing, booking, and messaging. Focus on frontend architecture and trade-off decisions.
Key Challenges
This problem combines discovery, calendar logic, and transactional booking:
- Map + List Synchronization: Keep search results and map pins in sync efficiently
- Availability + Pricing Volatility: Nightly rates, fees, and blocked dates can change
- Complex Filter State: Dates, guests, amenities, location, and budget constraints
- Booking Funnel Reliability: Review -> Payment -> Confirmation with retry-safe behavior
- Trust-Focused UX: Clear cancellation policy, fee breakdown, and error recovery
Functional Requirements
- Search page with location, date, guest, price, and amenity filters
- Synchronized map + list results with consistent selection/highlight behavior
- Listing detail page with gallery, host info, amenities, reviews, and policies
- Availability-aware booking card with quote breakdown before confirmation
- Checkout flow: review stay, payment, confirmation, and receipt status
- Deep-linkable search context and reliable back/forward navigation
Non-Functional Requirements
- Responsive filter interactions and map/list updates on mobile and desktop
- Debounced viewport/filter fetch behavior to avoid request storms
- Correct timezone/DST handling for check-in and check-out date logic
- Retry-safe booking confirmation with idempotency key support
- Conflict handling for price/availability changes at confirm step
- WCAG 2.1 AA accessibility baseline for search, map, and checkout surfaces
- Observability for search latency, quote-to-confirm dropoff, and booking failure causes
Trade-offs to Discuss (Interview)
- URL-driven filters vs local-only view state (State Management)
- Debounced viewport commits vs immediate map fetches (Data Fetching Patterns)
- Cursor pagination vs page-number pagination (Pagination: Offset vs Cursor)
- Quote/availability cache TTL vs checkout correctness (Caching Strategies)
- SEO/TTFB goals with SSR/ISR vs CSR flexibility (Rendering Strategies)
Deep-Dive Suggestion
Go deep on quote + availability consistency at confirmation: revalidation gates, conflict UX, and idempotent booking writes.
Unlock with Pro
Full system design walkthrough
Get the complete interview-ready solution with requirements, architecture, data model, API contracts, tradeoffs, scaling notes, and evaluation signals.
Was this helpful?