What is the RADIO framework?

RADIO structures frontend system design answers: Requirements (clarify users, scale, features), Architecture (components, rendering, state), Data model (entities and relationships), Interface (API contracts), Optimizations (performance, a11y, i18n, security, scalability).

What is the difference between a UI component and application design question?

UI component questions focus on a reusable widget (autocomplete, modal, data table) — debouncing, virtualization, keyboard nav. Application questions design full systems (news feed, chat, e-commerce) — data flow, APIs, caching, real-time sync.

When should you use virtualization?

When rendering large lists (thousands of rows) where DOM size causes performance issues. Virtualization renders only visible items — O(visible) instead of O(n) — using libraries like react-window or TanStack Virtual.

What is debouncing vs throttling?

Debouncing waits until the user stops an action (e.g. typing) before firing — ideal for search. Throttling limits how often a function runs (e.g. once per 100ms on scroll) — ideal for scroll/resize handlers.

Frontend System Design

RADIO framework, UI components, application architecture, and the patterns SDE-2 frontend interviews expect.

Module 8 · Frontend System Design

Design large-scale frontend systems: RADIO framework, UI components vs applications, rendering strategies, state management, performance, accessibility, i18n, and security.

Design large-scale frontend systems using the RADIO framework: Requirements, Architecture, Data model, Interface (API), and Optimizations — plus UI component vs application questions, rendering, state, performance, accessibility, i18n, and security.

About this module

Frontend System Design is about architecture — not just building UI. SDE-2 interviews ask you to design autocomplete, news feeds, chat apps, and explain trade-offs across performance, scalability, and accessibility.

This module covers the RADIO framework (Requirements, Architecture, Data, Interface, Optimizations), question types, rendering and caching patterns, WCAG accessibility, i18n, security, and the quick-fire answers interviewers expect.

You will practice structuring answers for autocomplete, infinite scroll feeds, real-time chat, and e-commerce flows — with explicit trade-off discussions for scalability, offline support, and API design.

The RADIO framework gives interview answers a clear shape: clarify requirements first, sketch architecture, define data models, specify API contracts, then layer optimizations for performance, accessibility, i18n, and security.

Why this matters

Frontend system design rounds appear at every major tech company for SDE-2 roles. You must structure answers with RADIO, pick the right rendering and caching strategy, and discuss accessibility, i18n, and security trade-offs — not just draw boxes. Strong candidates clarify requirements first and justify every architectural choice.

Key topics covered

RADIO Framework
UI Component Design
Application Design
Rendering Strategies
State Management
Performance Optimization
Data Fetching
Accessibility
Internationalization
Security
Virtualization
Debouncing and Throttling

Where you'll use it

Designing a news feed with infinite scroll and cursor pagination
Building an autocomplete with debouncing and request caching
Architecting a real-time chat app with WebSockets
Explaining SSR vs SSG vs CSR trade-offs for a product page
Structuring a 45-minute frontend system design interview answer

What Is Frontend System Design?

Architecture, components, performance, and scalability — not just UI.

Frontend System Design is designing the architecture, components, performance, and scalability of frontend applications. It's about how to build large-scale systems — not just implementing UI.

•UI component design — compressible, reusable widgets
•Application architecture — monolith vs micro-frontends
•Performance — rendering, caching, lazy loading
•Scalability — millions of users, CDN, edge
•Accessibility — WCAG standards
•Internationalization — i18n, multi-language, RTL
•Security — XSS, CSRF, auth
•User experience — UX patterns, animations

The RADIO Framework

Structure every system design answer with this interview framework.

Requirements Exploration

•Who are the users? (end-users, admins, guests)
•What features are needed? (core vs optional)
•What's the scale? (100 users vs 10M users)
•Performance target? (< 1s load, < 100ms interaction)
•Budget and constraints?

Architecture / High-Level Design

Application Architecture
├─ Frontend Framework (React, Vue, Angular)
├─ State Management (Redux, Zustand, Context)
├─ Rendering Strategy (SSR, SSG, CSR, ISR)
├─ API Layer (REST, GraphQL, tRPC)
├─ Data Caching (Redis, React Query, SWR)
└─ Deployment (CDN, Edge, Server)

Data Model

// Example: News Feed
type User = {
  id: string;
  name: string;
  avatar: string;
};

type Post = {
  id: string;
  userId: string;
  content: string;
  timestamp: Date;
  likes: number;
};

type Feed = {
  posts: Post[];
  hasNextPage: boolean;
  cursor: string;
};

Interface Definition (API)

// News Feed API
GET  /api/posts?cursor={cursor}
  → { posts: Post[], cursor: string, hasNextPage: boolean }

