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)

git clone vanuit Gitea: http://git.211:3000/mo/mek-tech-showcase.git
npm install && npm run build (frontend builden)
npm start — server start op :3010
Of: docker build -t showcase . && docker run -p 3010:3010 showcase

3.6 KiB Raw Permalink Blame History