# 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`