Design Mobile News Feed with Offline-First Architecture

1. Problem Statement & Scope

System Mission

Design a state-of-the-art, offline-first mobile news feed client and backend synchronization architecture delivering instantaneous ($< 16\text{ ms}$) feed rendering from local persistent cache, robust background delta synchronization via GraphQL/Protobuf, optimistic mutation pipelines with deterministic rollback, and intelligent battery/network-aware media prefetching.

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

Functional Requirements

1. Zero-Latency Feed Rendering: Cold launch renders cached feed items from local SQLite storage instantly without waiting for network I/O.
2. Bidirectional Delta Synchronization: Exchange only mutated/new posts since the client's last synchronized cursor/timestamp, including soft-deleted tombstone records.
3. Optimistic Local Mutations: Post creations, likes, comments, and bookmark actions immediately update local SQLite and UI state; mutations queue in a durable local write-ahead log for background replay.
4. Adaptive Media Prefetching: Prefetch high-resolution images/videos on unmetered high-speed WiFi; restrict prefetching to low-resolution WebP/AVIF thumbnails on cellular metered connections.
5. Conflict Resolution & Monotonic Versioning: Resolve server-client data collisions deterministically using version vectors and monotonic entity timestamps.

Non-Functional Requirements (SLAs/SLOs)

• App Cold Start Time-To-Content (TTC): $< 50\text{ ms}$ read latency from local SQLite ($P99$).
• UI Smoothness & Frame Rate: 120 FPS ($8.33\text{ ms}$ frame budget) on modern 120Hz ProMotion/LTPO displays; zero main-thread database or network disk I/O.
• Bandwidth Consumption: Delta sync payloads $\le 5\text{ KB}$ per poll ($> 90\%$ compression vs full JSON payload).
• Battery & Thermal Budget: Minimized background wakeups utilizing WorkManager / BGAppRefreshTask; zero battery drain while app is suspended.
• Offline Durability: Local mutation queue survives app crashes, OS process kills, and device reboots.

Out-of-Scope

• Peer-to-peer (P2P) mesh feed distribution (e.g. Bluetooth LE mesh feed sharing).
• Live real-time video stream broadcasting (covered in YouTube / Live Streaming blueprints).

2. Capacity & Scale Estimation

Device & Traffic Scale

• Mobile Active Installs: $200\text{ Million}$ devices ($50\text{ Million}$ DAU).
• Daily Feed Refreshes: Average $20\text{ syncs/user/day} \implies \mathbf{1\text{ Billion Delta Syncs/Day}}$. $\text{Average Sync QPS} = \frac{10^9}{86,400 \text{ s}} \approx 11,574 \text{ syncs/sec (Peak: } 35,000\text{ syncs/sec)}$

Bandwidth & Storage Calculations

• Full Feed Payload vs Delta Sync Payload:
  • Full Feed Page (20 posts with author metadata): $\approx 60\text{ KB}$.
  • Delta Sync Payload (Protobuf delta with cursor): $\approx 4\text{ KB}$ ($93.3\%$ cellular data savings). $\text{Daily Ingestion Network Egress (Delta)} = 10^9 \times 4\text{ KB} = 4\text{ TB/day} \approx \mathbf{370\text{ Mbps (Peak: } 1.1\text{ Gbps)}}$
• Mobile Local Storage Budget:
  • Store max 500 cached posts in local SQLite: $500 \times 2\text{ KB} = 1\text{ MB}$.
  • Local image/thumbnail LRU disk cache: $\mathbf{150\text{ MB capped limit}}$.

3. High-Level Architecture & AWS Component Mapping

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

Component Responsibility Breakdown

4. API Interface Design & Wire Protocols

1. GraphQL Delta Sync Query

graphqlCopy
query SyncFeedTimeline($lastSyncCursor: AWSTimestamp!, $limit: Int!) {
  syncFeedPosts(lastSync: $lastSyncCursor, limit: $limit) {
    items {
      id
      authorId
      authorName
      content
      mediaUrl
      likesCount
      commentsCount
      userHasLiked
      version
      _deleted
      updatedAt
    }
    nextToken
    newSyncCursor
    serverTimestamp
  }
}

2. Optimistic Like Mutation

graphqlCopy
mutation OptimisticLikePost($postId: ID!, $clientMutationId: String!, $version: Int!) {
  likePost(input: {
    postId: $postId
    clientMutationId: $clientMutationId
    expectedVersion: $version
  }) {
    postId
    likesCount
    userHasLiked
    version
    updatedAt
  }
}

Mutation Response: 200 OK

jsonCopy
{
  "data": {
    "likePost": {
      "postId": "post_881293a",
      "likesCount": 142,
      "userHasLiked": true,
      "version": 6,
      "updatedAt": 1718000045120
    }
  }
}

5. Data Models & Storage Architecture

Interactive Architecture Diagram
100%Fit100%
Synthesizing vector architecture diagram...

Local SQLite Schema (mobile_feed_database.db)

sqlCopy
-- Cached Feed Posts Table
CREATE TABLE local_feed_posts (
    post_id TEXT PRIMARY KEY,
    author_id TEXT NOT NULL,
    author_name TEXT NOT NULL,
    content TEXT NOT NULL,
    media_url TEXT,
    likes_count INTEGER NOT NULL DEFAULT 0,
    user_has_liked INTEGER NOT NULL DEFAULT 0, -- 0 = false, 1 = true
    server_version INTEGER NOT NULL DEFAULT 1,
    sync_status INTEGER NOT NULL DEFAULT 1,     -- 1=SYNCED, 2=OPTIMISTIC_DIRTY, 3=FAILED
    is_deleted INTEGER NOT NULL DEFAULT 0,
    updated_at INTEGER NOT NULL
);
CREATE INDEX idx_feed_sort ON local_feed_posts(updated_at DESC);

-- Durable Mutation Queue Table
CREATE TABLE local_mutation_queue (
    mutation_id TEXT PRIMARY KEY,
    post_id TEXT NOT NULL,
    action_type TEXT CHECK (action_type IN ('LIKE', 'UNLIKE', 'CREATE_POST', 'COMMENT')),
    payload_json TEXT NOT NULL,
    state TEXT CHECK (state IN ('QUEUED', 'IN_FLIGHT', 'FAILED_RETRY')),
    retry_count INTEGER NOT NULL DEFAULT 0,
    created_at INTEGER NOT NULL
);
CREATE INDEX idx_mutation_state ON local_mutation_queue(created_at ASC);