Senior Frontend System Design Interview Questions (50 MCQs)

Question 1

For a scalable infinite scroll, what matters?

Accepted Answer

Cursor pagination + virtualization + aborting stale requests

Answer

Loading millions of rows into the DOM at once

Answer

Always disabling cache

Answer

Only `alert` for every item

Question 2

For offline-first notes, what combination is typical?

Accepted Answer

Service Worker + IndexedDB + a sync queue

Answer

Only sessionStorage with no sync

Answer

Theme color only

Answer

Removing persistence entirely

Question 3

In a multi-tenant dashboard, what is critical?

Accepted Answer

Data isolation and preventing cross-tenant cache leaks

Answer

Unrestricted sharing of all data across tenants

Answer

Removing authentication

Answer

Only matching fonts

Question 4

Designing autocomplete, which set matters most?

Accepted Answer

Debounce, result cache, cancel stale requests, keyboard a11y (combobox)

Answer

Fetch on every keystroke without cache

Answer

Load all data at startup

Answer

Only dropdown styling

Question 5

What underpins a design system scaling across teams?

Accepted Answer

Design tokens, semver versioning, and docs/Storybook

Answer

Copying components into every project

Answer

One big unversioned CSS file

Answer

Inline styles everywhere

Question 6

What does an image CDN (like Cloudinary or imgix) offer?

Accepted Answer

On-the-fly resize and format conversion (AVIF/WebP) at the edge per device

Answer

Permanent localStorage storage

Answer

Removing the need for `alt`

Answer

Running JS on images

Question 7

What is typically used for concurrent editing like Google Docs?

Accepted Answer

CRDTs or Operational Transformation

Answer

Last-write-wins on the whole document

Answer

Locking the doc for one user

Answer

Polling every minute

Question 8

Why does RUM data matter more than lab Lighthouse?

Accepted Answer

It reflects real users on real devices and networks

Answer

It always scores higher

Answer

It needs no JS

Answer

It only measures desktop

Question 9

What risk does Content Security Policy (CSP) mainly reduce?

Accepted Answer

XSS by restricting allowed script and other sources

Answer

CSRF entirely

Answer

SQL injection

Answer

DDoS

Question 10

To personalize the homepage, the team added `Vary: Cookie` and the CDN hit rate fell from 95% to 2%. What's a better design?

Accepted Answer

Cache a shared shell and load personalized parts separately (client or edge) with a bounded key

Answer

Lower the TTL to one second so the cache fills faster

Answer

Remove the CDN and serve everything from origin

Answer

Also add `Vary: User-Agent` for more precision

Question 11

A hot page expires from cache every 60s, and at that moment thousands of concurrent requests hit origin and take it down. What's the fix?

Accepted Answer

CDN request collapsing with `stale-while-revalidate` and an origin shield

Answer

Lower the TTL to 5s to spread the load

Answer

Disable caching for that page

Answer

Add immediate client retries for 503 errors

Question 12

During a rolling deploy, an old client calls a Server Action or endpoint whose payload shape changed in the new version. What's the systematic approach?

Accepted Answer

Backward-compatible contracts (expand/contract) plus version-aware routing (skew protection)

Answer

Deploy only at midnight when nobody is online

Answer

Force every user to reload every second

Answer

Drop versioning and change client and server simultaneously

Question 13

In Module Federation micro-frontends, two remotes load different React versions and hooks throw "Invalid hook call". Root cause and fix?

Accepted Answer

Multiple React instances; share React as a `singleton` with a compatible version range and a version contract

Answer

React must be bundled separately in every remote for isolation

Answer

Hooks aren't supported in micro-frontends

Answer

All remotes must be placed in a single iframe

Question 14

In a micro-frontend platform, one team's global styles break another team's buttons. Which combination is most robust?

Accepted Answer

Scoped CSS (Modules or prefixes) or `@layer`, banning global styles, and shared design tokens

Answer

Using `!important` on all of each team's rules

Answer

Loading every team's CSS in alphabetical order

Answer

Removing CSS entirely and styling only with inline JavaScript

Question 15

A WebSocket service scaled to 20 instances and users on different instances miss messages in the same room. What's the right architecture?

Accepted Answer

A pub/sub backplane (e.g. Redis or Kafka) that delivers messages to every instance with subscribers

