Recommended

Front End System Design Playbook

The only guide you need for Front End System Design interviews
Robust framework
10+ solved questions
Deep-dives into real-world applications
System design interviews are often reserved for mid-to-senior roles, focusing on your ability to design complex, scalable, and maintainable systems. With few resources out there specifically for front end system design, we've crafted the Front End System Design Guide—the most comprehensive resource available.

Techniques and guides

  • Front End System Design: An IntroductionLearn useful techniques and how to approach top front end system design questions. Written by ex-interviewers at FAANG.
  • Types of Front End System Design QuestionsQuestion formats you can expect in a front end system design interview.
  • The RADIO FrameworkApproach your front end system design interviews in a structured fashion. A good structure is half the battle won.
  • Evaluation Criteria for Front End System Design InterviewsSpecific behaviors and signals interviewers look out for in front end system design interviews.
  • Common Mistakes to Avoid for Front End System Design InterviewsKnow the mistakes candidates often make during front end system design interviews and how to avoid them.
  • Cheatsheet for Front End System Design InterviewsSummary of the most important things you should take note of during front end system design interviews.

Practice questions

Questions List

  • News Feed (e.g. Facebook)Design a news feed user interface similar to Facebook and Twitter
    Topics
    AccessibilityPerformance
  • AutocompleteDesign an autocomplete component seen on Google and Facebook search
    Topics
    AccessibilityUI component
  • Poll WidgetPremiumDesign a poll widget that can be embedded on websites
    Topics
    UI component
  • Travel Booking (e.g. Airbnb)PremiumDesign a travel booking website like Airbnb and Expedia
    Topics
    PerformanceSEO
  • Photo Sharing (e.g. Instagram)PremiumDesign a photo sharing application like Instagram
    Topics
    AccessibilityNetworkingPerformance
  • Dropdown MenuPremiumDesign a dropdown menu component that reveals a menu containing a list of actions
    Topics
    AccessibilityUI component
  • Image CarouselPremiumDesign a horizontally-scrolling image carousel component
    Topics
    AccessibilityPerformanceUI component
  • Modal DialogPremiumDesign a modal/dialog component that shows a window overlaying the contents on the page
    Topics
    AccessibilityUI component
  • Email Client (e.g. Microsoft Outlook)PremiumDesign a desktop email client like Microsoft Outlook and Apple Mail
  • E-commerce Marketplace (e.g. Amazon)PremiumDesign an e-commerce marketplace website like Amazon and eBay
    Topics
    SEO
  • PinterestPremiumDesign Pinterest homepage, focusing on the masonry layout
    Topics
    AccessibilityNetworkingPerformance
  • Chat App (e.g. Messenger)PremiumDesign a chat application like Messenger and Slack
    Topics
    Networking
  • Diagram Tool (e.g. Lucidchart)PremiumComing soonDesign a design tool like Lucidchart
  • Music Streaming (e.g. Spotify)PremiumComing soonDesign a music streaming website like Spotify and Pandora
    Topics
    Networking
  • Video Conferencing (e.g. Zoom)PremiumComing soonDesign a video conferencing app like Zoom and Google Meet
    Topics
    NetworkingPerformance
  • Rich Text EditorPremiumDesign a rich text editor component used on websites like Medium and Gmail
    Topics
    PerformanceUI component
  • Google DocsPremiumDesign a collaborative editor like Google Docs and Notion
    Topics
    Networking
  • Google SheetsPremiumComing soonDesign a collaborative spreadsheet like Google Sheet and Excel
  • Video Streaming (e.g. Netflix)PremiumDesign a video streaming application like Netflix and YouTube
    Topics
    NetworkingPerformance