Overview
A complex React surveillance dashboard supporting up to four simultaneous video channels in a synchronized grid view. Every player is locked to the same playback frame, driven by a shared timeline engine. Built from scratch.
The Problem
Surveillance review demands that operators scrub through multiple camera feeds in perfect lock step, a single frame offset makes incident correlation impossible. Off the shelf players offer no shared timeline, and bolting four independent video elements together produces drift that compounds over time.
What I Built
A custom playback engine that treats all four <video> elements as one logical player: seeking, buffering, and frame advancing in unison. On top of this sits a timeline component that renders a stream of security events (motion, alerts, zone entries, intrusions) as interactive markers the operator can scrub to instantly. A second view splits the screen into a camera grid on the left and an interactive map on the right, plotting object positions in real time as footage plays.
Beyond the dashboard itself, I built out the team's shared component library, a single home for the design system and every reusable UI primitive, packaged so it could be dropped into the client's other projects. I set the repository up as a Rollup bundled library and tuned the build output so one published package installs and behaves identically across React + Vite apps and Next.js applications.
I also owned the project's infrastructure and delivery pipeline end to end — containerizing the services with Docker, putting an nginx load balancer in front of them, and wiring up GitHub Actions to automate builds, tests, and deployments.
Tech Stack
- Frontend: React, TypeScript, Redux, Vite
- Real time sync: WebSocket (frame position broadcast)
- Map: CesiumJS map library
- Video:
hls.jsvideo with custom sync controller - Shared component library: Rollup (library bundling), design system + reusable components, React + Vite & Next.js support
- Infrastructure & CI/CD: Docker, nginx (load balancer), GitHub Actions
Key Features
- Synchronized grid - up to 4 video players advance frame by frame in exact unison, regardless of buffer state
- Custom event timeline - scrollable, zoomable track with typed event markers (motion, alert, zone entry, intrusion) and a live scrub needle
- Map mode - split screen showing the camera grid alongside an interactive map that plots detected object positions tied to the current playback timestamp
- Live & playback modes - seamless switch between live feed monitoring and historical review
Results & Impact
Delivered a fully functional multi channel surveillance UI that eliminated the manual frame matching workflow operators previously relied on. The synchronized scrub reduced incident review time significantly and became the primary tool for the client's security operations team.
The shared component library became the foundation for the client's other frontend work, removing duplicated UI effort and keeping the design system consistent across projects. On the infrastructure side, the Dockerized services, nginx load balancing, and GitHub Actions pipeline gave the project repeatable, automated deployments.