POST /api/posts
  → { id: string, content: string }

PUT  /api/posts/{id}
  → { id: string, content: string }

Optimizations and Deep Dive

•Performance — rendering, caching, code splitting
•Accessibility — ARIA labels, keyboard navigation
•Internationalization — i18n, RTL support
•Security — XSS prevention, auth tokens
•Scalability — CDN, edge caching, pagination

Interview tip

Always start with Requirements. Interviewers want to see you ask clarifying questions before jumping to architecture.

Types of Frontend System Design Questions

UI components vs full applications — know both.

Type 1 — UI Components

Component	Difficulty	Key Concepts
Autocomplete	Medium	Debouncing, caching, virtualization
Image Carousel	Medium	Accessibility, lazy loading, swipe
Dropdown Menu	Medium	Keyboard nav, focus management
Modal Dialog	Medium	ARIA, Esc key, focus trap
Rich Text Editor	Hard	Toolbar, undo/redo, formatting APIs
Data Table	Hard	Virtualization, pagination, sorting
Collaborative Editor	Hard	Real-time sync, conflict resolution

Type 2 — Applications

Application	Difficulty	Key Concepts
News Feed (Facebook)	Medium	Infinite scroll, pagination, caching
E-commerce (Amazon)	Hard	Search, filters, cart, checkout
Chat App (Messenger)	Hard	WebSockets, real-time, offline
Photo Sharing (Instagram)	Medium	Image upload, compression, CDN
Pinterest	Medium	Masonry layout, infinite scroll
Video Streaming (Netflix)	Hard	Buffering, adaptive bitrate, CDN
Travel Booking (Airbnb)	Hard	Maps, search filters, booking flow
Video Conferencing (Zoom)	Hard	WebRTC, low latency, screenshare
Music Streaming (Spotify)	Hard	Persistent playback, queueing, offline
Collaborative Spreadsheet	Hard	Real-time sync, conflict resolution

Rendering Strategies

Pick the right strategy for content freshness vs performance.

Strategy	When	Use Case	Performance
SSR	Per request	Dynamic, user-specific content	Medium
SSG	Build time	Docs, blogs, marketing pages	Fastest
CSR	Browser	Highly interactive apps	Slowest initial load
ISR	Build + rebuild	Product pages, news	Fast + fresh
Streaming	Progressive	Large pages, slow components	Progressive

State Management

Match the tool to app complexity and data-fetching needs.

Library	Type	Use Case	Pros	Cons
Redux	Centralized	Complex apps	Predictable, dev tools	Boilerplate
Zustand	Centralized	Simple global state	Minimal API	Less structured
Context	Local	Theme, auth	Built-in	Re-renders all consumers
React Query	API cache	Server data	Caching, deduping	External lib
Jotai	Atomic	Fine-grained state	Minimal, atomic	Less known

Performance Optimization

Rendering, caching, lazy loading, and input throttling.

1. Virtualization

import { FixedSizeList } from "react-window";

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
>
  {({ index }) => <Item index={index} />}
</FixedSizeList>

Renders only visible items — O(visible) vs O(n). Essential for large lists and data tables.

2. API Caching (React Query)

const { data } = useQuery({
  queryKey: ["posts"],
  queryFn: fetchPosts,
  staleTime: 5 * 60 * 1000,   // 5 minutes
  gcTime: 30 * 60 * 1000,     // 30 minutes
});

Dedupes requests, background refetch, offline support.

3. Lazy Loading & Code Splitting

const HeavyComponent = lazy(() => import("./HeavyComponent"));

const routes = [
  { path: "/home", component: lazy(() => import("./Home")) },
];

import(/* webpackChunkName: "admin" */ "./Admin");

Reduces initial bundle size by loading routes and components on demand.

4. Debouncing & Throttling

// Debounce — wait for user to stop typing
const debouncedSearch = debounce((query: string) => {
  fetch(`/api/search?q=${query}`);
}, 300);

// Throttle — limit to once per interval
const throttledScroll = throttle(() => {
  console.log("Scrolling");
}, 1000);

Pattern	Behavior	Use Case
Debounce	Wait until action stops	Search input, resize
Throttle	Limit call frequency	Scroll, mousemove

Data Fetching Patterns

REST, GraphQL, WebSockets — pick by data shape and real-time needs.

Pattern	Use Case	When to Use
REST	Simple CRUD APIs	Standard resource endpoints
GraphQL	Flexible queries	Reduce over-fetching, complex graphs
tRPC	TypeScript end-to-end	Type-safe full-stack TS apps
WebSockets	Real-time bidirectional	Chat, live updates, games
SSE (Server Push)	Server → client events	Notifications, progress

