LiveEvent RadarLive ops for brand activations

The problem ​

Working big promotions as a brand hostess, the pain point was always the same: information arriving too late. A stand runs out of drinks mid-afternoon; the coordinator only hears about it hours later through WhatsApp or a manual count. There is no single live picture of which zones are draining stock fastest.

What I built ​

A browser-based Digital Command Center that feels like real ops telemetry:

• Seeded mock stream — ~3 minutes of history on load, then ~0.5 events/s with spike bursts and a crew restock every 60s
• Stock model with Healthy / Watch / Low tiers driving map colour in real time
• Minutes to empty + one restock suggestion so the UI helps decide, not only display
• Two maps — schematic SVG on /, geographic Leaflet on /dashboard
• Shared state — ring-buffered telemetry-store on both routes
• Web Worker — sampled-window throughput / hotspots on /dashboard

Working promotions taught me that a dashboard only helps if the numbers stay trustworthy. Python from my degree plus ops experience on activations pushed me toward stable KPIs, capped buffers, and maps that show stock state — not decorative charts.

Screens ​

/ — Command Center with zone stock, SVG map, and Session tally

/dashboard — Leaflet map and scrolling stock events

Both routes read from telemetry-store. Navigation uses a persistent AppShell and View Transitions so the header never flashes.

Stack ​

Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Zustand · Lucide · Leaflet · Vitest · Playwright

Go deeper ​

• Decisions & challenges — trade-offs, bugs I hit, accessibility, CSP notes
• Architecture — data path, ring buffer explainer, current routes
• Pipeline — hooks, stores, worker, derivation
• Benchmarks — what the append check does and does not claim
• Lessons learned — personal notes from the build
• Business · Visual system

Author ​

Ikrame Ibn Hayoun — Portfolio · GitHub · LinkedIn