Answer

Sticky sessions alone are enough

Answer

Switching every client to polling every 100ms

Answer

Limiting the service to one instance forever

Question 16

In a real-time app with reconnects and retries, users sometimes see duplicate or out-of-order messages. How should the client handle it?

Accepted Answer

Dedupe by unique message ID and order by a server-assigned sequence

Answer

Order by each client device's clock

Answer

Show messages exactly in arrival order

Answer

Disable retries to avoid duplicates

Question 17

An offline-first app resolves conflicts with last-write-wins using the device's `Date.now()`, and data is sometimes lost. What's the core issue?

Accepted Answer

Device clocks are unreliable and record-level LWW discards concurrent edits

Answer

IndexedDB can't store timestamps

Answer

`Date.now()` doesn't work offline

Answer

The server should always reject client data

Question 18

A `POST /payments` request timed out with an unknown outcome and the client retries. How do you prevent a double charge?

Accepted Answer

Send a unique `Idempotency-Key` so the server returns the original result

Answer

Disable the button for 5 seconds

Answer

Change the request to `GET` to make it idempotent

Answer

Raise the timeout to 10 minutes

Question 19

A trading dashboard receives 2000 price updates per second and calls setState for each; the UI freezes. What's the right design?

Accepted Answer

Coalesce the latest value per symbol in a buffer and flush once per frame with `requestAnimationFrame`

Answer

Adding `await` before every setState

Answer

Storing every update in `localStorage`

Answer

Opening a separate WebSocket per symbol

Question 20

Email app users often keep 10 tabs open, each opening its own WebSocket and multiplying server load 10x. What's a client-side fix?

Accepted Answer

Leader election across tabs (e.g. Web Locks) so one tab holds the connection and relays via `BroadcastChannel`

Answer

Automatically closing every tab but one

Answer

Storing the WebSocket connection in `localStorage`

Answer

Switching each tab to polling

Question 21

For a banking SPA using OAuth/OIDC, what's the current security recommendation for holding tokens?

Accepted Answer

A BFF pattern that keeps tokens server-side and gives the browser only an HttpOnly session cookie

Answer

Storing access and refresh tokens in `localStorage` with client-side encryption

Answer

Using implicit flow with the token in the URL fragment

Answer

Keeping the refresh token in a non-HttpOnly cookie for JS access

Question 22

What attack exactly does PKCE neutralize in the OAuth Authorization Code flow?

Accepted Answer

An attacker intercepting the authorization code and exchanging it for tokens

Answer

XSS attacks on the callback page

Answer

Guessing the user's password on the login page

Answer

DDoS attacks on the authorization server

Question 23

What's the weakness of a domain-allowlist CSP (like `script-src https://cdn.example.com https://www.google.com`) and the better alternative?

Accepted Answer

JSONP endpoints or old libraries on allowed domains enable bypasses; a strict CSP with nonces or hashes and `strict-dynamic` is better

Answer

Allowlists have no weakness and are best practice

Answer

Add `'unsafe-inline'` for more security

Answer

CSP only helps against CSRF and should be removed

Question 24

In a large codebase with hundreds of developers, how do Trusted Types help eliminate DOM XSS?

Accepted Answer

Dangerous sinks like `innerHTML` accept only Trusted objects created by reviewed policies

Answer

It automatically encrypts all strings

Answer

It blocks every third-party script from running

Answer

It enables TypeScript at runtime in the browser

Question 25

The checkout page loads third-party analytics and chat scripts. What's the biggest risk and mitigation?

Accepted Answer

A compromised script (Magecart) skims cards; put payment fields in an isolated provider iframe and minimize scripts on that page

Answer

Scripts slow the page; just minify them

Answer

The only risk is CLS from the chat widget

Answer

Third-party scripts can't access the page's DOM

Question 26

The system uses stateless JWTs valid for 24h, and after a password change or ban access persists for a day. What's a balanced design?

Accepted Answer

Short-lived access tokens (minutes) plus server-revocable refresh tokens

Answer

Extending JWT validity to a week to reduce load

Answer

Checking the database only on logout

Answer

Removing the JWT signature for speed

Question 27

An e-learning platform serves paid videos from a CDN and doesn't want each request going to origin for auth. What's a good approach?

Accepted Answer

