Kent CamTech – HomeCam (Home Surveillance)

Technical Lead – Frontend · 2021 · 5 months · 4 people · 7 min read

Led a team of 4 frontend developers in building and modernising Kent CamTech's smart home surveillance application using React 16 — delivering a fully redesigned UI aligned with updated brand specifications, robust cross-functional feature integration, and a structured code review culture that raised team-wide quality standards

Overview

Architected and delivered HomeCam — Kent CamTech's smart home security camera application. The platform enables homeowners to monitor live camera feeds, receive smart alerts, review analytic reports, and manage connected devices through a unified, intuitive interface. Built in React 16 with a team of 4 frontend engineers, the project involved both new feature development and a full UI modernisation to align the application with updated design standards.

Problem

HomeCam's existing frontend had been built rapidly to meet an early product launch deadline, leaving the UI misaligned with an updated design language and the codebase lacking the structural consistency needed for reliable long-term development. Smart home users expect a polished, responsive experience — particularly in a security context where trust in the interface directly reflects trust in the product. Beyond the visual layer, the application needed tighter cross-functional integration between the camera hardware events, backend alert pipelines, and the frontend notification system to ensure smart alerts and analytic reports reached users reliably and in real time.

Constraints

  • UI modernisation must be delivered without disrupting live features used by existing HomeCam customers
  • React 16 codebase required careful state management patterns for real-time camera feed and alert data
  • Cross-functional coordination with hardware, backend, QA, and design teams required tight communication across all workstreams
  • Team of 4 responsible for both the UI overhaul and ongoing feature delivery simultaneously
  • Smart alert and analytic features are safety-critical — reliability and predictability were non-negotiable

Approach

Led a team of 4 React developers through a parallel delivery model — progressing UI modernisation and new feature development in the same sprint cycle without blocking either workstream. Established a component-driven architecture that separated presentational components from data-fetching and state logic, making the modernisation process additive rather than disruptive to existing feature code. Collaborated closely with the design team to translate updated specifications into reusable React components, and with backend and QA engineers to define integration contracts for the alert and analytics pipelines. Introduced structured code reviews with written, principle-based feedback to raise quality standards and build consistent patterns across the team.

Key Decisions

Component-driven architecture with clear separation of presentational and container components

Reasoning:

HomeCam required both a UI overhaul and live feature development to happen concurrently. A clean separation between presentational components (which the UI modernisation touched) and container components (which owned data-fetching and state logic) meant design changes could be applied without risk to the underlying feature behaviour. This pattern also made the codebase significantly easier to test and maintain as the team scaled up development.

Alternatives considered:
  • Monolithic components with mixed concerns — simpler upfront but costly to modernise
  • Full component library rebuild before feature development resumes
  • Redux-heavy architecture with all UI state centralised

React 16 with hooks and context for state management over Redux

Reasoning:

HomeCam's state requirements — camera feed status, alert notifications, device connection state, and user preferences — were well-scoped to component trees rather than requiring a global store. React hooks and context provided sufficient state management capability without the boilerplate overhead of Redux, keeping the codebase lean and the team productive within the delivery timeline. For async side effects, custom hooks abstracted the data-fetching layer cleanly.

Alternatives considered:
  • Redux with redux-thunk for async operations
  • MobX for reactive state management
  • Zustand (not yet widely adopted at the time)

Design token adoption from updated specifications before component modernisation

Reasoning:

Applying updated design values (colors, spacing, typography, shadow levels) as design tokens at the start of the modernisation — rather than hardcoding values per component — meant the full visual update could be applied globally and consistently, and future design iterations would require minimal code changes. It also gave the team a shared vocabulary that aligned frontend implementation with the design team's Figma specifications.

Alternatives considered:
  • Apply design updates directly in component stylesheets without tokenisation
  • Use a third-party design system and adapt to its token structure
  • Defer design token adoption to a future refactor

Tech Stack

  • React 16
  • TypeScript
  • React Hooks
  • React Context API
  • SCSS
  • CSS Custom Properties
  • Jest
  • React Testing Library
  • WebSockets

