Back
🏗️

Cheatsheet — System Design

Protocols · Machine Coding · Performance · Storage · Security

🏗️ The Universal Machine Coding Checklist

Before Writing Any Code 🧠

  • ✓Clarify requirements — functional & non-functional
  • ✓Ask: what scale? (10 users vs 10M users)
  • ✓Define data structures / state shape first
  • ✓Identify: real-time needed? offline support?
  • ✓Define component boundaries on paper
  • ✓Identify edge cases (empty state, error state, loading state)
  • ✓Ask about browser support / mobile requirements
  • ✓Confirm: should you handle auth? pagination?
  • ✓Agree on what NOT to implement (time-box scope)
  • ✓Talk through your plan before coding

Every Component Needs These States 🔄

  • ⚠Loading state — spinner / skeleton (not just the happy path!)
  • ⚠Error state — show error message + retry action
  • ⚠Empty state — no data yet (first time user experience)
  • ⚠Partial/edge data — 0 items, 1 item, 10,000 items
// Pattern to always use
const [data, setData]     = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError]   = useState(null);

Accessibility Checklist ♿

  • ✓Keyboard navigable (Tab, Enter, Escape, Arrow keys)
  • ✓Proper ARIA roles / labels on interactive elements
  • ✓Focus management on modal open/close
  • ✓Alt text on all images
  • ✓Color contrast — do not rely on color alone
  • ✓Announce dynamic changes with aria-live

Performance Checklist ⚡

  • ✓Debounce / throttle search inputs and scroll handlers
  • ✓Virtualize long lists (react-virtual, react-window)
  • ✓Lazy-load images (loading='lazy' or IntersectionObserver)
  • ✓Memoize expensive computations (useMemo)
  • ✓Stable callbacks to avoid child re-renders (useCallback + memo)
  • ✓Code-split heavy components (React.lazy + Suspense)

🎯 Common Machine Coding Questions — Key Points

Search Autocomplete

  • ✓Debounce input (300ms) — do not fire on every keystroke
  • ✓Cancel previous request on new input (AbortController)
  • ✓Cache results in a Map to avoid repeat fetches
  • ✓Keyboard: ArrowUp/Down, Enter selects, Escape closes
  • ✓ARIA: role='combobox', aria-expanded, role='listbox', role='option'
  • ✓Highlight matched text in suggestions

Infinite Scroll / Pagination

  • ✓IntersectionObserver on sentinel div at bottom — no scroll listener
  • ✓Show loading skeleton while fetching next page
  • ✓Deduplicate items (server may return duplicates with cursor-based)
  • ✓Handle network errors — retry button, do not lose loaded data
  • ✓Virtualize if list grows very large (1000+ items)
  • ✓Choose: cursor-based (stable) vs offset-based (simpler but inconsistent)
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting && !loading) fetchNextPage();
}, { threshold: 0.1 });
observer.observe(sentinelRef.current);

File Upload

  • ✓Show progress bar (XHR onprogress or fetch ReadableStream)
  • ✓Validate: file type, size limit BEFORE upload
  • ✓Allow drag-and-drop (ondragover + ondrop)
  • ✓Multiple files — queue them, upload concurrently or sequentially
  • ✓Retry failed uploads, show per-file status
  • ✓Chunked upload for large files (resumable)
// Progress with XHR
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  const pct = Math.round((e.loaded / e.total) * 100);
  setProgress(pct);
};

Real-time Chat

  • ✓WebSocket for bidirectional messaging
  • ✓Optimistic UI — show message immediately, confirm async
  • ✓Reconnect logic with exponential backoff
  • ✓Scroll to bottom on new message (unless user has scrolled up)
  • ✓Show typing indicators (debounced emit)
  • ✓Presence (online/offline) via WebSocket heartbeat

Drag and Drop

  • ✓HTML5 Drag API: draggable, ondragstart, ondragover, ondrop
  • ✓preventDefault on ondragover to allow drop
  • ✓Visual feedback — highlight valid drop zones
  • ✓dataTransfer.setData / getData to pass item id
  • ✓Touch support needs separate pointer event handling
  • ✓Keyboard alternative for accessibility
el.ondragstart = (e) => e.dataTransfer.setData("id", item.id);
drop.ondragover = (e) => e.preventDefault(); // required!
drop.ondrop = (e) => {
  const id = e.dataTransfer.getData("id");
  reorder(id);
};

Modal / Toast / Tooltip

  • ✓Modal: Portal to body, focus trap, lock body scroll, close on Escape
  • ✓Restore focus to trigger element on close
  • ✓Toast: auto-dismiss with timer, pause on hover, accessible aria-live='polite'
  • ✓Tooltip: show on hover + focus (keyboard users too!), useRef for positioning
  • ✓Overlay click closes modal — but not click inside modal

Form with Validation

  • ✓Validate on blur (not on every keystroke) to avoid annoying UX
  • ✓Re-validate on submit
  • ✓Disabled submit until valid — or allow submit and show all errors
  • ✓Show inline errors, not just a toast
  • ✓Handle async validation (email availability check — debounce!)
  • ✓Consider React Hook Form or Zod for complex forms

Virtualized List (10k+ items)

  • ✓Only render visible items + overscan buffer
  • ✓Calculate item positions from known / estimated heights
  • ✓For variable height: measure with ResizeObserver, store heights
  • ✓Scroll restoration when navigating away and back
// Core idea
const ITEM_HEIGHT = 40;
const visibleStart = Math.floor(scrollTop / ITEM_HEIGHT);
const visibleEnd   = Math.ceil((scrollTop + containerH) / ITEM_HEIGHT);
// Render only items[visibleStart..visibleEnd]
// Spacer div for total height