diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md new file mode 100644 index 0000000..9bb17b5 --- /dev/null +++ b/ARCHITECTURE.md @@ -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`