Pagination

Cursor-based pagination is more efficient than offset for large datasets — offset skips rows (slow at scale), cursor uses an indexed bookmark.

Accessibility (WCAG)

Perceivable, Operable, Understandable, Robust.

•Perceivable — text alternatives, color contrast
•Operable — keyboard navigation, focus management
•Understandable — clear labels, error messages
•Robust — compatible with assistive technology

// ARIA labels
<button aria-label="Close modal">✕</button>

// Dialog semantics
<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Modal Title</h2>
</div>

// Focus trap in modals — Tab cycles within dialog
// Return focus to trigger on close

Internationalization (i18n)

Locale, pluralization, RTL, and formatting.

•Locale detection — browser language vs user preference
•Pluralization — "1 item" vs "2 items"
•RTL support — Arabic, Hebrew layouts
•Date/time formatting — local timezone
•Currency formatting — local currency symbols

import { useTranslation } from "react-i18next";

const { t } = useTranslation();
t("welcome", { name: "John" }); // "Welcome, John"

Security

XSS, CSRF, auth, and secure data handling.

Threat	Prevention
XSS	Sanitize inputs, avoid dangerouslySetInnerHTML, CSP headers
CSRF	CSRF tokens, SameSite cookies, CORS
Auth	JWT, OAuth, secure session tokens, httpOnly cookies
Sensitive data	Encrypt, never store tokens in localStorage
Headers	HSTS, Content-Security-Policy, X-Frame-Options

Quick-Fire Reference

15 answers to memorize for rapid interview rounds.

#	Question	Answer
1	Frontend System Design?	Architecture, components, performance, scalability
2	RADIO framework?	Requirements, Architecture, Data, Interface, Optimizations
3	Component vs Application?	Component = widget; App = full system
4	Virtualization purpose?	Render only visible items (O(visible) vs O(n))
5	Debounce vs Throttle?	Debounce = wait for stop; Throttle = limit frequency
6	SSR vs SSG vs CSR?	SSR = per request; SSG = build; CSR = browser
7	React Query purpose?	API caching, deduping, background updates
8	WCAG?	Perceivable, Operable, Understandable, Robust
9	XSS prevention?	Sanitize inputs, avoid dangerouslySetInnerHTML
10	WebSockets?	Real-time bidirectional (chat, live updates)
11	GraphQL vs REST?	GraphQL = flexible queries; REST = simple CRUD
12	i18n concepts?	Locale, pluralization, RTL, currency
13	Lazy loading?	Reduce initial bundle size
14	Cursor vs Offset?	Cursor = efficient; Offset = slow at scale
15	CDN purpose?	Global distribution, faster static assets

Key Interview Takeaways

Ten points to structure any frontend system design answer.

•RADIO Framework — Requirements, Architecture, Data, Interface, Optimizations
•Virtualization — render only visible items for large lists
•Debounce — wait for stop; Throttle — limit frequency
•React Query — API caching, deduping, offline support
•SSR = per request, SSG = build time, CSR = browser
•Accessibility — WCAG: Perceivable, Operable, Understandable, Robust
•WebSockets — real-time chat and live updates
•GraphQL — flexible queries; REST — simple CRUD
•i18n — locale, pluralization, RTL, currency formatting
•CDN — global distribution for faster static assets

Frequently Asked Questions

Common interview questions about frontend system design.

Application Architecture ├─ Frontend Framework (React, Vue, Angular) ├─ State Management (Redux, Zustand, Context) ├─ Rendering Strategy (SSR, SSG, CSR, ISR) ├─ API Layer (REST, GraphQL, tRPC) ├─ Data Caching (Redis, React Query, SWR) └─ Deployment (CDN, Edge, Server)

// Example: News Feed type User = { id: string; name: string; avatar: string; }; type Post = { id: string; userId: string; content: string; timestamp: Date; likes: number; }; type Feed = { posts: Post[]; hasNextPage: boolean; cursor: string; };

// News Feed API GET /api/posts?cursor={cursor} → { posts: Post[], cursor: string, hasNextPage: boolean } POST /api/posts → { id: string, content: string } PUT /api/posts/{id} → { id: string, content: string }

Component

Difficulty

Key Concepts

Autocomplete

Medium

Debouncing, caching, virtualization

Image Carousel

Medium

Accessibility, lazy loading, swipe

Dropdown Menu

Medium

Keyboard nav, focus management

Modal Dialog

Medium

ARIA, Esc key, focus trap

Rich Text Editor

Hard

Toolbar, undo/redo, formatting APIs

Data Table

Hard

Virtualization, pagination, sorting

Collaborative Editor

Hard

Real-time sync, conflict resolution

