Design Airbnb – Frontend System Design
In this guide, we design Airbnb from the frontend side: the listings grid, per-tile image carousels, data fetching, and the performance work that keeps it fast on mobile.
Problem Statement
Build the frontend for a hotel booking website.
Requirements:
- Display a grid of hotels or houses available for booking
- Each grid tile should show a slideshow of images (image carousel), the property title, and the price per night
- The layout should be fully responsive and look good on both desktop and mobile devices
- Users should be able to scroll within each property’s images to view a slideshow
Describe your approach to component structure, implementing the image carousel, fetching data for hotels and images, and any optimizations you’d consider for performance and user experience.
Clarifying Questions
| # | Question | Interviewer’s Answer |
|---|---|---|
| 1 | Where is the hotel data coming from? Can you describe the API? | Please design the API. |
| 2 | How many images per property? Should we optimize for many or few? | You should design that for optimal performance. |
| 3 | Should the image carousel auto-play, or only allow manual scrolling? | Manual. |
| 4 | Any requirements for accessibility? (e.g.,... premium content. Premium Keep reading with PremiumGet the rest of this guide plus every premium question, solution, and system design deep dive.
     4.9/5 from our users |