system-design

Use the RADIO framework: gather Requirements, define Architecture, design the Data model, specify Interfaces, and address Optimizations — spending roughly 5-10 minutes on each step within a 40-minute interview.

Client-side rendering (CSR) sends a minimal HTML shell and renders everything in the browser via JavaScript — fast TTFB but slow first paint and poor SEO. Server-side rendering (SSR) generates full HTML on the server — slower TTFB but fast first paint and good SEO. Modern apps often use hybrid approaches where different routes use different strategies.

A good component API follows composition over configuration (prefer children and slots over complex props), provides sensible defaults so components work with minimal setup, uses consistent naming conventions, ensures accessibility by default, and leverages TypeScript for type-safe constrained values.

Client state is data owned by the browser (UI state, form inputs, navigation) that doesn't need to be fetched. Server state is data owned by the backend (user profiles, posts, products) that's fetched over the network and cached locally. Using different tools for each (useState/Zustand for client, TanStack Query/SWR for server) prevents stale data bugs and eliminates manual cache management.