1. System Design & Architecture (Most Important)
- Design Instagram’s frontend architecture from scratch (end-to-end: components, state, caching, performance, accessibility, i18n).
- Design a real-time collaborative editor like Google Docs / Figma at scale.
- Design Netflix’s video streaming UI (adaptive bitrate UI, player controls, subtitles, low-latency metrics).
- Design a trading dashboard with 100+ widgets updating at 60fps (used at Bloomberg, Robinhood, JPMorgan).
- Design Uber’s rider + driver map experience (real-time location, ETA, route polyline, clustering 100k+ drivers).
- How would you build a component library (Design System) used by 500+ engineers?
- Design a progressive web app (PWA) that works 100% offline for 1 week (field service, retail POS).
- How do you architect a frontend for 10M DAU with <1.5s Time-to-Interactive globally?
2. Performance & Optimization (Deep Dive)
- Explain how the browser renders a page — Critical Rendering Path in detail (2025 version with Paint Timing, LCP, INP).
- How do you achieve 60fps on low-end Android devices?
- Explain React 18+ Concurrent Rendering, Suspense, Transitions, useDeferredValue, useTransition — when to use what.
- How do you lazy-load 10,000 rows in a virtualized table with sub-millisecond scroll?
- Memory leak scenarios in React/Vue/Angular — how do you detect and fix them?
- What is Layout Thrashing? How do you avoid it?
- How do you reduce JavaScript parse time on cold start?
- Explain CSS containment, content-visibility, and when you’ve used them in production.
3. State Management at Scale
- When do you choose Redux vs Zustand vs Recoil vs MobX vs React Query vs custom Context?
- How do you handle 10+ MB of state without freezing the UI?
- How do you sync state between 50+ browser tabs in real-time?
- Offline-first architecture: how do you handle conflict resolution (CRDTs vs OT)?
4. Build & Bundling (Expert Level)
- Explain Webpack 5 / Vite / Turbopack / Rspack internals — which one do you choose in 2025 and why?
- How do you reduce bundle size by 70%+ in a large monorepo?
- Tree-shaking pitfalls with CommonJS vs ESM.
- How do you implement dynamic imports with prefetch/preload strategy?
- Explain module federation — real production use case.
5. TypeScript & Type Safety
- How do you enforce type-safe API contracts across 50 micro-frontends?
- Design a type-safe event bus system.
- When do you use any vs unknown vs never vs branded types?
- How do you model recursive nested components in TypeScript?
6. Testing Strategy for Large Teams
- Your team has 300 developers. How do you enforce 90%+ test coverage with fast feedback?
- Playwright vs Cypress vs WebdriverIO in 2025 — which one and why?
- How do you test WebSockets, Server-Sent Events, and offline behavior?
7. Accessibility (a11y) — Mandatory for Architect Roles
- You are responsible for WCAG 2.2 AA compliance for 10M users. How do you achieve and maintain it?
- How do you make a draggable Kanban board fully keyboard accessible?
- Explain ARIA live regions, role, and when you’ve fixed an a11y bug in production.
8. Security
- Top 5 frontend security vulnerabilities in 2025 (XSS, CSRF, clickjacking, supply-chain attacks via npm).
- How do you prevent XSS in a rich text editor?
- Content Security Policy (CSP) — how do you implement strict CSP with React?
9. Leadership & Culture
- You disagree with the CTO on using Angular vs React. How do you handle it?
- How do you unblock 5 teams waiting on your Design System?
- How do you reduce tech debt in a 1M LOC codebase without slowing velocity?
- You inherit a 7-year-old React 15 codebase. Migration plan?
10. Cutting-Edge & Future-Proofing (2025 Hot Topics)
- Have you used React Server Components (RSC) in production? Pros/cons vs traditional SPA.
- When would you choose Next.js App Router vs Remix vs SolidStart vs Qwik?
- How do you implement resumability (Qwik) or partial hydration?
- WebAssembly in the frontend — real use cases you’ve shipped.
- How do you prepare your app for Interaction to Next Paint (INP) as the new Core Web Vital?
Real Questions Asked Recently (2024–2025)
- Google (L7 Frontend): “Design YouTube’s recommendation grid with infinite scroll and prefetching.”
- Meta (E6): “How would you rebuild Instagram Stories with 60fps swipe on $100 Android phones?”
- Stripe (Staff): “Design the new Stripe Dashboard with 300+ pages and 100ms navigation.”
- Netflix (Senior Staff): “How do you A/B test UI changes for 250M users with zero regression?”
- Robinhood (Principal): “Design a candlestick chart that updates 1000 times/second without jank.”
Bonus Deep Technical Questions
- Explain the difference between useLayoutEffect and useEffect at the browser paint level.
- How does React Forget (upcoming compiler) change how we write React?
- Explain V8 Sparkplug compiler and how it affects startup time.
- How do you implement a virtual DOM diffing algorithm from scratch?
This list covers 95%+ of what is actually asked in UI Architect interviews in 2025. Master these, and you’re ready for any Principal/Architect role globally.