21 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

21 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. Image/data Carousel
5. Tree View Component
6. Document Collaboration
7. Image Sharing / Photo management
8. Video Streaming Application
9. Audio Streaming Application
10. Video Conferencing/Meetings
11. Kanban Board / Sprint Board
12. File System Application
13. Collaborative Design Tools
14. Chat Application
15. Seat Reservation Application
16. Ride-hailing Application
17. Hotel Reservation Application
18. Food Delivery Application
19. Game Application User Interface(UI)
20. Calendar Application
21. WYSIWYG Editor 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. Image/Data Carousel

Frontend system design for Image or data carousel

Application example

1. e-commerce product carousel
2. Website product listing
3. Feedback/Testimonial carousels

Questions with commonly asked features

1. Design an Image Carousel to show multiple local or remote images in a marquee fashion
   • Images/data from the local system or fetch from API endpoint.
   • Configuration support is available for an automated marquee at a certain interval or a user who can manually click to explore.
   • Loading and error handling cases.
   • Ability to support any fixed number of images and text gracefully.
   • Perceived performance using progressive image rendering.

Main concepts to focus

1. Fetching data from API only when there is any action happening.
2. Implementation of progressive images.
3. How to hide and show images based on the actions.

Resources

1. Resources for Image Carousel System Design

5. Tree View

Frontend system for tree view component and this design question can be extended to Checkbox tree view selection type of variations as well.

Application examples

1. Product side navigation at E-commerce websites
2. Confluence Side file/folder navigation

Questions with commonly asked features

1. Design a tree view feature to show parent and child file folders, other functional and Non-functional requirements
   • Implementation of expandable and collapsible functionality.
   • Tree view should be able to handle any depth of file/folders
   • Only folders with at least a child can be expandable
   • Able to show Large amounts of files and folders for example 10k files/folders
   • Data can be static or available as part of API calls in JSON format.
   • Customisation of icons and limit to show scrolling behaviour.
   • Accessibility support - keyboard support, aria labels for the tree, expand and collapse functionality.
   • Loading and error handling.

Main concepts to focus

1. Recursive implementation of tree based on JSON input.
2. Virtualization support to showcase a large number of elements as part of the tree view

Resources

1. Resources for Tree View System Design

6. 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

7. Image Sharing / Photo Management

Image sharing and hosting services

Application example

1. Instagram
2. Imgur
3. Flickr

Questions with commonly asked features

1. Design an image-sharing application which can have one more features
   • Upload an image or video to the application
   • Many images/videos can be uploaded and shared with loading progress support.
   • Performance while loading the multiple images - perceived performance using progressive images
   • Infinite scrolling to view the image uploaded by uses

Main concepts to focus

1. API to upload the image and video files - using a multipart request
2. Infinite scroll using virtualization technique
3. Progressive image for perceived performance

Resources

1. Resources for Image-Sharing System Design
2. Image upload in javaScript 

8. 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

9. Audio Streaming

Audio streaming application frontend interactions

Application example

1. Spotify
2. SoundCloud

Questions with commonly asked features

1. Design an audio streaming application to play audio from a remote server
   • Minimize the initial buffer or no buffer while playing the audio.
   • Peek audio Support - jump to any section of the song/audio and it starts playing from that point.
   • Multi-lingual Support for the audio
   • Support for a change in Streaming Speed like 1.25x, 1x, 2x

Main concepts to focus

1. Understanding of Audio HTML5 Elements.
2. Understanding HTTP Range requests to fetch specific time chunks of audio from the server.
3. Media Source Extensions (MSE) - A JavaScript API that lets you build streams for playback from segments of audio or video
4. Audio 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 Audio Streaming System Design
2. HTML5 audio element

10. Video Conferencing 

Frontend System design for Video conferencing service

Application example

1. Google Meet
2. Zoom

Questions with commonly asked features

1. Design a video conferencing application, where 2 or more users can interact with each other including audio/video
   • large number of users can participate in the communication
   • Real-time audio/video support 

Main concepts to focus

1. WebRTC (web real-time communication) protocol is used for this kind of peer-to-peer communication.
2. Difference between TCP/UDP protocols supported by webRTC
3. Websockets connections for real-time sharing

Resources

1. Resources for Video Conferencing System Design
2. WebRTC JavaScript API

11. Kanban Board / Sprint Board

Frontend System design for Jira Sprint board or kanban board

Application example

1. Jira Sprint board
2. Trello Kanban board

Questions with commonly asked features

1. Design a Kanban board to manage the tasks assigned with different statuses
   • Create a task with metadata and the required status
   • Configurable number of lanes based on the Status types
   • Tasks can be moved from one lane to another lane, with some restrictions if applicable
   • A large number of tasks can be rendered in a single lane with performance
   • Accessibility support - keyboard navigation
   • Role-based access to the Kanban board.
   • Drag and drop the tasks from one lane to another (optional requirement)
   • Offline support - tasks can be updated offline and reflected once the system is online

