Front End Interview Preparation — System Design

Preparation Stages

Front End Engineer · Web Developer · Full Stack Engineer

Front End Interview Preparation

Prepare holistically for all types of front end interview questions and rounds. Guides and 190+ practice questions included.

First time preparing for front end interviews? Find out what to expect in our Front End Interview Guidebook.

Stage 1

Coding

Stage 2

Quizzes

Stage 3

System Design

Stage 4

Behavioral

System Design Study Guides

1

Intro to System Design

What to expect for Front End System Design interviews
2

Types of Questions

Overview of various question formats
3

RADIO Framework

A structured way to approach system design questions
4

Evaluation Axes

What interviewers are looking for
5

Common Mistakes

Common mistakes you should avoid.
6

Cheatsheet

Summary of all the important things in a one-pager

System Design Practice Questions

Questions List

  • News Feed (e.g. Facebook)Free

    Design a news feed user interface similar to Facebook and Twitter
    Difficulty
    Medium
    Languages

  • AutocompleteFree

    Design an autocomplete component seen on Google and Facebook search
    Difficulty
    Medium
    Languages

  • Poll WidgetPremium

    Design a poll widget that can be embedded on websites
    Difficulty
    Easy
    Languages

  • Image CarouselPremium

    Design a horizontally-scrolling image carousel component
    Difficulty
    Medium
    Languages

  • Photo Sharing (e.g. Instagram)Premium

    Design a photo sharing application like Instagram
    Difficulty
    Medium
    Languages

  • Travel Booking (e.g. Airbnb)Premium

    Design a travel booking website like Airbnb and Expedia
    Difficulty
    Medium
    Languages

  • Dropdown MenuPremium

    Design a dropdown menu component that can reveal a menu containing a list of actions
    Difficulty
    Medium
    Languages

  • Photo Gallery (e.g. Google Photos)PremiumComing Soon

    Design a photo gallery application like Google Photos
    Difficulty
    Medium
    Languages

  • Modal DialogPremium

    Design a modal/dialog component that shows a window overlaying the contents on the page
    Difficulty
    Medium
    Languages

  • Email Client (e.g. Microsoft Outlook)Premium

    Design a desktop email client like Microsoft Outlook and Apple Mail
    Difficulty
    Medium
    Languages

  • Video Streaming (e.g. YouTube)PremiumComing Soon

    Design a video streaming website like YouTube and Netflix
    Difficulty
    Hard
    Languages

  • Chat App (e.g. Messenger)Premium

    Design a chat application like Messenger and Slack
    Difficulty
    Hard
    Languages

  • Music Streaming (e.g. Spotify)PremiumComing Soon

    Design a music streaming website like Spotify and Pandora
    Difficulty
    Hard
    Languages

  • PinterestPremiumComing Soon

    Design Pinterest homepage, focusing on the masonry layout
    Difficulty
    Hard
    Languages

  • Diagram Tool (e.g. Lucidchart)PremiumComing Soon

    Design a design tool like Lucidchart
    Difficulty
    Hard
    Languages

  • Video Conferencing (e.g. Zoom)PremiumComing Soon

    Design a video conferencing app like Zoom and Google Meet
    Difficulty
    Hard
    Languages

  • E-commerce Marketplace (e.g. Amazon)Premium

    Design an e-commerce marketplace website like Amazon and eBay
    Difficulty
    Hard
    Languages

  • Google DocsPremiumComing Soon

    Design a collaborative editor like Google Docs and Notion
    Difficulty
    Hard
    Languages

  • Google SheetsPremiumComing Soon

    Design a collaborative spreadsheet like Google Sheet and Excel
    Difficulty
    Hard
    Languages
Logos provided by Clearbit