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

  • 前端系统设计简介学习有用的技巧以及如何处理前端系统设计的首要问题,由FAANG的前面试官撰写。
  • 前端系统设计问题类型前端系统设计面试的提问形式。
  • RADIO框架以结构化的方式进行前端系统设计面试。 良好的结构是成功的一半。
  • 前端系统设计面试评估轴面试官在前端系统设计面试中注意的特定行为和信号。
  • 前端系统设计面试常见错误本文列举了前端系统设计面试中求职者经常犯的6个错误,希望你记住这些点,并在自己的面试中避免这些错误。
  • 前端系统设计小册总结前端系统设计面试中需要注意的重要事项。

Practice questions

题目列表

  • 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