GreatFrontEnd is hiring! Check out our jobs page!
Front End System Design Guidebook

Types of Front End System Design Questions

Question formats you can expect in a front end system design interview.

There are two main kinds of front end system design questions: (1) Applications and (2) UI components.

Applications

As mentioned above, designing applications for front end system design interviews will feel similar to general Software Engineering system design interviews, and in fact, the questions are highly similar. However, instead of talking about distributed systems, you should focus on the client side of things and talk about application architecture and client-side implementation details.

In this day and age, many websites are interactive and rich applications that can do virtually what many desktop applications can. If you've used Gmail, Facebook, YouTube, Google Calender on the web, you'd have used a web app. Web apps tend to be dynamic and navigations in a web app usually don't require a full page refresh and instead use JavaScript to fetch remote data for the next page and dynamically change the contents and URL. Since web apps are complex software involving multiple modules, the common application architectures we learnt in Software Engineering classes like Model-view-controller (MVC), Model-view-viewmodel (MVVM) are also applicable when building web apps. React is one of the most popular JavaScript libraries by Facebook to build interactive web applications and many React web apps adopt a unidirectional Flux/Redux-based architecture.

Different applications have their own unique aspects and talking points. It's imperative that you focus on the parts that are unique to the application and not spend too much time talking about general stuff that are applicable to all questions. Firstly, design the high-level architecture, identify the components in the system, and the API between the components. Then dive into a few areas that are interesting to the problem and how to implement or optimize them.

Examples

Here's a list of application questions commonly asked during front end system design interviews and the areas you should focus on:

ApplicationExamplesImportant Areas
News FeedFacebook, TwitterFeed interactions, Feed pagination approaches, Message/post composer
Messaging/ChatMessenger, Slack, DiscordMessage syncing, Real-time chat, Messages list, Chat list
E-commerce MarketplacesAmazon, eBayProduct listing pages, Product detail pages, Cart, Checkout
Photo SharingInstagram, Flickr, Google PhotosPhotos browsing, Photos editing, Photos uploading
Travel BookingAirbnb, SkyscannerSearch UI, Search results, Booking UI
Email ClientOutlook, Apple Mail, GmailMailbox syncing, Mailbox UI, Email composer,
Video StreamingNetflix, YouTubeVideo player, Video streaming, Recommended videos
PinterestPinterestMasonry layout implementation and media feed optimizations
Collaborative AppsGoogle Docs, Google Sheets, Google Slides, NotionReal-time collaboration, State syncing
DrawingFigma, LucidchartRendering approach, Client state/data model
MapsGoogle/Apple Maps, Foursquare City GuideMap rendering, Displaying locations
File StorageGoogle Drive, DropboxFile uploading, File downloading, File explorer
Video ConferencingZoom, Google MeetVideo streaming, Various viewing modes
RidesharingUber, LyftTrip booking, Driver location
Music StreamingSpotify, Apple MusicMusic player UI, Playlists UI
GamesTetris, SnakeGame state, Game loop, Game logic

UI Components

In modern front end development, it is common to use component libraries to build applications. Some popular component libraries you might have used before include jQuery UI (how old school!), Bootstrap, Material UI, Chakra UI, etc.

It is an expectation of Front End Engineers to be able to build the various UI components needed by an application. Some UI components can be easy to build (e.g. text, button, badge, etc), while others can be much more complex (autocomplete, dropdown, modal, etc). Most of the time, if you are asked to design a UI component, it would be from the latter category.

Firstly determine the subcomponents of the component (e.g. for an image carousel, there's the image, the pagination buttons, thumbnails), define the external-facing API of the component (what options/props the component should accept), describe the internal component state, API between the subcomponents (if relevant), then dive into optimizations and considerations for performance, accessibility, user experience, security, etc where relevant.

You might have to write a small amount code for one or more of the following purposes:

  1. Describe the component hierarchy.
  2. Describe the shape of the component state.
  3. Explain some non-trivial logic within the component.
<ImageCarousel
images={...}
onPrev={...}
onNext={...}
layout="horizontal">
<ImageCarouselImage style={...} />
<ImageThumbnail onClick={...} />
</ImageCarousel>

Customizing Theming

You will most certainly be expected to design a way for users of the component (developers) to customize the component appearance. Refer to Front End Interview Guidebook's UI Components API Design Principles Section for an overview and comparison of the different approaches.

Examples

Examples of UI components asked during front end system design interviews:

What to do during interviews?

Now that you have an understanding of the kind of questions you can be asked during Front End System Design interviews, how do you go about answering them? We came up with the RADIO framework, an easy-to-remember structured approach that you can use to ace system design interview questions.