Main concepts to focus

1. Store large amounts of data in the optimized format, and use Normalization to easily access the details.
2. Service workers to enable offline support 
3. Data representation of several tasks in the API response 

Resources

1. Resources for Kanban Board System Design

12. File System Application

Frontend system design for file system applications

Application example

1. Google Drive
2. Dropbox

Questions with commonly asked features

1. Design a file system application to store the files on the cloud for anywhere anytime access
   • Upload a file and folders and delete the resources.
   • Enable support for viewing files in different formats like images, PDFs, Word documents, or PowerPoints.
   • Show the progress of the uploads and downloads.
   • Efficiently handle rendering a larger amount of files/folders using the virtualization technique.
   • Permission-based access to files and folders. Files and folders can be shared with other users as well.

Main concepts to focus

1. Upload a single file or a folder containing multiple files using a recursive approach
2. Virtualization techniques are used to render a large number of files and folders.
3. Techniques to view different files like PDFs, PPTs 

Resources

1. Resources for File System UI System Design

13. Collaborative Design Tools 

Frontend system for collaborative design tools 

Application example

1. Figma
2. Whiteboard

Questions with commonly asked features

1. Design a collaborative design system, that can be used by one or more than one users simultaneously.
   • Support for free-flow drawing, text or predefined shapes like rectangles or square
   • DOM element-based approach vs canvas-based approach for collaborative design.
   • Real-time communication using web sockets

Main concepts to focus

1. How to use Canvas? and how to Draw different shapes, free free-flowing drawings on canvas using JavaScript.
2. Real-time WebSocket communication, pros and cons

Resources

1. Resources for Collaborative Design Tools System Design
2. HTML5 Canvas
3. WebSocket communication 

14. Chat Applications

Frontend design for chat applications

Application example

1. WhatsApp
2. Telegram

Questions with commonly asked features

1. Design a chat application to share text and other media content
   • Create one-to-one communication with the contacts.
   • Send text messages and other media items to the contacts
   • Create a communication group with the contacts, with a higher limit of contact members
   • Real-time communication support
   • Show delivery receipts and online/offline indicators.
   • Highlight new messages from contacts
   • Maintain a large list of message history

Main concepts to focus

1. Websocket connection creation and how real-time communication happens using web sockets. Its limitation over HTTPS.
2. Limitation of the number of simultaneous websocket connections in case of group communication.
3. A large message history of support using lazy loading (fetch from the server only when reaching that point) and virtualization.
4. REST APIs to send messages and media payload.

Resources

1. Resources for Chat App System Design
2. Websockets and their limitations
3. REST API to send messages and media payloads like location, video, images etc.

15. Seat Reservation Applications

Frontend system design for seat reservation applications

Application example

1. BookMyShow
2. RedBus

Questions with commonly asked features

1. Design a Seat Reservation application to reserve seats on the flight, buses, theatres or stadiums.
   • List of options available while seat reservation for flights and buses.
   • Create configurable seat maps for different types of vehicles or locations
   • Enable seat booking as per the selected preferences, and lock the seats for certain durations.
   • Seat map representation as part of the REST API response.

Main concepts to focus

1. Data store working and Normalize the API data for quick access.
2. Working on a locking-based mechanism.
3. REST API request and response calls to fetch seat map.

Resources

1. Resources for Seat Reservation System Design

16. Ride-hailing Applications

Frontend system design for ride-hailing applications

Application example

1. Ola Cabs
2. Uber Cabs
3. Rapido 

Questions with commonly asked features

1. Design a Ride-Hailing application which allows users to book cabs, and bikes from source to destination location.
   • Search for source and destination using Map APIs.
   • Showcase available types of rides with prices through APIs.
   • Reflect the ride movement on the map.
   • Internationalization.
   • Progressive Web Apps (PWA) to support native notifications and offline apps.

Main concepts to focus

1. Understanding Progressive Web Apps (PWA) and offline caching.
2. Understand Debouncing while searching source and destination.
3. REST API calls, retry API calls, and API cancellation
4. Server Sent Events (SSE) to push from server to client    

Resources

1. Resources for Ride-Hailing System Design

17. Hotel Reservation Application

Frontend system design for hotel reservation applications, and this System Design is quite similar to seat reservation system.

Application example

1. MakeMyTrip
2. Airbnb

Questions with commonly asked features

1. Design a Hotel Reservation Application, to reserve rooms in hotels at a particular location
   • Support for a wide range of devices, especially mobile, tablets and laptops.
   • Search for the location, to view all the hotels available through API calls.
   • Listing of all the hotels in a performant way.
   • Server Sent Events (SSE) to push live room rates to the users.
   • Server-side rendering (SSR) for the hotel details for the SEO and improved load time performance.
   • Image optimizations, and performance improvements using progressive images, for hero images and other hotel rooms images.
   • Internationalization(i18n) and localization
   • Accessibility especially keyboard support and using semantic HTML elements for screen readers.

Main concepts to focus

1. Understand Debouncing while searching source and destination.
2. REST API calls, retry API calls, and API cancellation
3. Understanding Server side rendering and Server side rendering with Hydration for performance SEO
4. Understanding Server-Sent Events to push text from server to client.

Resources

1. Resources for Hotel Reservation System Design
2. Rendering techniques

18. Food/Goods Delivery Applications

Frontend System design of Delivery applications is quite similar to the Ride-hailing application where through this application movement of goods happens rather than persons.

Application example

1. Zomoto
2. Swiggi

Questions with commonly asked features

1. Design a Food/Goods Delivery Application to deliver the foods or goods from the supplier to the consumer
   • Location detection to know the current location or user-provided location to confirm the availability of goods.
   • Showcase Catalogue of the available foods/goods in a performance way by using progressive images and virtualization.
   • Food/Goods details page uses Server Side Rendering with Hydration for faster load time and SEO.
   • REST API calls to fetch the live menu, and the Server Sent Events to push live changes in the Menu or Restaurants availability.
   • Constant monitoring of the order preparation, and ride status through Server-Sent Events / Long polling to update application details.
   • Localization of the application to support local language.

Main concepts to focus

1. Usage of compressed, Progressive Images and Virtualization to render a large list of items.
2. Understanding Server-Side Rendering with Hydration to improve the initial load time to improve SEO performance.
3. Server Sent Events or Long polling for delivery monitoring, from server to client.
4. HTTP Caching, browser caching and CDN to improve caching for Images. 

Resources

1. Resources for Delivery App System Design
2. Long polling & Server-Sent Events
3. Server Side Rendering with Hydration
4. Geolocation Web APIs for location detection
5. Caching

19. Games Applications User-Interface (UI)

Frontend design for web game applications

Application example

1. Chess
2. Snake & Ladder
3. Ludo

Questions with commonly asked features

1. Design Chess Game Application user interface. where the chessboard is initialised with the initial set of Chess Pieces and users can move the chess pieces to the right position (Assuming chess piece SVG image are given)
   • Configurable UI, where the Chessboard can be initialized with any set of chess pieces provided as part of JSON input.
   • Recursion to find out all the valid positions for the particular chess piece as per its current position and highlight the same
   • Cache the whole chess board other than the chess piece which is moving to the new location of the chess board. 
   • Optimizing the rendering of Chess piece images
   • Lock the chess piece as per the current turn of the user.

Main concepts to focus

1. Understanding of Object Oriented JavaScript implementation of classes to instantiate Chess Board (Singleton pattern), Chess pieces as objects
2. CSS Flex or Grid to render chess board.
3. Image rendering optimizations
4. Recursion and backtracking to find valid positions

Resources

1. Resources for Games UI System Design
2. Object Oriented JavaScript implementation
3. CSS Flex or Grid
4. Image performance

20. Calendar Web Application

Frontend for online calendar view

Application example

1. Google Calendar
2. Outlook Calendar

Questions with commonly asked features

1. Design a Web Calendar, to show the Weekly, Monthly views and Create Events. These events can be viewed on the calendar
   • Rendering calendar in the different views and showing events accordingly.
   • Render events on top of the Calendar.
   • Handling of overlapping events.

Main concepts to focus

1. CSS Flex or Grid to render the calendar on the browser
2. z-index values to show overlapping events
3. Finding overlapping events through the Overlapping Algorithm

Resources

1. Resources for Online Calendar System Design

21. WYSIWYG editor

Frontend System Design for WYSIWYG Editor component. which is a complex component and required for taking Rich inputs from the users. 

Application example

1. Comment box
2. Feedback sections
3. Blog writers

Questions with commonly asked features

1. Design a WYSIWYG editor, which can format the text and render the exact same formatting on the browser.
   • Div element to writing text, select the existing text to apply to format or enable formatting that will be applied to the subsequent text.
   • Configurable, to change the positioning of the options, and apply middleware while applying any action.
   • Initialize the editor with predefined Rich text.

Main concepts to focus

1. Understanding ContentEditable to create an editable area to write content
2. Understanding Iframe to wrap the formatted text as part of the editor window.
3. Understand, how to store data elements including all the formatted options as part of the JSON format.

Resources

1. Resources for WYSIWYG Editor System Design
2. ContentEditable

 

📣Final Note:

After going through all the above Important Frontend System Design Interview Questions, you have noticed that most of the system design questions shared many concepts in a different type of applications. Understanding these concepts will help in designing any of the above-mentioned Frontend Systems or any other frontend system. 

A good understanding of the above concepts will definitely help you to Ace the Frontend System Design Interview. 🙏