System Design Guide
architecthigh Relevance14 min read
Design Gmail Web Client Frontend
Architecting a fast email web client with heavy message lists, robust keyboard navigation shortcuts, local IndexedDB caches, and iframe sandboxes.
Architecture Focus:
IndexedDB Offline SyncKeyboard Shortcut EngineIframe Sandboxed Content
1. Problem Statement
Design an email web client that handles large message lists, supports keyboard navigation, and provides offline search.
2. Business Context & User Friction
Gmail requires instant email browsing and formatting. Sluggish searches or lost edits drop user productivity.
3. Requirements Matrix
Functional Requirements
- Display email lists with sorting, categorization labels, and pagination.
- Rich-text mail composer editor modal with draft auto-saving.
- Global query search bar matching folders, tags, and dates.
Non-Functional Requirements
Performance
- Typing delays under 16ms.
- Local search feedback times under 100ms.
- Low memory footprints.
Scalability
- Support local databases storing thousands of emails offline.
- Virtualize email scrolling list.
Accessibility (a11y)
- Comprehensive ARIA landmarks for screen readers.
- Fully accessible keyboard shortcuts guide overlay.
Security
- Render untrusted email body text safely in sandboxed iframe blocks.
- Sanitize email attachments downloads.
Reliability & Failover
- Auto-save drafts locally during internet outages.
- Offline search support.
Observability
- Track search execution durations.
- Log draft save failures.
4. Core User Flows
Reading and replying to email
- User enters inbox, rendering virtual mail list.
- User navigates using keyboard 'j' and 'k' keys.
- User presses Enter, loading email body inside sandbox iframe.
- User clicks 'r' to reply, mounting draft editor modal.
5. High-Level Design & Layers
The web app structures mail states in IndexedDB for offline access, syncing changes with the server via REST APIs and wrapping email bodies in sandbox iframe blocks.
Frontend Layers
- UI Layer: MailSidebar, EmailVirtualList, EditorModal, SandboxedViewer.
- State Layer: Local state stores cursor focus, React Query tracks API sync.
- Storage Layer: IndexedDB mail database cache.
Major Components
- EmailVirtualList: Recycles email rows, handling keyboard focus indices.
- SandboxedViewer: Renders untrusted HTML inside a secure sandbox iframe.
Data Flow Pipelines
- 1. Email selection triggers local lookup.
- 2. SandboxedViewer binds srcdoc variables.
- 3. EditorComposer saving updates drafts states.
- 4. Sync manager pushes updates to backend.
6. Component Architecture & State Boundaries
| Component | Responsibility | State Owned | Dependencies |
|---|---|---|---|
| MailAppLayout | Coordinates sidebars, search inputs, virtual lists, and sandboxes. | Inbox categories list, current email | EmailVirtualList, SandboxedViewer |
7. State Management
Local UI State
- Composer editor formats
- Keyboard focus indexes
Server Query Cache State
- Category filters info
- Drafts sync indicators
Global/Shared State
- Active email ID details
- User preference configurations
Real-Time & Sync State
- No high-frequency real-time push state required.
8. API Contracts Design
GET/api/v1/emails?folder=inbox&cursor=x
Get Emails ListPurpose: Download paginated emails list.
Sample Response:
{
"emails": [
{
"id": "e1",
"subject": "Meeting",
"from": "boss"
}
]
}9. Caching Strategy
Browser/HTTP Cache
- IndexedDB caches email history.
- Service Worker caches application assets.
Edge CDN Caching
- Edge cache static shell assets.
Application Cache
- Cache category configurations in memory.
Invalidation Policies
- Clear email cache on email delete updates.
10. System Strategies Checklist
Performance Strategy & Budgets
- Virtualize email scroll lists.
- Defer rich editor composer loading scripts.
- Process offline searches inside Web Workers.
Inclusive Accessibility Design
- Provide ARIA announcements on email delivery confirmation.
- Keyboard shortcut overrides documentation overlays.
Security Safeguards & Risks
- Sandbox iframe borders preventing parent script access.
- Validate mail content parses.
Telemetry & Production Observability
- Log local search response latencies.
- Track draft autosave dropouts.
Graceful Failure & Resilience
- Save drafts to IndexedDB during network loss.
- Retry send operations once network is confirmed.
Deployment, Rollout & CDN topologies
- PWA layout deploying on CDN grids.
11. Architectural Decisions & Tradeoffs
Decision: Sandbox iframe renders vs direct HTML injection
Benefit:
Prevents XSS scripts inside email body from accessing parent cookies.
Drawback:
Requires messaging APIs to coordinate height adjustments.
When To Use: When rendering third-party untrusted HTML.
12. Interview Answer Framework
How to structure your defense of this architecture during a 45-minute technical system design session:
1. Opening Pitch
Start by explaining security limits. Highlight why rendering untrusted HTML inside sandboxed iframe containers is critical for email clients.
2. Requirement Clarification Queries
- Do we need support for offline query searches?
- Should we implement keyboard shortcuts navigation?
3. Core High-Level Architecture Block
Propose a MailAppLayout connecting virtual lists, SandboxedViewers, and IndexedDB sync gateways.
4. Strategic Deep Dive Areas
- Explain iframe sandboxing parameters (sandbox='allow-scripts').
- Detail keyboard listener shortcuts engines.
5. Summary & Defensive Tradeoffs
Conclude by evaluating performance optimizations (IndexedDB query indexations).
13. Common Pitfalls & Extension Questions
Candidate Mistakes to Avoid
- Injecting raw email HTML directly using dangerouslySetInnerHTML, enabling XSS.
- Blocking page renders while heavy local history caches load.
Interviewer Follow-ups / Extensions
- How do you design a local database indexing engine for fast offline searches?
- How do you handle attachments file downloads safely?