# Live Drone Patrol Console - Shoham Fellner _Case Study_ Put the responding guard and the command room on the same live picture, from anywhere in the world. - **Context:** Nando ยท 2022-2024 - **Role:** Front-End Developer & UX/UI Designer - **Tech:** React, Leaflet _Interface reconstructed with a generic site and an AI-generated drone feed. Not a real client's data._ ## The Stakes The responding guard is the site's own security guard. The command room is that same security team's operators, plus the drone pilots - one room, both roles. Used daily, across multiple operational sites. The drone gives a perspective nobody on the ground has, but a dropped feed isn't a failure state - it's a normal part of operating a drone in the field. The drone itself is built to continue its mission, or return to base if its battery runs low, and both the guard and the command room have other ways to keep working the incident without it. ## My Role Solo frontend, owning UX/UI and the implementation. I joined when the product was a single video stream and built it out from there - my first project, taken on as a junior with full ownership of the frontend. The backend was a separate team: C#/.NET services, MongoDB for user management, and a Node.js API server running in Docker. I built against what they exposed. ## The Problem "Same live picture" was the actual solution, not a description of the problem: the drone operator and the guard needed to see the same event, at the same time, so both could act on the same information. The command room also carries higher permissions than the guard - editing waypoints, gate positions, fences, and flight presets - so the same screen had to serve two different levels of control. Sites with more than one drone add a second problem on top: a single command-room operator may need to watch and manage several drones at once, each with its own video feed and its own position on the map. The default single-drone view couldn't just stretch to cover that - it needed a dedicated view built for it. ## Decisions ### Building on a mapping library I didn't choose - **Constraint:** Leaflet was set before I joined, and the client base included sites with far better aerial imagery available than the default map tiles. - **Decision:** Layered clustering and custom tile sources on top of Leaflet, so those sites could use their own aerial views instead of the stock map. - **Trade-off:** Built by hand, without a baseline to weigh it against - I never got to compare it with what Mapbox or Google Maps would have handled for free. A real cost, on top of this being my first project. ### One shared view, two permission levels - **Constraint:** The guard needs the same live picture as the command room, but only the command room should be able to edit the map. - **Decision:** A single interface with permission-gated UI, rather than two separate builds, so both roles stay in sync on the same underlying data. - **Trade-off:** Every map feature has to be designed for two audiences from the start, instead of shipping operator-only tools as a separate track. ### One operator, several drones - **Constraint:** Sites with more than one drone needed a single command-room operator able to track and manage every one of them at once. - **Decision:** A dedicated multi-drone view, built specifically for sites with more than one drone, rather than stretching the single-drone view to cover it. - **Trade-off:** Screen space and attention turned out to be the real constraint, not bandwidth - fitting several live feeds in front of one person was the harder problem. ## Evidence Not a real client's site or footage - a generic area and an AI-generated drone feed stand in for the real interface. - [Guard and command room share this same live view - map, video feed and telemetry together.](https://www.shoham-fe.dev/case-study/drone/main-console.png) - [The command room's added controls - waypoints, gates, fences, flight presets.](https://www.shoham-fe.dev/case-study/drone/command-room-editing.png) - [The guard's view in the field.](https://www.shoham-fe.dev/case-study/drone/mobile-view.png) ## Outcome As of when I left, it was in daily operational use across every deployed site - guards and command rooms working from the same live picture, real incidents included. ## What I'd Change Move telemetry off polling and onto WebSockets. It was the plan the whole time I was there - it just never landed before I moved on. Polling works, but it's the wrong tool for something this real-time. ## Other case studies - [Procurement Planning System](https://www.shoham-fe.dev/case-study/procurement-planning-system): Built from scratch to replace the legacy platform behind the Ground Forces' annual budget. - [OctSeven](https://www.shoham-fe.dev/case-study/octseven): A public platform where families build memorial pages for the people they lost. Development started two weeks after October 7th. - [Aura Cloud](https://www.shoham-fe.dev/case-study/aura-cloud): Resolves who can actually do what across AWS, and flags where identity and policy disagree. ## Elsewhere on this site - [Home](https://www.shoham-fe.dev/): Introduction, what I care about building, how I work, and the tech stack I reach for. - [Resume](https://www.shoham-fe.dev/resume): Full professional timeline - roles, projects, education and skills - with a downloadable CV. - [About](https://www.shoham-fe.dev/about): Longer-form background: how I got into frontend, the problems I like, and how I work with design. - [Contact](https://www.shoham-fe.dev/contact): How to reach me, what I am available for, and what to include so I can answer usefully. - [Case Study](https://www.shoham-fe.dev/case-study): Four projects in depth - the problem, the constraints, what shipped, and what I would change. - [Privacy](https://www.shoham-fe.dev/privacy): What this site measures, which third parties see it, and how to opt out. ## Machine-readable sources - [This page as HTML](https://www.shoham-fe.dev/case-study/live-drone-patrol-console): The same content rendered for browsers. - [This page as markdown](https://www.shoham-fe.dev/case-study/live-drone-patrol-console.md): Stable markdown URL, served regardless of the Accept header. - [llms.txt](https://www.shoham-fe.dev/llms.txt): Site overview and the full list of pages. - [sitemap.xml](https://www.shoham-fe.dev/sitemap.xml): Every indexable URL. --- Canonical HTML: https://www.shoham-fe.dev/case-study/live-drone-patrol-console