graph TB
    subgraph Clients["🖥️ Clients"]
        B1["Browser A<br/>(React + Fabric.js)"]
        B2["Browser B<br/>(React + Fabric.js)"]
        B3["Browser C<br/>(React + Fabric.js)"]
    end

    subgraph Edge["🌐 Edge Layer"]
        CDN["CDN / Vercel Edge<br/>Static Assets"]
    end

    subgraph Backend["⚙️ Backend Services"]
        API["REST API Server<br/>(Express.js)"]
        WS["WebSocket Server<br/>(Socket.IO)"]
    end

    subgraph Data["🗄️ Data Layer"]
        DB["MongoDB Atlas<br/>(Primary Store)"]
        CACHE["Redis<br/>(Cache / PubSub)"]
        S3["AWS S3<br/>(File Storage)"]
    end

    B1 & B2 & B3 -->|"HTTPS"| CDN
    B1 & B2 & B3 -->|"REST API"| API
    B1 & B2 & B3 <-->|"WebSocket"| WS

    API --> DB
    API --> CACHE
    API --> S3
    WS --> CACHE
    WS --> DB

    style Clients fill:#1a1a2e,stroke:#6c5ce7,color:#f8f9fa
    style Edge fill:#16213e,stroke:#00cec9,color:#f8f9fa
    style Backend fill:#1a1a2e,stroke:#6c5ce7,color:#f8f9fa
    style Data fill:#16213e,stroke:#00cec9,color:#f8f9fa

sequenceDiagram
    participant A as 👤 User A
    participant S as 🖥️ Server
    participant R as 📦 Redis
    participant B as 👤 User B

    A->>S: draw-action (rect added)
    S->>S: Validate + timestamp
    S->>R: Buffer action
    S->>B: Broadcast draw-action
    B->>B: Apply to local canvas
    
    Note over R,S: Every 30s
    S->>S: Flush buffer → MongoDB

graph LR
    A["1️⃣ Clone Repo"] --> B["2️⃣ Start Docker"]
    B --> C["3️⃣ Setup Backend"]
    C --> D["4️⃣ Setup Frontend"]
    D --> E["5️⃣ Open App 🎉"]

    style A fill:#6c5ce7,stroke:#6c5ce7,color:#fff
    style B fill:#00cec9,stroke:#00cec9,color:#fff
    style C fill:#6c5ce7,stroke:#6c5ce7,color:#fff
    style D fill:#00cec9,stroke:#00cec9,color:#fff
    style E fill:#00b894,stroke:#00b894,color:#fff

graph TD
    subgraph UserA["👤 User A"]
        A1["Draws rectangle<br/>on local canvas"]
        A2["Fabric.js fires<br/>object:added"]
        A3["Serialize object<br/>to JSON"]
        A4["Emit draw-action<br/>via Socket.IO"]
    end

    subgraph Server["🖥️ Socket.IO Server"]
        S1["Receive &<br/>validate action"]
        S2["Add server<br/>timestamp"]
        S3["Buffer in<br/>Redis"]
        S4["Broadcast to<br/>room (excl. sender)"]
    end

    subgraph UserB["👤 User B"]
        B1["Receive<br/>draw-action"]
        B2["Deserialize<br/>object"]
        B3["Add to local<br/>canvas"]
        B4["Render ✅"]
    end

    A1 --> A2 --> A3 --> A4
    A4 -->|WebSocket| S1
    S1 --> S2 --> S3 --> S4
    S4 -->|WebSocket| B1
    B1 --> B2 --> B3 --> B4

    style UserA fill:#1a1a2e,stroke:#6c5ce7,color:#f8f9fa
    style Server fill:#16213e,stroke:#00cec9,color:#f8f9fa
    style UserB fill:#1a1a2e,stroke:#6c5ce7,color:#f8f9fa

graph LR
    subgraph Production
        V["Vercel<br/>Frontend CDN"]
        R["Render<br/>Backend Docker"]
        MA["MongoDB Atlas<br/>Database"]
        RC["Redis Cloud<br/>Cache"]
        S3["AWS S3<br/>Files"]
    end

    GH["GitHub Push"] -->|"auto-deploy"| V
    GH -->|"CI/CD"| R
    R --> MA
    R --> RC
    R --> S3

    style Production fill:#0f0f23,stroke:#6c5ce7,color:#f8f9fa
    style GH fill:#00b894,stroke:#00b894,color:#fff

gantt
    title DrawSaver Development Roadmap
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Phase 1 — MVP
    Project Setup & Auth        :done, p1a, 2026-06-01, 7d
    Canvas Engine               :active, p1b, after p1a, 7d
    Rooms & Persistence         :p1c, after p1b, 7d
    MVP Polish & Launch         :p1d, after p1c, 7d

    section Phase 2 — Collaboration
    WebSocket Foundation        :p2a, after p1d, 7d
    Presence & Cursors          :p2b, after p2a, 7d
    Collaboration Polish        :p2c, after p2b, 7d

    section Phase 3 — Advanced
    Version History & Layers    :p3a, after p2c, 7d
    Export & Sharing            :p3b, after p3a, 7d
    UX Polish & Performance     :p3c, after p3b, 7d

    section Phase 4 — Production
    Testing & Security          :p4a, after p3c, 7d
    DevOps & Launch             :p4b, after p4a, 7d

    section Phase 5 — AI & Scale
    AI Features                 :p5, after p4b, 30d

graph LR
    A["🍴 Fork"] --> B["🌿 Branch"]
    B --> C["💻 Code"]
    C --> D["✅ Test"]
    D --> E["📤 Push"]
    E --> F["🔀 PR"]

    style A fill:#6c5ce7,stroke:#6c5ce7,color:#fff
    style B fill:#00cec9,stroke:#00cec9,color:#fff
    style C fill:#6c5ce7,stroke:#6c5ce7,color:#fff
    style D fill:#00b894,stroke:#00b894,color:#fff
    style E fill:#00cec9,stroke:#00cec9,color:#fff
    style F fill:#6c5ce7,stroke:#6c5ce7,color:#fff