Short-lived signed URLs or signed cookies that the CDN validates at the edge

Answer

A long secret URL with no expiry per video

Answer

Checking `Referer` alone

Answer

`Cache-Control: no-store` on all videos

Question 28

Users report a slow checkout, but every backend service's metrics look normal. How do you trace the full path from browser to database?

Accepted Answer

Distributed tracing with OpenTelemetry, propagating `traceparent` from the browser to every service

Answer

Adding `console.log` in frontend code and asking users for screenshots

Answer

Looking at the average response time of all endpoints

Answer

Running Lighthouse on a developer's laptop

Question 29

The site's mean LCP is 1.8s and the team is happy, but conversion is low in emerging markets. What's the right analysis?

Accepted Answer

Examine p75 and p95 segmented by country, device and network, since the mean hides the tail

Answer

The mean is sufficient; the problem is marketing

Answer

Keep only desktop users' data

Answer

Remove outliers so the chart looks clean

Question 30

How do you define a meaningful SLO for a frontend app?

Accepted Answer

Around critical user journeys, e.g. 99.5% of checkouts error-free and p75 INP under 200ms, with an error budget

Answer

Static server uptime alone is enough

Answer

The number of tested lines of code

Answer

The number of deploys per week

Question 31

The "personal recommendations" service on the product page sometimes times out at 10s and blocks the whole page. What's a resilient design?

Accepted Answer

Isolate the non-critical dependency with a short timeout and circuit breaker, falling back (e.g. bestsellers) on failure

Answer

Hold the page until every service responds so data is complete

Answer

Increase the timeout to 30s

Answer

Retry 5 times in a row on every failure

Question 32

Feature flags are fetched by a client SDK after page load. Which two main problems arise?

Accepted Answer

Flicker/CLS when UI changes after flags arrive, and leaking unreleased feature names or code in the bundle

Answer

Database growth and slow DNS

Answer

Disabled HTTP caching and broken CORS

Answer

No rollback ability and no need for testing

Question 33

The growth team wants an A/B test on a high-traffic landing page with no flicker and without losing CDN caching. What's a good design?

Accepted Answer

Assign a bucket at the edge with a sticky cookie and cache each variant under a bounded key

Answer

A client-side A/B script that mutates the DOM after render

Answer

Uncached SSR for every request

Answer

Hiding the whole page until the A/B script runs

Question 34

A design system must support 5 brands with light and dark themes without forking components. What's the right architecture?

Accepted Answer

Layered tokens (primitive → semantic → component) applied via CSS custom properties at runtime

Answer

Copying components per brand into separate packages

Answer

Hardcoded colors with `if (brand === ...)` checks in every component

Answer

A separate full app build per brand and theme combination

Question 35

A multilingual site detects locale only from `Accept-Language` and serves all languages on one URL. What problems does this cause?

Accepted Answer

CDN caching and search indexing break; put the locale in the path (`/fa/...`) with `hreflang`

Answer

No problem; it's the best SEO practice

Answer

It only slows down DNS

Answer

Browsers don't send `Accept-Language`

Question 36

How do you catch i18n issues (hardcoded text, truncated long strings, RTL) at scale before real translations arrive?

Accepted Answer

Pseudo-localization in CI and staging: elongated accented strings and a test RTL locale

Answer

Waiting for user reports after release

Answer

Machine-translating the whole app at runtime

Answer

Limiting every string to 10 characters

Question 37

In a large SPA, screen reader users don't notice page changes after client-side navigation. What's a router-level systemic fix?

Accepted Answer

After each route change, move focus to the `<h1>` and announce the title via a live region

Answer

Adding `tabindex="1"` to every link

Answer

Playing a beep after every navigation

Answer

Turning every link into a full page reload

Question 38

In an org with 20 teams, each builds its own combobox and modal, and an accessibility audit found dozens of repeated bugs. What scales?

Accepted Answer

Shared headless primitives that implement WAI-ARIA patterns, focus and keyboard handling correctly once

Answer

Sending each team a WCAG checklist and hoping they follow it

Answer

Automatically adding `aria-label` to every element

Answer

Banning complex interactive components

Question 39

One large `vendor.js` holds every dependency, so updating one small library forces users to redownload 900KB. What's a better strategy?

Accepted Answer