Result & Impact

  • 4 frontend developers
    Team Led
  • Full design spec compliance
    UI Modernisation
  • React 16 with hooks architecture
    Frameworks
  • Modernisation + features in parallel
    Delivery Model

The HomeCam platform shipped with a fully modernised UI that aligned with Kent CamTech's updated brand identity, giving the product a premium look and feel that matched the quality of the underlying hardware. The component-driven architecture made the codebase significantly easier to extend and maintain, reducing the cost of future feature additions. Structured code reviews elevated the team's output quality and created shared patterns that outlasted the project engagement. Cross-functional collaboration with hardware, backend, design, and QA ensured smart alerts, live feeds, and analytic reports integrated reliably — delivering on the core promise of a trustworthy home security product.

Learnings

  • Separating presentational and container components is the most effective pattern for running UI modernisation and feature development in parallel — it eliminates the false choice between "stop and redesign" or "ship and regret"
  • In consumer security products, UI polish is a trust signal — users who feel uncertain about the interface feel uncertain about their home security
  • React hooks and context are often sufficient for well-scoped applications — reaching for Redux before understanding the actual state topology is a common and costly over-engineering mistake
  • Design tokens should be established before component modernisation begins, not after — retrofitting tokens into already-updated components doubles the work
  • Code reviews are most valuable when they teach principles, not just fix violations — feedback that explains the why builds team capability faster than feedback that only states the what
  • Cross-functional integration on IoT-adjacent products requires frontend engineers to understand the data contracts at the hardware and backend boundaries, not just the API surface

UI Modernisation

Led a full visual overhaul of the HomeCam application to align with Kent CamTech’s updated design language:

  • Design token implementation establishing color, typography, spacing, and elevation values as CSS custom properties before component modernisation began — ensuring global consistency and future-proofing design updates
  • Component-by-component redesign using React 16 with a clean presentational/container separation, allowing UI changes to be applied without touching underlying feature logic
  • Updated navigation and layout patterns reflecting the new design specifications across the full application shell
  • Responsive layout refinements ensuring the modernised UI performed consistently across desktop, tablet, and mobile screen sizes
  • Design-to-code collaboration working directly with the design team to clarify specification intent and ensure pixel-accurate implementation of updated components

Smart Home Surveillance Features

Built and integrated the core HomeCam product features across the frontend:

  • Live camera feed interface displaying real-time video from connected home security cameras with status and connection indicators
  • Smart alert dashboard surfacing motion detection events, unusual activity notifications, and system alerts with timestamp and camera source context
  • Analytic reports providing homeowners with activity summaries, event frequency trends, and camera uptime statistics
  • 4G connectivity status indicators displaying signal strength and network status for cameras operating on mobile data connections

Engineering Quality & Code Reviews

Established team practices that raised the quality and consistency of the codebase:

  • Structured code reviews with principle-based written feedback covering component design, state management patterns, and React best practices
  • Component architecture guidelines defining the presentational/container split and naming conventions adopted across all 4 developers
  • Custom hooks abstracting data-fetching, WebSocket subscription, and alert state logic into reusable, testable units
  • Jest and React Testing Library coverage across critical components and custom hooks, prioritising alert flows and device state management
  • Cross-functional integration reviews validating frontend implementation against backend API contracts and hardware event schemas before QA handoff

Cross-Functional Delivery

Coordinated across disciplines to deliver reliable, fully integrated features:

  • Designer collaboration translating updated Figma specifications into reusable React components with shared design token foundations
  • Backend engineer alignment defining data contracts for live feed endpoints, alert webhook payloads, and analytic report APIs
  • QA partnership establishing acceptance criteria and edge case scenarios for smart alert reliability and device connectivity handling
  • Product manager/owner communication demonstrating sprint progress through working software and aligning on upcoming feature priorities
  • Hardware team coordination understanding camera event schemas and connectivity constraints to build a frontend that handled real-world device behaviour gracefully
All projects