Smartbox Full-Stack Infrastructure

graph LR subgraph EdgeLayer ["① Hardware & Edge"] ESP["🖥 ESP32 / Sensors"] end subgraph DockerEnv ["② Ubuntu Server · Docker Network"] MQTT["📡 Mosquitto\nBroker"] subgraph AppLayer ["Application Layer"] FastAPI["⚡ FastAPI\nBackend"] React["⚛ React\nFrontend"] end subgraph DataLayer ["Database Layer"] Influx[("🗄 InfluxDB\nSensor Data")] PG[("🗄 PostgreSQL\nUsers & Config")] end subgraph MonitorLayer ["Monitoring Layer"] Grafana["📊 Grafana\nDashboard"] end Nginx["🔀 Nginx\nReverse Proxy"] end subgraph CloudLayer ["③ Cloud & External Network"] Tunnel{"☁ Cloudflare\nTunnel"} Edge("🌐 Cloudflare\nEdge") User["👤 Users /\nBrowsers"] end ESP -- "MQTT Protocol" --> MQTT MQTT -- "Subscribe" --> FastAPI FastAPI -- "Write Time-Series" --> Influx FastAPI -- "Read/Write Relational" --> PG Grafana -- "Query metrics" --> Influx Grafana -- "Query config" --> PG User -- "HTTPS" --> Edge Edge -- "SSL Termination" --> Tunnel Tunnel -- "Port 80" --> Nginx Nginx -- "Route /" --> React Nginx -- "Route /api" --> FastAPI Nginx -- "Route /grafana" --> Grafana React -. "Fetch JSON" .- FastAPI classDef default fill:#1a2540,stroke:#334a7a,stroke-width:1px,color:#b0c4de,rx:8; classDef proxy fill:#0e4d5c,stroke:#06b6d4,stroke-width:1.5px,color:#a5f3fc; classDef backend fill:#1e3a5f,stroke:#3b82f6,stroke-width:1.5px,color:#93c5fd; classDef frontend fill:#0d3a50,stroke:#0ea5e9,stroke-width:1.5px,color:#7dd3fc; classDef db fill:#3b1c40,stroke:#a855f7,stroke-width:1.5px,color:#d8b4fe; classDef broker fill:#3b2a10,stroke:#f97316,stroke-width:1.5px,color:#fed7aa; classDef edge fill:#0d3324,stroke:#10b981,stroke-width:1.5px,color:#6ee7b7; classDef monitoring fill:#1f2a0e,stroke:#84cc16,stroke-width:1.5px,color:#bef264; class Nginx proxy; class FastAPI backend; class React frontend; class Influx,PG db; class MQTT broker; class Tunnel,Edge edge; class Grafana monitoring;