Atolla: Enterprise Energy Management Dashboard

Project Overview

Atolla is an industrial clean-energy software platform engineered to monitor, analyze, and control utility-scale wind and solar power generation facilities. As the frontend engineer on this project, I architected and maintained a high-density, 73+ page enterprise administration dashboard designed for power grid operators, plant engineers, and asset managers requiring real-time visibility into mission-critical hardware.

The Challenge: Real-Time Telemetry & Scale Across 73+ Pages

Monitoring renewable energy infrastructure at industrial scale creates unique architectural hurdles:

• Live telemetry streams: The platform ingests real-time sensor streams from wind turbines and photovoltaic solar arrays, including power output curves, inverter voltages, wind speeds, panel temperatures, and grid synchronization metrics. Traditional HTTP caching could not be used for live telemetry.
• Functional domain division: The platform is split into two major independent operational divisions: Solar Plants and Wind Plants. Each division features dedicated telemetry widgets, turbine pitch controls, inverter configuration forms, time-series analysis charts, and event/alarm logs.
• State management bottlenecks: Across 73+ pages, bloated Redux global stores and un-memoized selectors triggered cascading component re-renders on every telemetry update, leading to UI lag and dropped frames during peak generation periods.
• Heavy DOM lists: High-frequency diagnostic logs and sensor histories rapidly degraded client memory when rendering hundreds of rows simultaneously.

Architecture & Implementation: Modular React & Custom Design System

To deliver a maintainable codebase that allows multi-team scalability, we instituted a strict modular architecture:

• Feature-based architecture: Instead of a flat layout, the codebase was organized strictly around business domains (such as wind telemetry, solar tracking, equipment diagnostics, alarms, and plant reporting). Each feature directory encapsulated its own pages, view components, local state slices, API contracts, and domain types.
• Custom UI system with Radix UI & SASS: We engineered a custom, accessible design system using headless Radix UI primitives styled with structured SASS. This gave us complete control over high-density layouts, custom dark-mode instrumentation themes, and compact data-entry controls.
• High-density data tables with TanStack Table: Diagnostic logs, alarms, and equipment inventories were built using TanStack Table (React Table), enabling multi-column sorting, deep filtering by severity and timestamp, and custom column visibility toggles without performance degradation.

Performance Optimization & 30% Rendering Efficiency Gain

Because live telemetry updates continuously, optimization focused on DOM efficiency and rendering budgets:

• Normalized state architecture: Redesigned Redux stores by normalizing relational entities by ID. This eliminated deep state cloning and prevented unrelated dashboard widgets from re-rendering when an individual sensor metric updated.
• Memoized selectors & render guardrails: Implemented memoized selectors using createSelector, combined with disciplined usage of React.memo, useMemo, and useCallback to guard heavy chart wrappers and instrumentation dials against redundant render cycles.
• List virtualization with React Window: Integrated react-window across real-time alarm logs and time-series data grids. Only the rows visible within the operator's viewport are rendered in the DOM, maintaining smooth 60fps scrolling across datasets with tens of thousands of records.
• Measured results: These state and DOM optimizations achieved an approximately 30% improvement in overall rendering performance and significantly reduced browser memory consumption.

Component-Based i18n & End-to-End TypeScript Strictness

Operating in multinational energy markets required efficient localization and uncompromising code reliability:

• Component-based localization: The legacy i18n setup sent massive translation bundles on every request. We restructured localization into a component-based model where translation namespaces are lazy-loaded only when a specific feature or modal is active, keeping initial network transfer lean.
• Strict TypeScript safety: Resolved deep TypeScript type errors and enforced strict type contracts across raw sensor payloads, configuration schemas, and UI state models. This eliminated runtime type coercion errors and guaranteed contract consistency between backend data streams and UI visualization components.

Key Engineering Outcomes

• ~30% rendering performance gain: State normalization and memoized selectors eliminated UI stuttering across continuous live telemetry updates.
• Virtualization at scale: react-window integration enabled seamless navigation through dense time-series telemetry and diagnostic logs without DOM bloat.
• 73+ page cohesive architecture: A feature-based structure with a custom Radix UI design system delivered maintainable consistency across complex industrial workflows.
• Zero runtime type crashes: End-to-end TypeScript strictness ensured rock-solid stability for mission-critical clean-energy control operations.