Front end system design overview

There are shockingly few front end system design resources out there, probably because there's a lower demand and supply for front end engineer candidates.

"System" here typically refers to front end systems, which are quite different from the typical distributed system design questions for Software Engineering interviews. The questions asked can be quite similar to the possible questions in "Build user interfaces" format but with more focus on architecture and design. There's a significant amount of overlap between them - you will likely need to do some design (data model, API) when you build UI, and also do some coding here to illustrate your ideas/app state format.

The difference between this section and the "Build user interfaces" format is that the questions here are usually larger. If the session is only half an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because system design questions usually involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details of each component and can keep the discussion at a higher level, about API design between the client and server, and API between the components.

Many of the topics mentioned in the "Build user interfaces" format are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security, etc. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from junior candidates.

The two main kinds of front end system design interviews are UI components and applications.

Examples

• UI Components
  • Photo gallery
  • Selector
• Applications
  • News feed
  • Video watching website
  • Chat application

RADAD Framework

System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great! Otherwise, here's a framework you can use to give an outline to the interviewer as to what you are going to cover, which is also helpful when working on new front end projects at work.

This framework is called RADAD and it is made up of the first character of each step. You can write this structure down on the whiteboard/online editor so that you don't forget.

1. Requirements clarifications/alignment - Ask about the requirements of the system.
2. Architecture - Outline the architecture of the system (could be a UI component or an app, depending on the question). Draw diagrams where relevant.
3. Data model - How would the component store any data passed into it? What data structures are used?
4. API design - What's the API for using this component? What options will be allowed on the component?
5. Deep dive - User Experience (UX), Performance, Accessibility (a11y), Internationalization (i18n), Multi-device support, Security

How to approach system design questions for applications and UI components can differ significantly, and we'll go through them in more detail in subsequent sections.

Things you would not have to do (probably)

Because front end system design interviews focus on front end, you probably do not have to:

• Design a database schema
• Know about which kind of database to use (SQL vs NoSQL)
• Scaling your servers and database (sharding, vertical/horizontal scaling)
• Talk about availability, fault tolerance, latency, etc

Read more about the differences between Front End vs Back End System Design interviews.