%% Autogenerated mern-stack
graph TD
  classDef standard fill:#1e293b,stroke:#38bdf8,stroke-width:1px,color:#e5e7eb;
  classDef c-actor fill:#1e293b,stroke:#e5e7eb,stroke-width:1px,stroke-dasharray: 5 5,color:#e5e7eb;
  classDef c-compute fill:#422006,stroke:#fb923c,stroke-width:1px,color:#fed7aa;
  classDef c-database fill:#064e3b,stroke:#34d399,stroke-width:1px,color:#d1fae5;
  classDef c-network fill:#2e1065,stroke:#a855f7,stroke-width:1px,color:#f3e8ff;
  classDef c-storage fill:#450a0a,stroke:#f87171,stroke-width:1px,color:#fee2e2;
  classDef c-security fill:#450a0a,stroke:#f87171,stroke-width:1px,color:#fee2e2;
  classDef c-gateway fill:#2e1065,stroke:#a855f7,stroke-width:1px,color:#f3e8ff;
  classDef c-container fill:#422006,stroke:#facc15,stroke-width:1px,color:#fef9c3;

  subgraph cloud ["Deployment Infrastructure"]
    direction TB
    cdn(("<b>CDN / Storage</b><br/><i>network</i><br/><span style='font-size:0.8em'>Serves React Bundle</span>"))
    class cdn c-network
    api("<b>Express API</b><br/><i>compute</i><br/><span style='font-size:0.8em'>Node.js Backend</span>")
    class api c-compute
    db[("<b>MongoDB</b><br/><i>database</i><br/><span style='font-size:0.8em'>Document Store</span>")]
    class db c-database
  end

  %% Orphans
  users(("<b>Users</b><br/><i>actor</i><br/><span style='font-size:0.8em'>Browser / Mobile</span>"))
  class users c-actor
  spa("<b>React SPA</b><br/><i>container</i><br/><span style='font-size:0.8em'>Client-Side App</span>")
  class spa c-compute

  %% Edges
  users -.-> cdn
  users -.-> spa
  spa -.-> api
  api -.-> db