Case Study 2 — Design WhatsApp

flowchart TB
    subgraph Clients["Clients"]
        Mobile["Mobile App"]
        Web["Web App"]
        Desktop["Desktop App"]
    end

    subgraph Gateway["Connection Layer"]
        WS["WebSocket Gateway<br/>Persistent connections"]
        HTTP["Long Poll Fallback"]
    end

    subgraph Services["Services"]
        Msg["Message Service"]
        Presence["Presence Service"]
        Group["Group Service"]
        Media["Media Service"]
        Sync["Multi-Device Sync"]
    end

    subgraph Storage["Data Layer"]
        MySQL["MySQL<br/>Users, Groups"]
        Cassandra["Cassandra<br/>Messages"]
        S3["S3 / Blob Store<br/>Media files"]
        Redis["Redis<br/>Presence, Sessions"]
    end

    Clients --> Gateway
    Gateway --> Services
    Services --> Storage

    style Clients fill:#3b82f6,color:#fff
    style Gateway fill:#7c3aed,color:#fff
    style Services fill:#059669,color:#fff
    style Storage fill:#f59e0b,color:#fff

sequenceDiagram
    participant Alice as Alice (Sender)
    participant WS as WebSocket Gateway
    participant Msg as Message Service
    participant Queue as Message Queue
    participant Storage as Message Store
    participant Bob as Bob (Receiver)

    Alice->>WS: Send encrypted message
    WS->>Msg: Route to message service

    Msg->>Storage: Save message (encrypted)
    Storage-->>Msg: Stored

    Msg->>Queue: Enqueue for delivery
    Queue->>Msg: Route to Bob's WebSocket

    alt Bob Online
        Msg->>Bob: Deliver message ⚡
        Bob-->>Msg: Delivery receipt
        Msg->>Alice: ✅ Delivered
    else Bob Offline
        Msg->>Storage: Store for push notification
        Storage-->>Msg: Wait for Bob to come online
        Note over Msg,Bob: When Bob connects, pull pending messages
    end