Enjoy 20% off all plans by following us on social media. Check out other promotions!
Front End System Design Guidebook

Introduction to Front End System Design

Learn useful techniques and how to approach the top front end system design questions, written by ex-interviewers at FAANG.

Unlike coding and quiz questions, system design interviews are open-ended style interviews where there are no right answers. You're given a vague problem or scenario and you're expected to work with the interviewer to answer the question by coming up with a suitable software design on a whiteboard, or some collaborative drawing app if it's a virtual interview. It is similar to the process at certain companies where engineers write technical design documents to outline the possible approaches to a project they are working on, explain technical decisions and discuss tradeoffs with coworkers except that you have to do it within 30-60 minutes.

System design interviews are usually given to candidates who have some number of years of working experience (aka non-fresh grads) and your performance in the system design interview has significant influence on the job level you will be offered. Most of the time, failing the system design interview will result in an overall rejection. It's really important to ace your system design interviews!

However, given the open-ended nature of system design interviews, it is much harder to practice for it as compared to coding interviews. Many candidates also don't have real life experience building various systems and it's hard to draw from experience when answering system design interview questions. Also, there are very few resources available for front end system design. Most existing system design resources are targeted at general Software Engineers and hence focus on distributed systems.

GreatFrontEnd's system design resources are perhaps the most comprehensive you can find and will help you handle front end system design interviews with ease!

Front End vs Back End System Design

In traditional Software Engineer system design interviews, candidates will be asked to describe the architecture of a distributed system, usually involving web servers, load balancers, caches, databases, microservices, task queues, etc. For Front End Engineers, system design interviews are slightly different, there's more emphasis on what goes on in the client and API design between the client and the server, as opposed to what goes on in the back end.

AspectBack EndFront End
Gather requirementsRequiredRequired
Architecture/High-level designDistributed cloud servicesApplication/Component
Back-of-the-envelope estimationRequiredNot required
Components of the systemCloud services (e.g. Load balancer, Application server, Database, File storage, Caches, Message queues, CDN)Application modules (Model, View, Controller)
Data ModelSQL SchemaApplication state
Type of APIs between componentsNetwork (Any protocol)Network (HTTP, WebSocket), JavaScript functions
Focus areasScalability, Reliability, AvailabilityPerformance, User Experience, Accessibility, Internationalization
Less important (Can treat as a black box)ClientServer

Read more on the differences between Front End and Back End System Design Interviews on Zhenghao's blog.

For example, a classic question is to ask about designing a Twitter feed UI which can be asked during both back end and front end system interviews.

  • Back end: Capacity estimation, designing the database schemas, how to ensure the services can scale with the traffic, how to generate a user's Twitter feed?
  • Front end: How do you implement the interactions with a tweet, how to implement pagination in the feed, and how users can create new tweets?

As you can see, the focus of front end system design interviews can be very different from back end and answering them well requires a different approach.

What you will learn in this guide

Our Front End System Design guide is structured into two parts, you will first gain a deeper understanding system design interviews are about, then dive into some front end system design case studies using the RADIO framework.