60-Minute Staff Mock Interview

Q1

How is staff frontend system design different from senior?

Staff focuses on multi-team platforms, evolution, and org trade-offs — not just correct single-app design.

Q2

Explain RADIO+OTE.

RADIO for core design; OTE adds Operations, Team/org, and Evolution.

Q3

Design a frontend platform for 50 product teams.

App shell + Module Federation remotes + shared design system + manifest service + phased pilot migration.

Q4

How would you migrate a monolith SPA to micro-frontends?

Extract shell first, pilot one vertical, contract tests, strangler per route — no big bang.

Q5

Design a collaborative document editor (Google Docs).

OT or CRDT, WebSocket + reconnect, optimistic edits, presence throttling, snapshot + op log.

Q6

How do you govern a design system at scale?

Semver, codemods, semantic tokens, adoption metrics, self-service with guardrails.

Q7

What failure modes should a staff frontend architect plan for?

API outage, bad deploy, CDN failure, MFE crash, auth expiry — each with mitigation.

Q8

When would you NOT recommend micro-frontends?

Small team, no independent deploy need, tight coupling, org misalignment.

Q9

How do feature flags fit into frontend architecture?

Decouple deploy from release; gradual rollout; kill switch; manage flag debt.

Q10

How do you define frontend SLOs?

SLIs: LCP p75, INP p75, error rate. SLO: 99.9% over 30d. Error budget gates releases.

Q11

OT vs CRDT — when to use each?

OT for centralized text editors; CRDT for offline/P2P; discuss reconnect and permissions.

Q12

What is Conway's Law and why does it matter for frontend?

Architecture mirrors org structure — MFE requires team boundaries that match deployable units.

Q13

How do you handle API versioning on the client?

Codegen from schema, additive v1, v2 with sunset, support N and N-1 during migration.

Q14

What is a strangler fig migration?

Incrementally replace legacy slice-by-slice; reversible; low risk vs big-bang.

Q15

What artifacts do staff engineers produce beyond code?

ADRs, RFCs, migration playbooks, perf budgets, adoption dashboards.

Q16

What belongs in a 7-section RFC?

Summary, motivation, design, alternatives, cross-team impact, metrics, open questions.

Q17

Build vs buy vs OSS — how do you decide?

Score on time-to-ship, 3-year TCO, compliance, expertise, exit strategy.

Q18

What frontend costs belong in TCO analysis?

CDN egress, CI minutes, RUM sessions, DS platform FTE, third-party scripts.

Q19

How does GDPR affect frontend architecture?

Consent before analytics, no PII in localStorage, data minimization, erasure hooks.

Q20

What is a frontend platform golden path?

Blessed workflow from scaffold to deploy with automated guardrails.

Q21

Monorepo vs polyrepo — when to use each?

Monorepo for shared code; polyrepo for hard boundaries; align with Conway's Law.

Q22

How does Turborepo improve CI?

Affected-only builds and remote cache cut CI minutes 60–80%.

Q23

What belongs in a PR CI pipeline?

Lint, typecheck, tests, build, preview deploy.

Q24

Why are preview environments high-ROI?

Designers and QA review exact PR code without local setup.

Q25

What is API codegen?

Generate TS clients from OpenAPI/GraphQL; CI fails on drift.

Q26

What lint gates should block merge?

ESLint, tsc, bundle size, critical a11y.

Q27

How do you enforce dependency policy?

Proxy registry, audit, license scan, RFC for risky deps.

Q28

What is the internal SDK pattern?

@corp/auth-sdk wraps cross-cutting concerns once.

Q29

How do you measure developer experience?

Time-to-first-PR, build p95, deploy frequency, golden path adoption.

Q30

What is a merge queue?

Serializes main merges with full CI on merged result.

Q31

How do platform teams avoid bottlenecks?

Self-service, federated contributions, adoption metrics.

Q32

MFE preview environments?

Shell loads remote from preview URL via manifest override.

Q33

How do you roll out new ESLint rules?

Warn 2 sprints, codemod, then error.

Q34

Design a frontend platform for 30 teams.

Shell + DS + golden path CI + internal SDKs + pilot adoption.

Q35

What are design tokens?

Single source for color, spacing, typography; semantic tokens enable theming.

Q36

Centralized vs federated governance?

Hybrid: core primitives centralized, recipes federated at scale.

Q37

How do you ship breaking DS changes?

Major semver + codemod + migration guide; support N and N-1.

Q38

What is Chromatic for?

Visual regression on Storybook stories in PR.

Q39

a11y CI in design system?

