website: update links to GFE
This commit is contained in:
Yangshun
parent
c8c86c293c
commit
cda773578a
|
|
@ -6,7 +6,7 @@ sidebar_label: Algorithms coding
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/algorithms).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
|
|||
|
||||
### GreatFrontEnd
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) provides [**free** questions for you to practice implementing Data Structures and Algorithms in JavaScript](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?fpr=frontendinterviewhandbook). You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack), [Queues](https://www.greatfrontend.com/questions/javascript/queue)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort)).
|
||||
[GreatFrontEnd](https://www.greatfrontend.com) provides [**free** questions for you to practice implementing Data Structures and Algorithms in JavaScript](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack), [Queues](https://www.greatfrontend.com/questions/javascript/queue)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort)).
|
||||
|
||||
|
||||
## Algorithm courses
|
||||
|
|
@ -47,6 +47,6 @@ If you want more structured algorithms practice which are targeted at JavaScript
|
|||
|
||||
:::info Practice Data Structures and Algorithms coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). Start practicing today!
|
||||
|
||||
:::
|
||||
|
|
@ -4,7 +4,7 @@ title: Behavorial interview
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/behavioral-interview-guidebook).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ sidebar_label: User interface coding
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/user-interface).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ Companies that ask such questions usually ask candidates to code in one of these
|
|||
|
||||
:::info Practice UI coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface). Start practicing today!
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -98,6 +98,6 @@ Lastly, mention how you would do things differently if you had more time and wer
|
|||
|
||||
:::info Practice UI coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/user-interface). Start practicing today!
|
||||
|
||||
:::
|
||||
|
|
@ -5,7 +5,7 @@ sidebar_label: Airbnb interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Amazon interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Apple interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: ByteDance/TikTok interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Dropbox interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Google interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: LinkedIn interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Lyft interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Microsoft interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Salesforce interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Twitter interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Uber interview questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/prepare).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: CSS questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ sidebar_label: Applications
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -22,11 +22,11 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
|||
|
||||
## Framework
|
||||
|
||||
1. Requirements clarifications/alignment
|
||||
1. Requirements exploration
|
||||
1. Architecture
|
||||
1. Data model
|
||||
1. API design
|
||||
1. Deep dive
|
||||
1. Interface definition (API)
|
||||
1. Optimizations and deep dive
|
||||
- User experience (UX)
|
||||
- Performance
|
||||
- Accessibility (a11y)
|
||||
|
|
@ -34,7 +34,7 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
|||
- Multi-device support
|
||||
- Security
|
||||
|
||||
### Requirements clarification
|
||||
### Requirements exploration
|
||||
|
||||
Every system design interview should start with clarifying requirements about the question, which is usually left vague intentionally. Some considerations:
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ Every system design interview should start with clarifying requirements about th
|
|||
- Do we need to support internationalization?
|
||||
- Does the app need to work offline?
|
||||
|
||||
### Architecture
|
||||
### 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.
|
||||
|
||||
|
|
@ -60,11 +60,11 @@ For applications, common architectures include Model-View-Controller, Model-View
|
|||
|
||||
Client app state, which is a combination of server state (database) and true client state (non-persisted to the server).
|
||||
|
||||
### API design
|
||||
### Interface definition (API)
|
||||
|
||||
API design for applications will refer to the HTTP/network API parameters and the shape of the responses.
|
||||
|
||||
### Deep dives
|
||||
### Optimization and deep dives
|
||||
|
||||
With the architectural basics of the application covered, we can dive into specific areas which the application might need special attention to. Note that there almost definitely won't be enough time to cover every area, and not every area will be very relevant to the component at hand.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ sidebar_label: UI components
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design/types-of-questions).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -26,15 +26,16 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
|||
|
||||
## 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 **RADAD** 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.
|
||||
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.
|
||||
|
||||
1. **<u>R</u>equirements clarifications/alignment** - Ask about the requirements of the system.
|
||||
1. **<u>A</u>rchitecture** - Outline the architecture of the subcomponents in the component, where relevant.
|
||||
1. **<u>D</u>ata model** - How would the component store any data passed into it? What data structures are used?
|
||||
1. **<u>A</u>PI design** - What's the API for using this component? What options will be allowed on the component?
|
||||
1. **<u>D</u>eep dive** - User Experience (UX), Performance, Accessibility (a11y), Internationalization (i18n), Multi-device support, Security
|
||||
1. **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
|
||||
1. **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
|
||||
1. **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
|
||||
1. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
|
||||
1. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
|
||||
|
||||
### Requirements clarification
|
||||
|
||||
### 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!
|
||||
|
||||
|
|
@ -48,7 +49,7 @@ Some considerations:
|
|||
- Do we need to support internationalization?
|
||||
- How much styling customization do we want to allow?
|
||||
|
||||
### Architecture
|
||||
### 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.
|
||||
|
||||
|
|
@ -79,7 +80,7 @@ Deciding what data to put in state is essential to doing well for this portion.
|
|||
- Components are easier to reason about (read/understand) the fewer the fields there are in the state. We should strive to reduce the amount of state needed. If a component uses a value which can be derived from another piece of state, then that value should most likely not be part of the state. For example if your component is rendering a list of items and you want to display a message when there are no items to render, there shouldn't be an additional `isEmpty` state because it can be derived from the length of the `items`.
|
||||
- If a component has multiple subcomponents, it'll be best if it's possible to consolidate the state within the top level and the rest of the components are pure and stateless.
|
||||
|
||||
### API design
|
||||
### Interface definition (API)
|
||||
|
||||
The key idea behind components is for them to be reused and abstract complexities. Good components are designed well such that they can be reused in multiple scenarios and users do not have to know how they work internally before using them. For components, API refers to configuration options which would the component developer would expose to other developers to specify.
|
||||
|
||||
|
|
@ -98,7 +99,7 @@ The key idea behind components is for them to be reused and abstract complexitie
|
|||
|
||||
:::
|
||||
|
||||
### Deep dives
|
||||
### Optimization and deep dives
|
||||
|
||||
With the basics of the component covered, we can dive into specific areas where the component might need special attention to. Note that there almost definitely won't be enough time to cover every area, and not every area will be very relevant to the component at hand.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Overview
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/system-design).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -22,15 +22,15 @@ The two main kinds of front end system design interviews are UI components and a
|
|||
## Front end system design examples
|
||||
|
||||
- User interface components
|
||||
- Autocomplete — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Image carousel — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/image-carousel) (Paid)
|
||||
- Dropdown menu — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)
|
||||
- Modal dialog — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/modal-dialog) (Paid)
|
||||
- Autocomplete: [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/autocomplete)
|
||||
- Image carousel: [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/image-carousel) (Paid)
|
||||
- Dropdown menu: [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/dropdown-menu) (Paid)
|
||||
- Modal dialog: [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/modal-dialog) (Paid)
|
||||
- Applications
|
||||
- News feed (e.g. Facebook) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
|
||||
- E-commerce marketplace (e.g. Amazon) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon) (Paid)
|
||||
- Chat application (e.g. Messenger) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/chat-application-messenger) (Paid)
|
||||
- Photo sharing application (e.g. Instagram) — [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram) (Paid)
|
||||
- News feed (e.g. Facebook): [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
|
||||
- E-commerce marketplace (e.g. Amazon): [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon) (Paid)
|
||||
- Chat application (e.g. Messenger): [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/chat-application-messenger) (Paid)
|
||||
- Photo sharing application (e.g. Instagram): [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram) (Paid)
|
||||
- Video watching website
|
||||
|
||||
:::info Read front end system design case studies
|
||||
|
|
@ -39,17 +39,17 @@ The two main kinds of front end system design interviews are UI components and a
|
|||
|
||||
:::
|
||||
|
||||
## RADAD Framework
|
||||
## RADIO Framework
|
||||
|
||||
System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great! Otherwise, here's a framework you can use to give an outline to the interviewer as to what you are going to cover, which is also helpful when working on new front end projects at work.
|
||||
|
||||
This framework is called **RADAD** 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.
|
||||
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.
|
||||
|
||||
1. **<u>R</u>equirements clarifications/alignment** - Ask about the requirements of the system.
|
||||
1. **<u>A</u>rchitecture** - Outline the architecture of the system (could be a UI component or an app, depending on the question). Draw diagrams where relevant.
|
||||
1. **<u>D</u>ata model** - How would the component store any data passed into it? What data structures are used?
|
||||
1. **<u>A</u>PI design** - What's the API for using this component? What options will be allowed on the component?
|
||||
1. **<u>D</u>eep dive** - User Experience (UX), Performance, Accessibility (a11y), Internationalization (i18n), Multi-device support, Security
|
||||
1. **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
|
||||
1. **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
|
||||
1. **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
|
||||
1. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
|
||||
1. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
|
||||
|
||||
How to approach system design questions for applications and UI components can differ significantly, and we'll go through them in more detail in subsequent sections.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: HTML questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Introduction
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ Describe and discuss how you would build a UI component/app/game and its archite
|
|||
|
||||
:::info Be interview-ready with GreatFrontEnd
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has questions and answers for all kind of front end interview questions, [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook), and a [huge question bank](https://www.greatfrontend.com/prepare/coding?fpr=frontendinterviewhandbook)!
|
||||
[GreatFrontEnd](https://www.greatfrontend.com) has questions and answers for all kind of front end interview questions, [study plans](https://www.greatfrontend.com/get-started), and a [huge question bank](https://www.greatfrontend.com/prepare/coding)!
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: JavaScript questions
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ sidebar_label: JavaScript coding
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/javascript).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ Almost all existing utility functions you will be asked exist within the JavaScr
|
|||
|
||||
:::info Practice JavaScript coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities). Start practicing today!
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ Advanced questions are usually given to more senior candidates and expect around
|
|||
|
||||
:::info Practice JavaScript coding questions on GreatFrontEnd
|
||||
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) has front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities?fpr=frontendinterviewhandbook). Start practicing today!
|
||||
Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/utilities). Start practicing today!
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Resume preparation
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/resume).
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sidebar_label: Overview
|
|||
|
||||
:::info We are now part of GreatFrontEnd!
|
||||
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz?fpr=frontendinterviewhandbook).
|
||||
Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfrontend.com)! We are working to migrate the content over and you may find the latest version of this page on [GreatFrontEnd](https://www.greatfrontend.com/front-end-interview-guidebook/quiz).
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ Trivia questions are meant to test how well candidates understand the theory beh
|
|||
|
||||
:::info Best place to prepare for Front End interviews.
|
||||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook) provides front end interview [study plans](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook) and a [huge question bank of trivia questions and answers](https://www.greatfrontend.com/prepare/quiz?fpr=frontendinterviewhandbook). Start studying today!
|
||||
[GreatFrontEnd](https://www.greatfrontend.com) provides front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of trivia questions and answers](https://www.greatfrontend.com/prepare/quiz). Start studying today!
|
||||
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,25 @@ module.exports = {
|
|||
},
|
||||
items: [
|
||||
{to: 'introduction', label: 'Start reading', position: 'left'},
|
||||
{to: 'coding', label: 'Coding', position: 'left'},
|
||||
{
|
||||
type: 'dropdown',
|
||||
position: 'left',
|
||||
label: 'Practice',
|
||||
items: [
|
||||
{
|
||||
label: 'Coding Questions',
|
||||
href: 'https://www.greatfrontend.com/prepare/coding'
|
||||
},
|
||||
{
|
||||
label: 'System Design',
|
||||
href: 'https://www.greatfrontend.com/prepare/system-design'
|
||||
},
|
||||
{
|
||||
label: 'Quiz Questions',
|
||||
href: 'https://www.greatfrontend.com/prepare/quiz'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
to: 'front-end-system-design',
|
||||
label: 'System design',
|
||||
|
|
@ -132,6 +150,10 @@ module.exports = {
|
|||
{
|
||||
title: 'More',
|
||||
items: [
|
||||
{
|
||||
label: 'GreatFrontEnd',
|
||||
href: 'https://www.greatfrontend.com',
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/yangshun/front-end-interview-handbook',
|
||||
|
|
@ -142,11 +164,11 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
label: 'Twitter',
|
||||
href: 'https://twitter.com/yangshunz',
|
||||
href: 'https://twitter.com/greatfrontend',
|
||||
},
|
||||
{
|
||||
label: 'Contact us',
|
||||
href: 'mailto:contact@techinterviewhandbook.org',
|
||||
href: 'mailto:contact@greatfrontend.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -44,6 +44,10 @@ html[data-theme='dark'] {
|
|||
--ifm-footer-padding-vertical: 3rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue