%%{init: {"theme":"forest","flowchart":{"curve":"linear"},"themeCSS":".edgePath path { stroke-dasharray: 6 4; animation: dash 16s linear infinite; } @keyframes dash { to { stroke-dashoffset: -1000; } }" }}%%
flowchart LR

classDef client fill:#f1f5f9,stroke:#334155,color:#0f172a;
classDef fe fill:#fff7ed,stroke:#f59e0b,color:#7c2d12;
classDef be fill:#ecfdf5,stroke:#16a34a,color:#065f46;
classDef db fill:#e3f2fd,stroke:#1e88e5,color:#0c4a6e;
classDef ext fill:#f5f3ff,stroke:#8b5cf6,color:#4c1d95;
classDef stat fill:#e2e8f0,stroke:#475569,color:#111827;

U((User Browser)):::client
FE[Frontend (React app)]:::fe
API[Backend API (Go + Gin)\n/api/v1]:::be
DB[(PostgreSQL DB)]:::db
STATIC[Static & Uploads\n/assets, /uploads]:::stat
EXT[External Services\n(SMTP, Error Receiver, Umami, FACR, Zonerama, YouTube)]:::ext

U --> FE
FE ==>|HTTP| API
API --> DB
API <-->|read/write| STATIC
API --> EXT

%% Optional: public static reads
U -.->|static files| STATIC