docs: ARCHITECTURE.md met data flow en dashboard overzicht

2026-07-12 21:59:58 +00:00
parent 070ab80d4a
commit 4b5f7a4003
1 changed files with 103 additions and 0 deletions
@@ -0,0 +1,103 @@
+# Mek-Tech Live Labs — Architectuur
+
+## Overzicht
+
+Mek-Tech Live Labs is een open data showcase met 5 sector-dashboards
+die realtime data tonen uit publieke bronnen. Het project heeft een
+Node.js backend die data aggregated en via Server-Sent Events (SSE)
+naar een React/Vite frontend streamt.
+
+## Tech Stack
+
+| Laag | Technologie |
+|------|-------------|
+| **Backend** | Node.js + Express |
+| **Frontend** | React 19 + Vite |
+| **Charts** | Recharts |
+| **Maps** | Leaflet + react-leaflet |
+| **Video** | HLS.js (camera feeds) |
+| **Animatie** | Framer Motion |
+| **Data** | Publieke APIs (ECB, CBS, EU, Havens) → cache |
+
+## Directory Structuur
+
+```
+mek-tech-showcase/
+├── server/
+│   ├── index.js                # Express entrypoint + SSE setup
+│   ├── lib/
+│   │   ├── cache.js            # Data cache laag
+│   │   ├── camera-proxy.js     # Camera feed proxy
+│   │   └── sources/            # 5 data bronnen
+│   │       ├── fraud.js        # EU sanctielijsten + tx sim
+│   │       ├── retail.js       # CBS retail indices
+│   │       ├── smart-city.js   # Camera + lucht + verkeer
+│   │       ├── smart-city-infra.js
+│   │       ├── supply-chain.js # Haven throughput data
+│   │       └── trading.js      # ECB FX rates
+├── frontend/
+│   ├── index.html
+│   ├── vite.config.js
+│   └── src/
+│       ├── main.jsx            # Entrypoint
+│       ├── App.jsx             # Router setup
+│       ├── styles.css          # Global styles
+│       ├── layouts/
+│       │   └── Shell.jsx       # Hoofd-layout
+│       ├── components/
+│       │   ├── dashboard.jsx   # Dashboard grid component
+│       │   ├── LiveCameraFeed.jsx
+│       │   ├── SmartCityMap.jsx
+│       │   ├── GlobalOpsLayout.jsx
+│       │   └── shared.jsx      # Herbruikbare UI
+│       └── pages/              # 5 dashboards
+│           ├── Hub.jsx
+│           ├── Trading.jsx
+│           ├── SmartCity.jsx
+│           ├── Retail.jsx
+│           ├── SupplyChain.jsx
+│           └── Fraud.jsx
+├── cache/                      # Gecachende API responses
+├── Dockerfile
+└── package.json
+```
+
+## Data Flow
+
+```
+Publieke API (ECB, CBS, EU, …)
+    ↓ fetch elke N seconden
+server/lib/cache.js
+    ↓ cache in /cache/
+server/lib/sources/*.js
+    ↓ SSE push (Server-Sent Events)
+Express server → /api/* endpoints
+    ↓
+React frontend (Recharts, Leaflet)
+    ↓
+Browser render
+```
+
+Elk dashboard heeft een eigen SSE stream die elke ~2 seconden
+vernieuwde data pusht. De cache voorkomt rate limiting bij de bron-APIs.
+
+## 5 Dashboards
+
+| Dashboard | Data | SSE interval |
+|-----------|------|-------------|
+| **Trading & FX** | ECB koersen (EUR/USD, EUR/CHF, EUR/GBP, EUR/JPY) | 2s |
+| **Smart City** | Camera feeds, luchtkwaliteit, verkeer, kaart (Amsterdam, Rotterdam, Den Haag, Utrecht, Eindhoven) | 2s |
+| **Retail** | CBS regio-indices, categorie mix, footfall vs online | 2s |
+| **Supply Chain** | Haven throughput, import flows, vertraging | 2s |
+| **Fraud & Compliance** | EU Consolidated List, sanctions hits, risk verdeling | 1.5s |
+
+## Deployment
+
+Productie: `npm start` of Docker container op poort :3010.
+
+### Recovery (bij crash)
+
+1. `git clone` vanuit Gitea: `http://git.211:3000/mo/mek-tech-showcase.git`
+2. `npm install && npm run build` (frontend builden)
+3. `npm start` — server start op :3010
+4. Of: `docker build -t showcase . && docker run -p 3010:3010 showcase`