🏗️ 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