Kent CamTech – CarCam (Fleet & Vehicle Surveillance)

Technical Lead – Frontend · 2019 · 1.6 years · 6 people · 6 min read

Led a team of 6 frontend developers to build CarCam, a real-time fleet monitoring platform with live GPS tracking and in-vehicle video — delivering fast, reliable connections for fleet operators managing dozens of vehicles at once.

Overview

Built CarCam — a fleet management and dash cam application that lets commercial fleet operators see what's happening across their entire vehicle network in real time. The platform combines live video from each vehicle, GPS tracking, smart alerts, and reports, all in one place. I led a team of 6 frontend engineers using Angular and Angular Material to architect and deliver the application over 1.6 years.

Problem

Fleet operators were managing GPS tracking, video feeds, and alerts separately in different tools. When something happened on the road — an accident, a safety incident — the operator had to switch between systems to understand what actually occurred. The application also needed a visual refresh to match Kent CamTech's updated brand. All of this had to happen without breaking the features that drivers and managers were already relying on.

Constraints

  • Real-time video streaming and GPS data must arrive with minimal lag over 4G networks
  • Application must stay responsive when managing dozens of vehicles simultaneously
  • Design updates can't disrupt the existing features that fleet operators depend on daily
  • Reliability is non-negotiable — crews rely on this app in safety-critical situations
  • Close teamwork required across hardware, backend, and frontend groups

Approach

I led the team using Angular with a modular component system that let developers work on streaming, tracking, and alerts separately without stepping on each other's code. We used WebSockets to push real-time data from the server to the app so nothing felt slow or out of sync. Every piece of the app had test coverage from day one — this wasn't something we bolted on later. I also worked closely with the design and backend teams to make sure video feeds streamed smoothly and alerts reached users instantly.

Key Decisions

WebSockets for real-time GPS tracking and live video streaming

Reasoning:

Polling — constantly asking 'do you have new data?' — introduces noticeable delays in a fleet safety context. WebSockets keep a persistent connection open so GPS positions and video frames arrive immediately. The operator sees what's happening on the road as it happens.

Alternatives considered:
  • HTTP polling for GPS updates
  • Server-Sent Events (SSE) for one-directional data push
  • Third-party real-time SDK

Angular Material as the UI component foundation

Reasoning:

Angular Material gave us a solid, professional-looking design system right out of the box. We could customize it to match Kent CamTech's brand and spend our energy on features instead of reinventing buttons and navigation patterns. Fleet operators needed an interface they could trust, and Material delivered that feel.

Alternatives considered:
  • Custom component library from scratch
  • Bootstrap with Angular bindings
  • PrimeNG

Full test coverage from the start

Reasoning:

When your app is used for fleet safety, bugs aren't just annoying — they're problems. Writing tests as we built the features meant we could refactor confidently, catch issues before they reached users, and know the app would work reliably in production.

Alternatives considered:
  • End-to-end tests only (Cypress/Protractor)
  • Manual QA with no automated coverage
  • Testing deferred to post-launch

Tech Stack

  • Angular
  • TypeScript
  • Angular Material
  • WebSockets
  • RxJS
  • SCSS
  • Karma
  • Jasmine

Result & Impact

  • 6 frontend developers
    Team Led
  • Sub-second GPS & video updates
    Real-Time Latency
  • Full application coverage
    Test Coverage
  • 100% design spec compliance
    UI Modernization

CarCam shipped with a single, clean interface where fleet operators could see all their vehicles at once, watch live video from any camera, and respond to alerts instantly. When an accident happened or a driver needed help, managers had the information they needed right there. The redesigned interface made the app feel modern and trustworthy, and new operators could actually figure out how to use it without extensive training.

Learnings

  • WebSocket architecture requires careful contract design between frontend and backend — investing in clear event schemas early prevents costly refactors later
  • In safety-critical applications, test coverage is a feature, not an afterthought — it directly contributes to operator trust in the platform
  • Real-time UI performance depends heavily on efficient change detection strategies in Angular — OnPush and trackBy are essential at scale
  • Cross-functional alignment (hardware, backend, QA, design) is the biggest risk factor in IoT-adjacent products and must be actively managed
  • Design modernization is most effective when done incrementally alongside feature delivery, rather than as a big-bang redesign

Real-Time Fleet Surveillance

CarCam’s core strength is showing fleet operators what’s happening right now across their vehicles:

  • Live video streaming — continuous in-vehicle footage delivered over 4G with minimal delay, so operators see what’s actually happening on the road
  • Real-time GPS tracking — vehicle positions update almost instantly, across the entire fleet at once
  • Smart alert engine — instant notifications when a vehicle speeds, brakes hard, or leaves a designated area
  • Incident timeline view — when something happens, you can see the video, the GPS path, and the alerts all together to understand what actually occurred
  • Multi-vehicle dashboard — one screen to monitor everything, from a single vehicle to an entire fleet

Fleet Management & Analytics

Beyond live monitoring, CarCam helps managers make better decisions about their fleet:

  • Activity reports — detailed breakdowns of mileage, route efficiency, idle time, and driver behavior patterns
  • Trip history playback — watch any trip again with the vehicle’s GPS path and video synchronized, useful for training or incident review
  • Alert history — see which drivers or vehicles trigger the most alerts, and spot patterns over time
  • Export-ready reports — documentation for compliance, insurance claims, or internal operational reviews

UI Modernization & Design Alignment

Completely redesigned the visual interface to match Kent CamTech’s updated brand:

  • Component-level redesign — rebuilt the UI in Angular Material with custom styling that gave it a modern, professional look
  • Responsive layouts — the application works equally well on desktop and tablet, so operators can manage the fleet from different devices
  • Accessibility improvements — added keyboard navigation and screen reader support so the app works for more people
  • Design tokens — structured colors and typography so future design changes are faster and more consistent

Engineering Quality & Team Leadership

Built practices and processes that made the team more effective:

  • Full application testing — every part of the app, from components to WebSocket handling, had automated tests covering normal and edge-case scenarios
  • Code review culture — reviews focused on teaching principles and patterns, not just catching mistakes, so the whole team got better at building reliable code
  • Modular architecture — the app was organized so 6 developers could work on different features in parallel without conflicts
  • Cross-functional delivery — regular alignment with backend, QA, hardware, and product teams ensured features worked smoothly from GPS data arrival through video rendering to alert delivery
All projects