5 Most Asked Frontend System Design Interview Questions & Patterns

Understanding the frontend system design patterns is crucial to taking care of the most commonly asked system design questions or any new questions based on the same pattern. Here are the details of frontend system design questions & patterns

❇️ Quickly revise the Frontend System Design Flow - Frontend System Design Interview Cheat Sheet

5 Frontend System Design Interview Questions & Patterns

Here are the patterns, their associated questions and important resources

Table of content

1. Infinite-scroll

2. Autocomplete or Type ahead widget

3. Data Table / Data Grid

4. Document Collaboration

5. Video Streaming Application

1. Infinite Scroll

Frontend system design for Infinite scroll component or Infinite news feed application feature

Application examples

1. Facebook News Feed

2. LinkedIn News Feed

3. Instagram Image feed

Questions with commonly asked features

1. Design a Facebook/LinkedIn/Instagram news feed feature, assuming data for the feed is available as part of the endpoint and dynamically add new feeds into the data.

   • Users can scroll the feeds, and take action on the feeds as well, Like comments etc.

Main concepts to focus

1. Handling a large data set using the Virtualization technique.

2. Data modal to store the dynamic data

   • Store a big chunk of data in the store vs dynamically appending data into the store by async data fetching.

3. Preferable Data Fetching protocol, REST vs GraphQL (Facebook is using GraphQL for Facebook News Feed implementation)

   • How to determine the number of records fetched from the server

Resources

1. Videos - Resources for Infinite Scroll System Design

2. Web vitals patterns - infinite scroll

3. Infinite Scroll without layout shift

2. Auto Complete or Type Ahead Widget

Frontend system design for auto-complete search box or Type ahead widget 

Application examples

1. Google search box

2. E-commerce product search box

Questions with commonly asked features

1. Designing an autocomplete search box or a type-ahead widget similar to a product search box at e-commerce websites

   • Including both local and remote data (using fetch API) support

   • Template support - The user can provide a complex template to show the search results

   • Loading, Error handling, and retry support

   • Accessibility support -  keyboard support, aria-roles

   • Style and other configurations, Ex number of elements to show in the search

   • Fuzzy search - correct suggestions for misspelt words.

Main concepts to focus

1. De-bouncing support in the search to optimize network calls.

2. Fetch API calls and error handling

3. Configurable component design 

Resources 

1. Resources for Auto Complete System Design

3. Data Table / Data Grid

Frontend system design for data table or data grid with long list support (searching, filtering and pagination)

Application examples

1. Data Grid similar to E-commerce product listing

2. Data table for showing user's information

Questions with commonly asked features

1. Design a data grid component to show the list of products with below capabilities

   • Data can be static or remotely fetched using API calls.

   • Adaptive to the user's device size

   • Able to show more content when reaching the end of the page or a defined number of products, behaves like an infinite scroll

   • Configurable to show different data types in the data table like date, or custom component

   • Reflect on the data in real time to see if there is any change in the inventory or price.

   • Handle loading and error conditions.

Main concepts to focus

1. Understanding of Intersection Observer to implement infinite scroll or load more scroll future for Data Grid.

2. Media queries to implement responsive grid behaviour for Data Grid.

3. Configurable to different data type support and implementation of custom sorting, and filtering support as per data type in Data Table.

Resources

1. Resources for Data Grid System Design

4. Document Collaboration

Document collaboration applications with collaborative editing support

Application example

1. Google doc

2. Confluence document

3. Google Sheet

Questions with commonly asked features

1. Design a document editor application, with the support of collaborative editing. For example, more than 1 user can access and make updates to the document. All the users can view the real-time changes in the document done by the other users

   • Document updates can include add, edit and delete operations on the document.

   • Add formatting to the text - basic formatting - bold, underline, italic  

   • Real-time changes should reflect on the other documents, keeping the overall document the same for all the users at a given moment in time.

   • The application should be performant and can support large documents.

   • Offline support - keeps the document in the browser cache, if the system is offline, and push to the server when becomes online.

Main concepts to focus

1. Concurrent Editing Approaches

   • Locking - Not user-friendly and requires more time for edits (this won't work for real-time updates)

   • Operational Transformation - An Event-based syncing, where all types of events (adding, deleting, formatting) will be shared by other users (Word by word)

   • Differential synchronization - In simple terms, Diff sharing, the difference in the document is shared across the users and as per the diff the document patch will be applied

2. Use contentEditable & custom event listeners on the root element to create a document editor.

3. JavaScript's Service workers for offline support.

Resources

1. Resources for Document Collaboration System Design

5. Video Streaming

Frontend system design for Video streaming services

Application example

1. Youtube

2. Vimeo

Questions with commonly asked features

1. Design a video streaming application to play video from a remote server

   • Minimize buffer or no buffer while playing the video.

   • Adapt video quality as per the high and low bandwidth.

   • Peek video Support - jump to any section of the video and it starts playing from that point.

   • Multi-lingual Support for the video

Main concepts to focus

1. Understanding of Video HTML5 Elements.

2. Understanding HTTP Range requests to fetch specific time chunks of video from the server.

3. Media Source Extensions (MSE) - A JavaScript API that lets you build streams for playback from segments of video

4. Video Delivery mechanisms

   • Progressive download

   • Streaming media

5. Streaming protocols

   • HTTP Live Streaming (HLS)

   • Dynamic Adaptive Streaming over HTTP (DASH) - YouTube uses this protocol in combination with HLS (for Apple Devices)

Resources

1. Resources for Video Streaming System Design

2. HTML5 Video elements

3. HTTP Range request

4. Progressive download vs Streaming

5. DASH Streaming for HTML5 video

There are many other important system design questions, you can explore 16 other System Design Questions

https://www.frontendgeek.com/blogs/21-most-asked-frontend-system-design-interview-questions-and-patterns#data-table