104 lines
3.6 KiB
Markdown
104 lines
3.6 KiB
Markdown
|
# 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`
|