A real-time smart venue dashboard built in Angular 21 , simulating live occupancy, sensor data, and visitor flow across airports, stadiums and retail environments.
Venue operators at large-scale physical environments , airports, stadiums, retail centres , need to make fast decisions based on live crowd data. But most off-the-shelf tools are either too generic or buried in enterprise complexity. The brief: design and build a focused, real-time dashboard that gives operators immediate visibility into occupancy, visitor flow, and zone density, with alerts surfaced before they become incidents.
This project was built specifically to demonstrate Angular frontend capability aligned with Beonic's product domain , smart building analytics, IoT sensor integration, and data-driven venue intelligence.
Before any code was written, I mapped out what information operators would need at a glance vs. on demand. The hierarchy: venue-level stats at the top (total visitors, occupancy, dwell time, sensor status), then time-series flow analysis, then spatial zone density. Alerts sit in a persistent panel , always visible, never blocking the primary data view.
Low-fidelity wireframes were used to lock in layout structure and component relationships before applying the visual design. The key constraint was information density , a venue operator needs to see everything critical without scrolling. The sidebar nav + fixed topbar + scrollable main panel pattern solved this cleanly.
The app is built using Angular 21 standalone components , no NgModules. The root App component owns all state and data logic, keeping the template as a pure view layer. RxJS interval() drives the live data loop, subscriptions are tracked via a Subscription bag and cleaned up in ngOnDestroy to prevent memory leaks. TypeScript interfaces enforce the data contract between the data layer and the template.
The dark UI was a deliberate choice , venue operations dashboards are often used in dimly-lit control rooms or on monitors exposed to low ambient light. The colour palette uses a deep navy base (#0D0F14) with carefully calibrated surface layers, ensuring sufficient contrast at every level without creating visual noise.
Semantic colour is used strictly: green for healthy/low occupancy, amber for caution, red for critical. This maps directly to the traffic-light mental model operators already understand. Custom properties throughout the CSS mean the entire palette can be swapped or extended without touching component styles.
BeonicFlow is a venue intelligence dashboard that ingests live sensor data and surfaces occupancy, visitor flow, and zone density across large physical environments. Built entirely in Angular 21 with standalone components, the app simulates a production-grade platform of the kind used by airports, stadiums, and retail centres to manage crowd flow and operational decisions in real time.
At the heart of the dashboard is an RxJS interval observable that fires every second, simulating a WebSocket feed from physical IoT sensors. Occupancy figures, visitor counts, and chart data update in real-time without any page reload , the Angular change detection cycle picks up each emission and re-renders only what changed.
The line chart is rendered using pure SVG paths calculated in TypeScript , no charting library, no third-party dependency. Each tick recomputes the SVG d attribute from raw data arrays and data-binds the result directly into the template, demonstrating clean separation of data and view.
The floor plan heatmap maps physical zones to a CSS Grid layout, with each zone's background and border colour driven entirely by occupancy data. Zones transition through four density levels , low, medium, high, and critical , using Angular class bindings that update live with each data tick.
Critical zones pulse with a CSS animation to draw operator attention immediately, replicating the urgency-signalling patterns used in real venue management software. The heat gradient from green → amber → red gives operators an at-a-glance spatial overview without needing to read individual figures.
The dashboard uses a CSS custom property design system with a responsive grid that collapses from a 4-column stat row to 2 columns on tablet, then stacks the chart and alert panel vertically below 1100px. On mobile, the sidebar hides entirely and the layout becomes a full-width scrollable single column , all achieved with three targeted media query breakpoints and no JavaScript.
This demonstrates genuine understanding of responsive design beyond just "it fits on mobile" , the information architecture was considered at each breakpoint to ensure usability across field devices an airport operations team might use.