Frontend System Design plan
Frontend System Design is different from Backend System Design. It’s a vague topic and it’s difficult to find proper books or articles of how to be prepared for it. Here’s my step-by-step plan of how to approach it.
What is frontend system design?
Usually, during the interview you’re given mockup/screenshot of some page that you need to design. There’s no coding, but you have to use drawing tools like Google Draw or Excalidraw as a whiteboard.
Examples of questions
There are some examples:
- Newsfeed
- Chat application
- Poll widget
- Typeahead widget
- Data table component
There are some examples on BFE.dev.
The examples of Frontend System Design process might be found on the great Front-End Engineer Youtube-channel.
Who drives the discussion?
It depends on the company you’re being interviewed for and sometimes on the interviewer.
It might look like a conversation when during the process you discuss several options and answer clarifying questions or it might be the total monologue as if you’re as an author presents your solution to a junior-level engineer.
What is expected?
It’s expected that you’re able to solve such a vague question by breaking it down in small pieces.
- Drive conversation.
- Demonstrate your knowledge depth. Tell more about details, show your expertise in deep understanding of what you know and don’t talk about you not aware of enough.
- Demonstrate your knowledge bredth. Talk about various approaches, offer competetive technologies and provide pros and cons of them. Mention tradeoffs. Make a choice argumenting why you making it.
- Don’t hesitate to go back and change you previous step decision if there are any signals for it.
- Be ready to answer the questions realted to your own experience such as what did you designed well in the past and how would you change it now and why?
Steps
It’s a general plan that based on what I’ve seen so far.
- Core requirements
- Additional requirements
- Components architecture
- Data entities
- API end points and protocol
- Scalability
- Frontend storage
- UX concerns (pagination vs infinite scroll)
- Optimization
- Accessibility
- Final thoughts