Front End System Design Interview - UI Components
Front End Interview Handbook is part of GreatFrontEnd! Find the latest version of this page on GreatFrontEnd.
Examples
- Autocomplete: Read example solution (Free)
- Image carousel: Read example solution (Paid)
- Dropdown menu: Read example solution (Paid)
- Modal dialog: Read example solution (Paid)
- Poll widget: Read example solution (Paid)
- Selector which loads options over the network
To find out more, check out GreatFrontEnd, which shows you how to approach front end system design interviews with their front end system design guide and case studies. There are also blogs that will cover some of the following topics in more detail.
Framework
In system design interviews, candidates are supposed to lead the conversation. Here's a framework you can use to give an outline to the interviewer as to what you are going to cover. This framework is called RADIO 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.
- Requirements exploration: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
- Architecture / High-level design: Identify the key components of the product and how they are related to each other.
- Data model: Describe the various data entities, the fields they contain and which component(s) they belong to.
- Interface definition (API): Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
- Optimizations and deep dive: Discuss about possible optimization opportunities and specific areas of interest when building the product.
Requirements exploration
Every system design interview (even for non-front end as well) should start with requirements gathering/clarifying requirements about the question, which is usually left underspecified on purpose. You are recommended to spend at least a few minutes clarifying the requirements. Do not start drawing the architecture before you are clear about the requirements!
Thankfully, components have well-defined scope and not try to do too many things. You likely have used such a component yourself and possibly know what you need from such a component.
Some considerations:
- What devices should the system support? Desktop web, mobile web, etc
- What's the primary device that users will access the system on?
- Which browsers should we support?
- Do we need to support internationalization?
- How much styling customization do we want to allow?
Architecture / High-level design
Architecture for front end interviews are typically focused on the client-side architecture, and not on large scale distributed systems where databases, load balancers and servers are involved.
For components, list down the various subcomponents that will exist within it and what data is being passed among each component.
Let's take an image carousel example. Subcomponents within an image carousel would be:
- Main image: An image that displays the photo in focus
- Thumbnail: Smaller images below the (Will there be thumbnails? You will only know if you clarified requirements earlier)
- Image store: A client side cache of the list of photos to display
If you have a whiteboard/online drawing tool, it would also be helpful to draw diagrams to illustrate the entities and their relationships. Which subcomponent communicates with which when a user interaction occurs.