Email Client System
System design for email client with mailbox syncing, UI, and composer
Design an email client (Gmail, Outlook) with mailbox syncing, UI, and email composer.
R - Requirements
Key Questions:
- How many emails? (thousands, millions per user)
- Real-time sync? (yes, IMAP push or polling)
- Offline support? (yes, read emails offline)
- Search? (yes, full-text search)
- Threading? (yes, conversation view)
Common Answers:
- Millions of emails per user
- Real-time sync (IMAP push or polling)
- Offline support
- Full-text search
- Conversation threading
A - Architecture
Email Sync Flow:
Email Client Architecture:
Architecture Decisions:
- Client-side for UI (SPA) - Fast interactions, offline support
- IMAP/Exchange for email sync - Standard protocol, incremental sync
- IndexedDB for offline storage - Store millions of emails, fast queries
- Virtual scrolling for email list - Only render visible emails
Relevant Content:
- Virtualized List - Email list
- Offline-First Architecture - Offline support
D - Data Model
Talking Points:
- Mailbox syncing - IMAP/Exchange sync, incremental sync
- Mailbox UI - List view, conversation view, virtual scrolling
- Email composer - Rich text, attachments, drafts
State Management:
- Email metadata (normalized cache)
- Folder/label state
- Search state
- Draft state (localStorage/IndexedDB)
Caching:
- Email cache (IndexedDB for offline)
- Search cache (recent searches)
- Draft cache (localStorage)
Relevant Content:
- Caching Patterns - Email cache
- Persistence Strategies - Offline storage
- Data Fetching Strategies - Sync patterns
I - Interface
Features:
- Email list (virtualized, infinite scroll)
- Conversation view (threaded emails)
- Email viewer (HTML rendering)
- Composer (rich text, attachments)
- Search interface (autocomplete, filters)
- Folder/label navigation
Accessibility:
- Keyboard navigation
- Screen reader support
- Focus management
Relevant Content:
- Rich Text Editor - Email composer
- Autocomplete Search - Search interface
- Accessibility Patterns - A11y requirements
O - Optimizations
Performance:
- Virtual scrolling (for large email lists)
- Incremental sync (only sync new/changed emails)
- Search optimization (debounce, cache results)
- Email rendering (sanitize HTML, lazy load images)
Offline:
- IndexedDB storage (store emails for offline)
- Background sync (sync when online)
- Draft persistence (auto-save drafts)
Relevant Content:
- Virtualized List - List optimization
- Background Sync - Offline sync
- Security Patterns - HTML sanitization
Implementation Checklist
- Email list (virtualized, infinite scroll)
- Conversation threading
- Real-time sync (IMAP push or polling)
- Incremental sync (only new/changed)
- Offline storage (IndexedDB)
- Email composer (rich text, attachments)
- Draft auto-save
- Full-text search (debounced, cached)
- Email rendering (sanitized HTML)
- Background sync (when online)
Common Pitfalls
❌ Loading all emails → Performance issues, memory problems
✅ Virtual scrolling, pagination, incremental sync
❌ No offline support → Can't read emails offline
✅ IndexedDB storage, background sync
❌ No draft persistence → Lost drafts
✅ Auto-save drafts to localStorage/IndexedDB
❌ Poor search → Slow, unresponsive
✅ Debounce search, cache results, server-side indexing