OC2P
All projects
React Redux TypeScript REST API

OC2P

A fleet management dashboard for EV charging operators, built on a state-driven React architecture.

Role Frontend Engineer
Timeline August 2024

The Problem

OC2P.io is a smart management platform for EV charging fleets. Fleet operators — managing tens or hundreds of charging stations across multiple locations — needed a single interface to monitor station health, track session data, and control charging configurations in real time.

The frontend challenge was managing a large, frequently updating data model: station statuses change in real time, sessions start and end continuously, and operator actions need to be reflected immediately across the interface without full-page refreshes.

My Approach

The core architectural decision was adopting Redux as the state management layer — not because it is always the right choice, but because the data requirements justified it here.

Redux for predictable, shared state. With multiple views consuming the same station and session data, local component state would have created inconsistency and prop-drilling complexity. Redux gave a single source of truth for the entire fleet model, with clear action/reducer boundaries that made debugging straightforward.

Selector patterns for derived data. Rather than computing fleet statistics in components, all derived data (utilization rates, fault summaries, session aggregates) lives in memoized selectors. Components subscribe to exactly the data they need — nothing more.

Optimistic UI updates. When an operator takes an action (toggling a station, adjusting a schedule), the UI reflects the change immediately while the API request completes in the background. Failures trigger a rollback. This made the interface feel fast and responsive even over slower connections.

Architecture

React + Redux Frontend
  ├── /store
  │     ├── stations/        → Station status, health, configuration
  │     ├── sessions/        → Active and historical charging sessions
  │     └── alerts/          → Fault detection, notification state
  ├── /selectors             → Memoized derived data (reselect)
  ├── /components            → Station cards, maps, session tables
  └── /services              → REST API clients for backend sync

Backend API
  └── REST endpoints for station data, session management, control commands

Impact

The dashboard is live in production at oc2p.on4web.com. Fleet operators can now monitor all stations from a single interface, respond to faults in real time, and analyze utilization patterns to optimize charging capacity.

The Redux architecture proved its value as the feature set grew: new views and data types could be added by extending the store without restructuring existing components.