Granular chunking: split dependencies into stable, usage-based shared chunks with content hashes

Answer

Merge all app and vendor code into a single file

Answer

Split into thousands of tiny files, one per module

Answer

Disable hashes in filenames

Question 40

Processing a 200MB file moved to a Web Worker, but the main thread still freezes during `postMessage`. Cause and fix?

Accepted Answer

Structured clone copies the data; send the `ArrayBuffer` as a transferable to move ownership without copying

Answer

Web Workers always run on the main thread

Answer

Convert the data to a JSON string first to make it faster

Answer

Increase the number of workers to 100

Question 41

A monitoring dashboard stays open for days on NOC screens and the tab crashes after 2 days. What's the diagnosis and prevention approach?

Accepted Answer

Compare heap snapshots to find detached DOM, uncleaned listeners and subscriptions, and cap data buffers

Answer

Add more RAM to the display machines

Answer

Disable the garbage collector

Answer

Turn every chart into a static image

Question 42

After a brief API outage, millions of clients retry at once and knock the service down again as it recovers. What should clients implement?

Accepted Answer

Exponential backoff with full jitter, a bounded retry budget, and honoring `Retry-After`

Answer

Retry at a fixed 5-second interval for everyone

Answer

Unlimited retries until success

Answer

Clearing cache and fully reloading on every error

Question 43

A public GraphQL API is abused with deep, expensive queries, and CDN caching fails because requests are POSTs. What solves both?

Accepted Answer

Persisted queries (hash allowlist) sent via `GET` with a query ID and cached at the CDN

Answer

Raising the GraphQL server timeout

Answer

Converting every query into a mutation

Answer

Disabling introspection alone

Question 44

Many old web and mobile app versions remain in users' hands. What contract lets the API evolve without breaking clients?

Accepted Answer

Additive-only server changes and tolerant-reader clients that ignore unknown fields and enum values

Answer

Renaming fields every release for cleaner code

Answer

Strict validation that crashes the client on any extra field

Answer

Removing old endpoints immediately after each release

Question 45

A buggy Service Worker was deployed that serves everything from an old cache, so users never see updates. How do you recover?

Accepted Answer

Publish a no-op SW at the same URL that clears caches and unregisters itself; the SW script must never be long-cached

Answer

Renaming the SW file to `sw-v2.js` is enough

Answer

Ask users to clear their browser cache manually

Answer

Change the site's domain

Question 46

Users upload 5GB videos over unstable mobile networks, and uploads go through the app server. What's a better design?

Accepted Answer

Direct upload to object storage with presigned URLs and multipart/resumable chunks

Answer

Raising the app server timeout to 2 hours

Answer

Base64-encoding the file and sending it in one JSON request

Answer

Restricting uploads to Wi-Fi

Question 47

The team wants to prerender pages with the Speculation Rules API for instant navigation. What's the key trade-off?

Accepted Answer

Resource and server cost for pages that may never open, plus analytics or side effects firing early

Answer

Prerendering worsens the destination page's LCP

Answer

This API only works for cross-origin pages

Answer

Prerendering requires a Service Worker

Question 48

Why are immutable, atomic deploys (each build with its own URL and assets, switching a production pointer) valuable for large-scale frontends?

Accepted Answer

Instant rollback by moving the pointer back, and no half-deployed state with mixed assets

Answer

Completely removing the need for testing and QA

Answer

Reducing the JavaScript sent to users

Answer

Allowing direct edits to files on production servers

Question 49

The frontend's origin lives in one region, and that region's outage takes the whole site down. What's the cheapest effective step to raise availability?

Accepted Answer

CDN origin failover to a second region or bucket, serving stale content with `stale-if-error`

Answer

Upsizing the server in the same region

Answer

Adding more client retries

Answer

Lowering every file's TTL to zero

Question 50

The bundle analyzer shows three versions of a date library and two lodash variants in the bundle. Root cause and durable fix?

Accepted Answer

Incompatible version ranges in transitive deps; dedupe via overrides/resolutions and a duplicate check in CI

Answer

The minifier is at fault and must be replaced

Answer

Tree-shaking automatically merges duplicate versions

Answer

Move every dependency into `devDependencies`

Frontend System Design · Senior · 50

For a scalable infinite scroll, what matters?