Application

Difficulty

Key Concepts

News Feed (Facebook)

Medium

Infinite scroll, pagination, caching

E-commerce (Amazon)

Hard

Search, filters, cart, checkout

Chat App (Messenger)

Hard

WebSockets, real-time, offline

Photo Sharing (Instagram)

Medium

Image upload, compression, CDN

Medium

Masonry layout, infinite scroll

Video Streaming (Netflix)

Hard

Buffering, adaptive bitrate, CDN

Travel Booking (Airbnb)

Hard

Maps, search filters, booking flow

Video Conferencing (Zoom)

Hard

WebRTC, low latency, screenshare

Music Streaming (Spotify)

Hard

Persistent playback, queueing, offline

Collaborative Spreadsheet

Hard

Real-time sync, conflict resolution

Strategy

When

Use Case

Performance

SSR

Per request

Dynamic, user-specific content

Medium

SSG

Build time

Docs, blogs, marketing pages

Fastest

CSR

Browser

Highly interactive apps

Slowest initial load

ISR

Build + rebuild

Product pages, news

Fast + fresh

Streaming

Progressive

Large pages, slow components

Progressive

Library

Type

Use Case

Pros

Cons

Redux

Centralized

Complex apps

Predictable, dev tools

Boilerplate

Zustand

Centralized

Simple global state

Minimal API

Less structured

Context

Local

Theme, auth

Built-in

Re-renders all consumers

React Query

API cache

Server data

Caching, deduping

External lib

Jotai

Atomic

Fine-grained state

Minimal, atomic

Less known

// Debounce — wait for user to stop typing const debouncedSearch = debounce((query: string) => { fetch(`/api/search?q=${query}`); }, 300); // Throttle — limit to once per interval const throttledScroll = throttle(() => { console.log("Scrolling"); }, 1000);

Pattern

Behavior

Use Case

Debounce

Wait until action stops

Search input, resize

Throttle

Limit call frequency

Scroll, mousemove

Pattern

Use Case

When to Use

REST

Simple CRUD APIs

Standard resource endpoints

GraphQL

Flexible queries

Reduce over-fetching, complex graphs

tRPC

TypeScript end-to-end

Type-safe full-stack TS apps

WebSockets

Real-time bidirectional

Chat, live updates, games

SSE (Server Push)

Server → client events

Notifications, progress

// ARIA labels <button aria-label="Close modal">✕</button> // Dialog semantics <div role="dialog" aria-modal="true" aria-labelledby="title"> <h2 id="title">Modal Title</h2> </div> // Focus trap in modals — Tab cycles within dialog // Return focus to trigger on close

Threat

Prevention

XSS

Sanitize inputs, avoid dangerouslySetInnerHTML, CSP headers

CSRF

CSRF tokens, SameSite cookies, CORS

Auth

JWT, OAuth, secure session tokens, httpOnly cookies

Sensitive data

Encrypt, never store tokens in localStorage

Headers

HSTS, Content-Security-Policy, X-Frame-Options

Question

Answer

Frontend System Design?

Architecture, components, performance, scalability

RADIO framework?

Requirements, Architecture, Data, Interface, Optimizations

Component vs Application?

Component = widget; App = full system

Virtualization purpose?

Render only visible items (O(visible) vs O(n))

Debounce vs Throttle?

Debounce = wait for stop; Throttle = limit frequency

SSR vs SSG vs CSR?

SSR = per request; SSG = build; CSR = browser

React Query purpose?

API caching, deduping, background updates

WCAG?

Perceivable, Operable, Understandable, Robust

XSS prevention?

Sanitize inputs, avoid dangerouslySetInnerHTML

WebSockets?

Real-time bidirectional (chat, live updates)

GraphQL vs REST?

GraphQL = flexible queries; REST = simple CRUD

i18n concepts?

Locale, pluralization, RTL, currency

Lazy loading?

Reduce initial bundle size

Cursor vs Offset?

Cursor = efficient; Offset = slow at scale

CDN purpose?

Global distribution, faster static assets

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Is Frontend System Design?

The RADIO Framework

Types of Frontend System Design Questions

Rendering Strategies

State Management

Performance Optimization

Data Fetching Patterns

Accessibility (WCAG)

Internationalization (i18n)

Security

Quick-Fire Reference

Key Interview Takeaways

Frequently Asked Questions

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Is Frontend System Design?

The RADIO Framework

Types of Frontend System Design Questions

Rendering Strategies

State Management

Performance Optimization

Data Fetching Patterns

Accessibility (WCAG)

Internationalization (i18n)

Security

Quick-Fire Reference

Key Interview Takeaways

Frequently Asked Questions