← David Veznik

CaptureCloud

Energy · BESS

The frontend platform for CaptureCloud, a set of role-specific web portals for monitoring and managing grid-scale battery energy storage assets, with live dashboards, site and equipment management, alarms and incidents, and market analytics.

I built the interfaces operators use to monitor and manage grid-scale battery storage.

Context

Capture Energy operates grid-scale battery energy storage and other energy assets. CaptureCloud is the software layer that lets customers and internal teams see and act on them. The frontend surfaces live telemetry dashboards, geographic site exploration on Mapbox, equipment and storage-unit configuration, alarms, incidents and activity logs, SLA tracking, and market and insight analytics. All of it is split across three role-specific portals (customer, asset operations, and support), so each audience gets a tailored experience over the same platform.

The codebase is an Nx monorepo. The Next.js App Router portals share one Storybook-documented component library, a custom design system with light and dark themes built on IBM Carbon, Radix, and Tailwind, and a set of shared packages for typed API hooks, auth, and validation schemas. The API layer is schema-first: TypeScript types are generated from the backend’s OpenAPI spec and consumed through domain-scoped React Query hooks, with Zod validating at the edges. The same Zod definitions even generate the JSON schemas that drive equipment-configuration forms.

My role

Lead frontend engineer on the CaptureCloud frontend, involved from the beginning. I put together the architecture of the monorepo and its tooling: the Nx workspace layout, the shared component library and design system, the typed API-integration pipeline, and the testing setup the portals are built on. The backend API and telemetry ingestion are separate systems.

Highlights

  • Multi-app, shared-core architecture. Role-specific Next.js portals sit on one component library and shared packages, keeping UX consistent while tailoring each audience’s surface, with Nx project-graph and affected builds coordinating it all.
  • A fully typed API integration. Backend OpenAPI spec to generated TypeScript types to typed React Query hooks per domain, with telemetry-wrapped API-route controllers feeding Azure App Insights and OpenTelemetry.
  • Energy-domain data visualization. Real-time battery-storage dashboards with Carbon Charts and Recharts, D3 sankey energy-flow diagrams, and Mapbox GL site exploration, all with time-zone-aware telemetry handling.
  • Schema-driven configuration. Equipment and storage-unit forms are generated from Zod-derived JSON schemas.
  • Enterprise plumbing. NextAuth with Azure AD / Entra ID SSO including token refresh, Azure Key Vault secrets, and i18n via next-intl.
  • A well-invested quality workflow. A Storybook + Chromatic visually-tested design system, Jest unit tests, and Playwright end-to-end tests, orchestrated through Nx.

Images

The schedule view for a battery energy storage unit, with an hourly grid of frequency-reserve market commitments, consumption and production limits, state-of-charge targets, unit details, and a location map
The schedule view for a battery storage unit. Hourly commitments on frequency-reserve markets (FCR-D, FCR-N), consumption and production limits, and state-of-charge targets, next to the unit's technical details and location. Shown with demo data.