eslint-jsx-a11y + axe in Storybook; contrast at token level.

Q40

DS adoption metrics?

% on latest major, custom/DS ratio, a11y violations, cycle time.

Q41

Contribution RFC workflow?

Proposal → design review → implement → platform review → ship.

Q42

Primitives vs recipes?

Primitives strict API; recipes composed and federated.

Q43

DS bundle size control?

Tree-shakeable ESM; size-limit in release CI.

Q44

Design a DS for 50 teams.

Tokens + Radix + hybrid governance + Chromatic + semver codemods.

Q45

What are client-side SLOs?

LCP, INP, error rate, successful page load — measured via RUM.

Q46

Explain error budgets.

Allowed failures before SLO breach; gates release velocity.

Q47

RUM vs synthetic monitoring?

RUM = production truth; synthetic catches regressions in CI.

Q48

Graceful degradation?

Stale cache, read-only mode, partial UI when APIs fail.

Q49

Client circuit breaker?

Fail fast after N errors; show cached UI; half-open probe.

Q50

Frontend incident response?

Mitigate first: kill switch, rollback, disable remote.

Q51

Per-remote error boundaries?

MFE remote crash isolated; shell stays up.

Q52

Kill switch vs feature flag?

Kill switch = emergency off; flag = gradual rollout.

Q53

SLI vs SLO vs SLA?

SLI measured, SLO target, SLA contractual.

Q54

Design frontend reliability globally.

Client SLOs, RUM, circuit breakers, error boundaries, kill switches.

Q55

How do you resolve tenant context on the client?

Subdomain, path prefix, or JWT claim — resolved at shell bootstrap.

Q56

Entitlements vs RBAC?

RBAC = who; entitlements = what plan allows; usage = how much.

Q57

White-label theming approach?

Runtime CSS variables + CDN assets per tenant.

Q58

Enterprise audit log requirements?

Who, what, when, tenant_id — immutable and exportable.

Q59

Prevent cross-tenant data leaks?

Namespace cache and storage by tenant_id; purge on switch.

Q60

Tenant/workspace switch flow?

New token + cache purge + redirect — security boundary.

Q61

SSO for multi-tenant B2B?

SAML/OIDC with workspace picker and SCIM sync.

Q62

Subdomain vs path tenant routing?

Subdomain for clean URLs; path for single domain.

Q63

Usage meters on client?

Show consumption before hard limits with upsell.

Q64

Per-tenant feature flags?

Evaluate with tenant_id; scoped kill switches.

Q65

Custom domain frontend concerns?

CNAME verification, SSL polling, branded login.

Q66

Shared/kiosk device handling?

Hard logout clears all tenant storage; short sessions.

Q67

SOC 2 / GDPR frontend implications?

Audit logs, data export UI, consent, PII masking.

Q68

Multi-tenant cache key pattern?

Include tenant_id in every client cache key.

Q69

Design multi-tenant frontend for 500 customers.

TenantProvider, entitlements, white-label, audit, isolation.

Q70

Why use feature flags on the frontend?

Decouple deploy from release; gradual rollout and kill switches.

Q71

Flag evaluation architecture?

Vendor SDK wrapped in @corp/flags-sdk with local cache.

Q72

Safe percentage rollout?

1% → 10% → 50% → 100% with guardrails and auto-rollback.

Q73

What are guardrail metrics?

Metrics that auto-pause experiments when breached.

Q74

What is a holdout group?

Permanent ~5% control for long-term measurement.

Q75

Kill switch vs feature flag?

Kill switch = ops emergency; flag = product rollout.

Q76

How to manage flag debt?

90-day expiry, ESLint, registry dashboard.

Q77

Sticky assignment — why?

Same user always gets same variant.

Q78

Frontend flag anti-patterns?

Nested flags, no owner, eval in render loop.

Q79

Run a frontend A/B test?

Hypothesis doc, flag variant, analytics, guardrails.

Q80

Per-tenant flag targeting?

tenant_id attribute in evaluation.

Q81

Flag service outage fallback?

CDN JSON polled every 60s; safe defaults.

Q82

Allowlist vs percentage rollout?

Allowlist for beta; percentage for scale.

Q83

MFE flag integration?

Shell checks flag before loading remote.

Q84

Design experimentation platform for 30 teams.

@corp/flags-sdk, guardrails, holdouts, flag debt policy.

Q85

Streaming AI responses in browser?

SSE/fetch ReadableStream with incremental UI updates.

Q86

What is TTFT?

Time to first token — key perceived latency metric.

Q87

Manage context window limits?

Sliding window, summarization, RAG, token budget.

