Best Frontend System Design Interview Cheat Sheet 📒

 

A structured approach is very important when appearing for a frontend system design interview since most of the frontend system design can be overwhelming for an hour-long interview.

This comprehensive Frontend System Design Cheat Sheet will provide a guided framework-driven approach to handle any Frontend System Design Interview. This will help you to ace the System Design Interview by completing the important part of the system design within time limits. Let's start

Topic Covered

1. Know About Interview
2. RADIO Framework for Frontend System Design
3. Requirement Gathering
   • Functional Requirements
   • Non-Functional Requirements
   • Scoping
4. Architecture Approaches
   • Frontend Architecture
   • Data fetching protocols
   • Data fetching techniques
   • UI & Data Rending Approaches & Mechanism
   • Enable support for Accessibility, i18n & Offline Support
5. Data Handling
   • Data Entities
   • Data Store (like Redux)
6. Interface (API)
7. Optimizations
   • Performance Optimizations
   • Network Optimizations
   • Rendering Optimizations
8. Extended Topics
   • Security Considerations
   • Observability
   • Testing & Automation Considerations

1. Know About System Design Interview

This interview mostly focuses on how well you can capture the requirements and translate those requirements into designing a frontend system.

1.1 Type of question you can expect

Primarily there are 2 types of questions you can expect

1. Complex component frontend system design
   Examples - Data table/Grid component, Notification, Nested Tree view,  Auto Complete/Typeahead search
2. Application frontend system design
   Examples - Facebook News feed, YouTube player, Sprint Board etc.

1.2 What is the interviewer's expectation?

There are 3 major expectations in the frontend system design interviews

1. Able to drive & design the whole frontend system from open-ended requirements.
2. Knowledge about the frontend system best practices Examples - when to use Debounce or throttling, Virtualization, Intersection Observers etc.
3. Able to explain tradeoffs between various approaches while building frontend system design Ex - REST vs GraphQL, where to store data local, session or IndexedDB

2. RADIO Framework for Frontend System Design

Best Framework to follow for frontend system design - “RADIO”

R - Requirements

Clarify functional & Non Functional requirements. Define the scope of the front-end system design.

A - Architecture

Which architecture to follow - Monolith or Micro-frontend or Mono-repo

D - Data Entities

How the application data look like and the entity's relationship

I - Interface APIs

API Interface to interact with various functions of the system this can be REST API, GraphQL interface or functional interfaces.

O - Optimizations

Various optimizations to make frontend applications more performant & scalable, primarily Network Optimizations techniques, Asset Optimizations techniques & Rendering Optimizations techniques.

In the rest of the notes we will deep dive into each of the RADIO framework steps one by one, let's start 👇👇👇

3. Requirement Gathering

Any frontend system design round starts with requirements gathering, and generally, 2 types of requirements should be gathered as part of this stage.

💡 It is important to rather focus on remembering requirements, we should focus on the right questions to generate the functional and non-functional requirements.

3.1 Functional Requirements

The functionality the system will provide to the end users to fulfil their use-case. for example - for an e-commerce website, displaying catalogue items, and searching through the catalogue is the functional requirement.

❓Question: What user will the user use the system for? or what capabilities the system will provide to the users?

We can derive functional requirements via 2 approaches

1. Page-wise functional capabilities
   Example: E-commerce system design: Home page, login page, user page, catalogue page, search page, details page, checkout page, payment page
2. Module-wise capabilities
   Example: E-commerce system design: user module, catalogue module, checkout module, product module.

3.2 Non-Functional requirements

All the requirements which are essential to make a frontend application more robust, performant, scalable, and secure are considered non-functional requirements.

Question: Who are the users?

1. Multiple roles - RBAC support
2. All age group support requires “Accessibility support” - Keyboard navigation, screen reader support
3. Across the globe, support requires “Internationalization” - language, currency, date format

Question: How will they going to use the system?

1. Device support - Desktop, tablet, mobile phones, screen readers, slow network
2. Offline support required - using service workers
3. PWA (Native support) - direct launch, push notifications, offline access
4. Personalization - The system should be configurable for personalization
   • Dark Mode preferences
   • Notification preferences

Question: What kind of experience do we want to support in the system?

1. Performance - The system should be performant
2. Security - The system should be secure from unauthorized or unauthenticated use
3. Scalability - Use scalable UI design patterns, like virtualization, pagination, lazy loading etc.
4. Graceful Error & Exception handling
   • Server errors/exceptions
   • Network error/exceptions
   • User error/exceptions
5. Extensibility - How easy is it to extend the system and add new functionalities

3.3 Scoping

It is a very important step after requirement gathering since we know most of the frontend system design interviews last for around 45 min to 1 hour. In this limited time, we can not dig deep into all the functional and non-functional requirements.

This step helps you to discuss all the functional and non-functional requirements, and come up with a scoped list of requirements on which you will going to focus in the rest of the interview

Example

Let's say we need to build an e-commerce application like Amazon, and we have mentioned user management, authorization & authentication, and role-based access as a functional requirement. These kinds of requirements are common in most applications, so In the scoping step, you can discuss and remove these kinds of trivial common requirements and focus on more specific requirements related to the application design.

4. Architecture Approaches

4.1 Frontend Architecture