Frontend system design interview notes

First of all, _make sure you understand the whole picture_. This means you need to ask _many_ questions before jumping on actually hatching out a plan.

Also very important note is that 99% of the time any solution will have PRO-s _and_ CON-s. This is very important from a designing perspective as (the more senior the role is) we will need to weigh in both sides.

Here is a pretty good mock interview: https://www.youtube.com/watch?v=VM2_4IXkMZ0

Also from the same author here is a textual version of the above video: https://www.feinfra.com/ 

Questions about the product:

• liveness of the data
• REST
• websockets
• who is the audience (users)
• how well educated are they in terms of the app
• will the product allow users's users (kinda admin)
• what kind of team do we already have? are they already familiar with e.g. React?
• how long is the project plan? (6 months? 2 years?)
• what kind of user audience size do we expect? should we worry about scaling our product at this stage?

Important topics

• bare minimum html/js vs Next.JS SSR vs SPA
• CI/CD
• testing
• unit (jest)
• e2e (cypress)
• synthetic
• optimization
• minifying css/js
• optimize media assets
• monitoring
• DataDog / Sentry / Google Analytics / ...
• security
• XSS, CSRF, SQL injection, ...
• A/B testing
• CDN
• Content Delivery Network (I keep forgetting this name..)
• code infrastructure setup
• monorepo / multiple repos
• shared UI component library
• service-oriented architecture: teams focusing on each part of the domain, pro-s / con-s
• related to the previous point: do we have a design system already?
• css framework like tailwind?
• sharing types between FE and BE
• API contracts
• OpenAPI, GraphQL, etc..
• ProtoBuff - code generation like React hooks (wow)
• state management
• React Context
• zustand / jotai / Redux / ...
• router
• react router e.g.
• do we have OKR-s set?
• SLA-s
• contenful paint
• (Google's) Core Web Vitals
•  (source)
• The Largest Contentful Paint (LCP) checks the render time of a page’s main content when it starts loading. The main content is generally the largest image or a text block in the viewport – a visible area of a web page on a user’s device.
• The First Input Delay (FID) measures input latency – how long it takes for a site to respond to a user’s input. This includes key presses, taps, and clicks on buttons, links, and videos or audios on a page.
• The Cumulative Layout Shift (CLS) measures visual stability and checks whether there is an unexpected layout shift in the page.
• wireframing?
• styling guidelines
• styled components
• css modules