Types of Front End System Design Questions

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

Applications

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, focus on how things work within the client — discuss the application architecture and how it can communicate with the server.

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, ChatGPT, or Google Calendar on the web, you have used a web app. Web apps tend to be interactive and dynamic (contents on the page change frequently) and page navigation in a web app usually doesn't require a full page refresh; web apps 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, common application architectures 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 reducer architecture (e.g. Flux/Redux).

Each web app has its own unique challenges and certain topics matter more than others. For example, for an e-commerce marketplace, search engine optimization (SEO) and performance are extremely important because they have a direct impact on sales. On the other hand, a messaging app isn't meant to be indexable by search engines and it's therefore not meaningful to discuss SEO. Instead, candidates should spend more time on real-time communication protocols, which directly affects the core value proposition of the app.

Important areas

Here's a list of commonly-asked applications during front end system design interviews and the important features and areas to focus on:

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 Radix UI, jQuery UI, 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) because it involves more interactions, components, and stricter accessibility requirements. Most of the time, if you are asked to design a UI component, it would be from the latter category.

To approach system design for UI components, determine the subcomponents of the components, 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 of 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

For example, an image carousel would contain the current image, pagination buttons, and preview thumbnails.

<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:

• Design an autocomplete component
• Design a dropdown menu component
• Design an image carousel
• Design an embeddable poll widget
• Design a rich text editor
• Design a modal component
• Design a data table with sorting and pagination
• Design a date picker
• Design a multiselect component

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?

At GreatFrontEnd, we invented the RADIO framework, an easy-to-remember and structured approach that you can use to ace Front End system design interview questions.