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