Instagram Feed and Stories, the whole design.

%% title: Feed and stories on one page: bytes, IDs, decisions
flowchart TD
  APP@{ icon: "sd:phone", label: "Android · iOS · web apps<br/>prefetch next images and first frames" } ==>|"media"| CDN@{ icon: "sd:cdn", label: "CDN<br/>right-sized images · video segments" }
  APP ==> API@{ icon: "sd:api", label: "API gateway<br/>post · feed · tray" }
  API -->|"upload"| MED["Media service<br/>original kept · 4 sizes · encodings"]:::service
  MED --> BLOB@{ icon: "sd:object-storage", label: "Blob storage<br/>content-addressed · hot → warm" }
  API -->|"create post"| POST@{ icon: "tech:postgresql", label: "PostgreSQL · posts<br/>64-bit IDs · sharded by author" }
  POST -.->|"new post"| FAN@{ icon: "sd:worker", label: "Fan-out workers<br/>push IDs · skip huge accounts" }
  FAN ==> INB@{ icon: "tech:cassandra", label: "Cassandra · inboxes<br/>newest 1,500 IDs per viewer" }
  API ==>|"open feed"| FEED["Feed service<br/>filters → light model → heavy model → rules"]:::hot
  FEED --> INB
  FEED --> FS@{ icon: "tech:redis", label: "Redis · features<br/>counts · closeness · seen" }
  APP -->|"open tray"| TRAY["Stories tray<br/>24 h index · seen set · audience"]:::core
  CDN -.-> BLOB
  class APP client
  class CDN,API edge
  class BLOB,POST,INB store
  class FAN service
  class FS cache

%% title: The feed ranking funnel for one page
flowchart TD
  C(["1,500 candidates<br/>inbox ∪ huge accounts followed"]):::client --> F1["Filters<br/>seen · blocked · muted · deleted"]:::service
  F1 --> S1["First stage · light model<br/>~0.01 ms each · 1,200 → 300"]:::core
  S1 --> S2["Second stage · multi-task model<br/>time · comment · like · share · profile tap"]:::hot
  S2 --> V["Value = weighted sum<br/>of the five predictions"]:::core
  V --> RR["Final rerank<br/>≤ 2 in a row per author · integrity · freshness"]:::core
  RR --> OUT(["Page of 10<br/>logged as impressions"]):::ok
  S2 -.->|"slow or down"| FB(["Serve first-stage order"]):::bad

%% title: A baby photo, from posting to the top of Meera's feed
sequenceDiagram
  autonumber
  participant C as Cousin's app
  participant M as Media service
  participant P as Posts shard
  participant F as Fan-out
  participant R as Feed service
  participant Me as Meera's app
  C->>M: Upload photo · 3.2 MB
  M-->>C: Keys for original + 1080 · 640 · 320 · thumb
  C->>P: Create post with media keys
  P-->>C: Time-sortable post ID
  alt author below 1M followers
    P-)F: Push ID to 420 inboxes
  else huge account
    P-)F: Recent-posts cache only · readers pull
  end
  Me->>R: Open feed · three hours later
  R->>R: Inbox ∪ huge accounts · filter · rank in stages
  R-->>Me: Page 1 · the baby photo first
  Me->>Me: Fetch the 1080 copy from the CDN

%% title: Building one stories tray
sequenceDiagram
  autonumber
  participant Me as Meera's app
  participant T as Tray service
  participant A as Active-story index
  participant S as Seen state
  Me->>T: Open app
  T->>A: Which of 600 followed accounts have stories · 90
  T->>T: Audience check · close friends only if listed
  T->>S: Which has Meera seen · 30 fully
  T-->>Me: 60 unseen first, seen ones last
  Me->>Me: Prefetch first frames of the top 3
  Me->>S: Seen-marks, batched every few seconds
  Note over A: at hour 24 the entry expires · story leaves every tray · media stays in the archive

%% title: Core entities
classDiagram
  class Post {
    +postId : int64 · 41 time · 13 shard · 10 seq
    +author : user
    +mediaKeys : list of keys
    +caption : string
    +deleted : bool · tombstone
  }
  class Media {
    +key : hash of the bytes
    +sizes : 1080 · 640 · 320 · thumb
    +tier : hot / warm
  }
  class Inbox {
    +viewer : user
    +postIds : newest 1,500
  }
  class Story {
    +storyId : int64
    +author : user
    +audience : everyone / close friends
    +expiresAt : posted + 24 h
  }
  class SeenSet {
    +viewer : user
    +storyIds : set · 48 h expiry
  }
  class Follow {
    +follower : user
    +followee : user
  }
  Post "1" --> "many" Media : shows
  Inbox "many" --> "many" Post : candidate IDs
  Story "1" --> "1" Media : shows
  SeenSet "many" --> "many" Story : marks
  Follow "many" --> "1" Inbox : fills

%% title: A story from posting to the archive
stateDiagram-v2
  [*] --> UPLOADING
  UPLOADING --> FAILED: upload not acknowledged
  UPLOADING --> ACTIVE: media stored, index entry added
  ACTIVE --> ACTIVE: viewed, seen-marks written
  ACTIVE --> HIDDEN: author deletes it
  ACTIVE --> EXPIRED: 24 hours pass, index entry lapses
  EXPIRED --> ARCHIVED: media to warm storage
  ARCHIVED --> [*]
  HIDDEN --> [*]
  FAILED --> [*]
  class ARCHIVED ok
  class FAILED,HIDDEN bad
  class ACTIVE queue