The System Design interview is a relatively new type of interview for the front-end. However, it's been a default interview in Grammarly for quite a while. I will show an almost real-life example, and we will discuss what to pay attention to during such interviews.
3. The goal
● familiarize everyone with the system design interview
● share tips and intent of such an interview
● show that it’s not a rocket since ;)
3
4. 2. What is a System design interview?
Agenda
4
1. What are the typical interview types?
3. Example
4. Summary & Tips
4
6. We’re hiring, everyone is hiring…
● hire the right people for the right positions
● meet the candidate with the company during the
interview
● hire for the long term
6
7. ● what kinds of interviews will there be?
● should I prepare anything for interviews?
Ask about interviews in advance?
7
8. Tech/Manager screen
Focus area (Front-End skills)
Computer science (coding)
System design for Front-End engineers
The typical interviews
Non-tech interviews
8
11. ●the architecture of the client
application
●stage management
●API (communication with back-end)
●error handling
●accessibility, performance, i18n
The difference with the system design interview for back-end
Front-end Back-End
- scalability (multi-reagan, db sharding)
- reliability
- API
- performance (the speed of the response/processing)
- processing cost
11
Black box
12. 12
● Problem-solving
○to see the bigger picture and then dig into smaller pieces
○to ask the right questions
○to spot the corner-cases
● Autonomy
○Ability to drive a solution to completion
● Tech Knowledge
○the actual understanding of design patterns and principles
○the understanding of the sense of front-end
12
What to pay attention to
14. 0. Initial intro and the question ~ 5 min
1. Requirements gathering ~ 5 min
2. The design phase ~ 25-30
3. The polishing phase, deep dive, etc ~ 20 min
The typical stages of a
System Design interview
14
15. Disclaimer
15
The proposed solution is biased and may not fit any other task. Use as a guideline is not the
only possible way of solving a System Design interview.
17. Requirements: what should the system do
17
●Should we think about authorization flows?
○No, assume it’s already implemented.
●What is the first thing that user will see?
○Feed with the latest tweets and form to create a new tweet
●What other functionality should be implemented?
○Use should be able to see replies for single tweet
18. Requirements: what should the system do
18
●Should we show tweet with a replies in a pop-up or separate page?
○It doesn’t matter. What do you think?
●What is the content of the tweet?
○Let’s keep it simple - only text
●Do we need any validation for tweets?
○max 280 symbols
19. ●How much data should be shown to the user?
○50 tweets/replies per page
●Should we allow to load additional tweets/replies?
○50 per request
Requirements: data/performance contarains
19
20. ●Do we need to update the feed in real time?
○Not, it’s ok to update data with some meaningful interval (10s or so)
●Should we implement client caching or “offline” mode?
○No, but implement the “draft” mode for tweet form
Requirements: data/performance contarains
20
21. Requirements: data/performance contarains
21
●Should we account for fault tolerance, a11y, i18n?
○Fault tolerance and a11y, but think about high-level architecture first
●Should I use any specific framework to build a client?
○Of your choice
22. Non-functional requirements:
●Use pagination/infinite scroll to speed up
the page load
●Data should be updated periodically
(every 10s), don’t need to update it in
real-time
●Think about fault tolerance
●The system should be accessible
Functional requirements:
●User should be able to see feed
●User should be able to add new tweet
●User should be able to see tweets and
replies on a separate page
●Pagination for tweets/replies
1. Requirements
22
31. Bias detected! Should I use “controller”?
31
The goal is to show that the view will not be mixed with business and application logic.
“Controller”
MV*
46. View layer
Feeds “Controller”
Feed Single post
Client State
New post
Tweet “Controller”
Server
Application “Controller”
46
{
user: User
feed: Feed
tweet: NewTweet
}
54. 2. Focus on the important areas of the product
1. Would you like me to focus on some specific
area?
3. Focus on your strengths
3. Deep dive
54
55. ●Error page for cases when tweet cannot be found, 500 from server or
●Retries policies
●“Notification” to say that something goes wrong
Deep dive: Error handling
55
56. ●Error page for cases when tweet cannot be found, 500 from server or
●Retries policies
●“Notification” to say that something goes wrong
●Service to observe the offline/online mode
Deep dive: Error handling
56
Feeds Controller Tweet Controller
Back end
Application controller
Connection Checker Middleware
58. ● Keyboard accessible:
○ Tab order
○ Semantic elements
● Visually accessible:
○ Contrast, accessible fonts, no color-coding, etc
○ proper aria-labels
● Advanced: Screen reader support
● Testing
○ Unit tests with lighthouse + axe tools for automation testing
○ Manual tests for a11y scenarios
● Company-level base component library with a11y
● Company-wide processes:
○ a11y training for the team members
○ a11y-related page
● ….
Deep dive: a11y
58
59. : would you like me to focus on
something else?
: we’re done. Thank you!
59
60. View layer
Feeds “Controller”
Feed Single post
Client State
New post
Tweet “Controller”
Back end
Application “Controller”
60
{
user: User
feed: Feed
tweet: NewTweet
}
Error Page
61. Summary & Tips
61
61
●Spend time on requirements gathering.
●You're driving an interview and explaining every step.
●Don't rush if you know the solution. Or better, always build from scratch.
●Continuously check the status with the interviewer and the requirements.
●Don't overcomplicate things. Start high-level and drill-down.
●Check the time. It's better to skip some unclear areas rather than spend the whole
interview solving them.
●If you're stuck, ask for a tip.
●Focus on your strengths.
62. Resources
●What are Functional and Non-Functional Requirements and How to Document These
●How to design a Facebook in 30-minutes or Acing System Design Interview
●Frontend system design interviews - the definitive guide
62
62
63. How to Build a Productive Team
Grammarly stands
with Ukraine.
We invite you to do the same.
Here are some ways you
can help: