abanoub-ashraf/mobile-system-design

Mobile System Design

Mobile system design is fundamentally different from backend system design. While backend focuses on horizontal scaling, mobile design emphasizes constraints: battery, network, storage, and user experience under unreliable conditions.

When to Use This Skill

• Preparing for mobile system design interviews
• Architecting a complex iOS application
• Designing offline-first features
• Planning sync strategies between device and server

The Mobile System Design Framework

1. Clarify Requirements (5 minutes)

Functional Requirements

• What are the core features?
• What data needs to persist offline?

Non-Functional Requirements

• Expected number of users?
• Data freshness requirements?
• Offline capability needs?

Constraints

• Network: 3G? Spotty WiFi? Airplane mode?
• Storage: How much local data?
• Security: Sensitive data handling?

2. High-Level Architecture (10 minutes)

┌─────────────────────────────────────────────────────────────┐
│                        iOS App                               │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │     UI      │  │   Business  │  │    Data Layer       │  │
│  │   Layer     │←→│    Logic    │←→│ (Repository Pattern)│  │
│  │  (SwiftUI)  │  │  (ViewModels│  │                     │  │
│  └─────────────┘  └─────────────┘  └──────────┬──────────┘  │
│                                                │             │
│                    ┌───────────────────────────┼───────────┐ │
│                    │                           │           │ │
│               ┌────▼────┐                ┌─────▼─────┐     │ │
│               │  Local  │                │  Remote   │     │ │
│               │  Cache  │                │   API     │     │ │
│               │(SwiftData│                │ (Network) │     │ │
│               └────┬────┘                └─────┬─────┘     │ │
│                    │                           │           │ │
│                    └─────────────┬─────────────┘           │ │
│                                  │                         │ │
│                           ┌──────▼──────┐                  │ │
│                           │  Sync Engine│                  │ │
│                           └─────────────┘                  │ │
└─────────────────────────────────────────────────────────────┘

3. Sync Strategies

Strategy 1: Last Write Wins

struct SyncableEntity {
    let id: UUID
    var data: Data
    var updatedAt: Date
    var syncStatus: SyncStatus
}

enum SyncStatus {
    case synced
    case pendingUpload
    case conflict
}

Strategy 2: Optimistic Updates

class OptimisticSyncEngine {
    func createPost(_ post: Post) async throws -> Post {
        // 1. Save locally with pending status
        let localPost = post.with(syncStatus: .pendingUpload)
        try await localStorage.save(localPost)

        // 2. Notify UI immediately (optimistic)
        NotificationCenter.default.post(name: .postCreated, object: localPost)

        // 3. Sync to server
        do {
            let serverPost = try await api.createPost(post)
            try await localStorage.update(localPost.id, with: serverPost)
            return serverPost
        } catch {
            try await localStorage.markAsFailed(localPost.id)
            throw error
        }
    }
}

Common System Design Questions

Design: Instagram/Twitter Feed

Key Components:

1. Feed Loading: Pagination with cursor-based scrolling
2. Image Caching: Multi-layer cache (memory → disk → network)
3. Offline Support: Cache N most recent posts
4. Real-time Updates: WebSocket for new posts

Image Loading Pipeline:

Request Image URL
        │
        ▼
┌───────────────────┐
│   Memory Cache    │ ─── Hit ──→ Return UIImage
│   (NSCache)       │
└────────┬──────────┘
         │ Miss
         ▼
┌───────────────────┐
│    Disk Cache     │ ─── Hit ──→ Decode → Memory Cache → Return
│   (FileManager)   │
└────────┬──────────┘
         │ Miss
         ▼
┌───────────────────┐
│     Network       │ ─── Download → Decode → Both Caches → Return
└───────────────────┘

Design: Uber/Lyft Ride-Hailing

Key Challenges:

• Real-time location tracking
• Map rendering performance
• Battery optimization

Location Tracking:

class LocationManager {
    func startTracking(mode: TrackingMode) {
        switch mode {
        case .searching:
            // High accuracy, frequent updates
            locationManager.desiredAccuracy = kCLLocationAccuracyBest
            locationManager.distanceFilter = 10

        case .inRide:
            // High accuracy for fare calculation
            locationManager.desiredAccuracy = kCLLocationAccuracyBestForNavigation

        case .background:
            // Significant location changes only (battery saving)
            locationManager.startMonitoringSignificantLocationChanges()
        }
    }
}

Design: WhatsApp/Messaging

Key Challenges:

• End-to-end encryption
• Message delivery guarantees
• Offline message queue

Message State Machine:

┌─────────┐    Send    ┌─────────┐   Server   ┌───────────┐
│ Pending │ ─────────→ │  Sent   │ ─────────→ │ Delivered │
└─────────┘            └─────────┘            └───────────┘
     │                      │                       │
     │ Error                │ Timeout               │ Read
     ▼                      ▼                       ▼
┌─────────┐           ┌─────────┐            ┌─────────┐
│ Failed  │           │ Failed  │            │  Read   │
└─────────┘           └─────────┘            └─────────┘

Mobile-Specific Checklist

Network Layer

• [ ] Retry logic with exponential backoff
• [ ] Request deduplication
• [ ] Response caching
• [ ] Certificate pinning

Data Layer

• [ ] Local-first architecture
• [ ] Conflict resolution strategy
• [ ] Data migration strategy
• [ ] Encryption for sensitive data

Performance

• [ ] Lazy loading for lists
• [ ] Image downsampling
• [ ] Background fetch optimization
• [ ] Memory pressure handling

User Experience

• [ ] Optimistic UI updates
• [ ] Skeleton loading states
• [ ] Error recovery flows
• [ ] Offline mode indicators

How to Present Your Design

1. Start with requirements - Show you understand the problem
2. Draw high-level architecture - Boxes and arrows
3. Deep dive on data flow - How data moves through system
4. Address edge cases - Network failures, conflicts
5. Discuss trade-offs - Why you chose this approach

How to Use

Ask me to:

• "Design a photo-sharing app like Instagram"
• "Walk me through offline sync for a notes app"
• "How would you architect a ride-sharing app?"
• "Review my system design for a chat app"