Notion — Simple

Problem statement (interviewer prompt)

Design Notion: a block-based collaborative document + wiki + lightweight database (tables, kanban, calendar). Each block is a tree node, multiple users edit concurrently, and pages can reference other pages. Support offline edit + sync, permissions, and full-text search.

flowchart LR
  U([User])
  BLK[Block Service]
  TREE[(Block tree per page)]
  DB[Database / View]
  PG[Page Renderer]
  U --> BLK --> TREE
  BLK --> DB
  TREE --> PG --> U

    classDef client fill:#dbeafe,stroke:#1e40af,stroke-width:1px,color:#0f172a;
    classDef edge fill:#cffafe,stroke:#0e7490,stroke-width:1px,color:#0f172a;
    classDef service fill:#fef3c7,stroke:#92400e,stroke-width:1px,color:#0f172a;
    classDef datastore fill:#fee2e2,stroke:#991b1b,stroke-width:1px,color:#0f172a;
    classDef cache fill:#fed7aa,stroke:#9a3412,stroke-width:1px,color:#0f172a;
    classDef queue fill:#ede9fe,stroke:#5b21b6,stroke-width:1px,color:#0f172a;
    classDef compute fill:#d1fae5,stroke:#065f46,stroke-width:1px,color:#0f172a;
    classDef storage fill:#e5e7eb,stroke:#374151,stroke-width:1px,color:#0f172a;
    classDef external fill:#fce7f3,stroke:#9d174d,stroke-width:1px,color:#0f172a;
    classDef obs fill:#f3e8ff,stroke:#6b21a8,stroke-width:1px,color:#0f172a;
    class U client;
    class BLK,PG service;
    class TREE,DB datastore;