Q88

Control AI feature cost?

Model routing, caching, rate limits, cost dashboard.

Q89

Frontend AI safety guardrails?

Input limits, moderation, stream block, refusal UX.

Q90

Fallback when AI API fails?

Retry, circuit breaker, FAQ search, partial stream.

Q91

Human-in-the-loop patterns?

Draft-review-approve for high-stakes actions.

Q92

RAG frontend concerns?

Retrieval server-side; client shows citations.

Q93

Cancel in-flight AI request?

AbortController stops fetch and stream read.

Q94

AI observability from frontend?

Log hash, tokens, latency, TTFT in RUM.

Q95

Optimistic UI with AI?

Show user message immediately; placeholder for assistant.

Q96

Multi-modal AI in frontend?

Validate uploads; progressive preview; a11y.

Q97

Enterprise AI compliance?

Audit, residency, consent, no PII in logs.

Q98

Prevent prompt injection?

System prompt server-side; sanitize display.

Q99

Design AI copilot for enterprise SaaS.

Stream, RAG, safety, fallback, token budget per tenant.

Q100

What is adaptive bitrate streaming?

Player switches quality based on bandwidth and buffer.

Q101

HLS vs DASH?

HLS .m3u8 native Safari; DASH .mpd via MSE.

Q102

CDN strategy for video?

Immutable segments, signed URLs, multi-CDN failover.

Q103

Video player facade pattern?

Poster until play — defers heavy player JS.

Q104

Virtualize 10k-row table?

Render visible rows + overscan only.

Q105

Web Workers on dashboards?

Parse and aggregate off main thread.

Q106

Real-time dashboard performance?

Ring buffer, throttle, canvas charts, rAF batching.

Q107

Variable vs fixed row virtualization?

Fixed is simpler; variable fits dynamic content.

Q108

QoE metrics for video?

Startup, rebuffer, bitrate switches, dropped frames.

Q109

Accessible video player?

Keyboard, captions, ARIA, reduced motion.

Q110

50MB CSV in browser?

Stream parse in Worker with progress.

Q111

Chart library for 10k points?

Canvas/WebGL; downsample for overview.

Q112

Thumbnail scrub bar?

Sprite sheet on CDN; position from hover.

Q113

Dashboard INP optimization?

Virtualize, debounce filters, Worker compute.

Q114

Design analytics dashboard for 1M users.

Virtual tables, Worker agg, canvas charts, budgets.

Q115

Structure locale bundles at scale?

Namespace per feature; dynamic import per locale.

Q116

RTL beyond dir=rtl?

Logical CSS properties; mirror directional icons.

Q117

ICU MessageFormat — why?

Grammar-aware plurals and gender — not concatenation.

Q118

hreflang and SEO?

One URL per locale; link rel alternate tags.

Q119

CDN for translations?

Cache locale JSON at edge with hashed filenames.

Q120

Compliance copy per region?

GDPR, CCPA, LGPD — human legal review.

Q121

i18n performance anti-patterns?

All locales bundled; Intl per render; CJK fonts global.

Q122

Pseudo-locale testing?

en-XA expands strings ~30% for overflow QA.

Q123

Locale detection priority?

URL path > cookie > Accept-Language.

Q124

Date/number/currency formatting?

Intl API with cached formatters.

Q125

Translation management workflow?

en source keys → TMS → CI key coverage.

Q126

SSR/SSG with i18n?

Static pages per locale; middleware resolution.

Q127

BiDi text handling?

Unicode bidi algorithm; isolate LTR in RTL.

Q128

Font strategy for global scripts?

Subset per script; lazy load CJK.

Q129

Design i18n for 40-language app.

Code-split, RTL CI, ICU, CDN, compliance matrix.

Q130

Design a global checkout experience with multi-tenant B2B accounts, feature-flagged experiments, and frontend SLOs.

Tenant-aware cart + payment BFF, flag-guarded checkout variants, RUM SLOs with kill switches.

Q131

Your design system serves 40 teams. How do you ship a breaking Button API change?

Semver major, codemod, N/N-1 support, adoption dashboard.

Q132

Design an AI-assisted search feature with streaming responses, cost controls, and safety filters.

SSE token stream, context window budget, moderation layer, human fallback.

Q133

Netflix-style video browse + playback: design for global scale with reliability guardrails.

SSR browse, ABR player, CDN, playback SLO, kill switch on bad encoder.

Q134

Launch in 12 locales with RTL, legal copy variants, and performance budgets.

ICU messages, locale-split bundles, edge by region, compliance copy pipeline.