AMP: energy analytics platform

Overview

Auren serves energy self-generation clients: companies that co-own generation parks and need to follow how their assets and contracts are performing. AMP is the authenticated platform where these clients look at generation, availability and curtailment dashboards fed by the data lake, plus a schedule integrated with Google Calendar and industry content.

Challenge

The project started from an almost empty repository, with a tight deadline for the MVP. There was a lot of data coming from the data lake, several kinds of charts, and presentation rules (aggregating, comparing periods, formatting units) that tend to leak into every page. The early decisions had to let us ship fast without leaving a codebase that would be painful to extend as new modules came in.

My role

Defined the frontend architecture and stack from scratch and structured the app around MVVM.
Designed and documented a React boilerplate (layers, linting, testing) that other client applications adopted, and guided the Vue-to-React migrations through code review.
Led the Design System and shared SDK initiatives, both published as private npm packages.
Set up CI/CD with GitHub Actions and made code review a technical gate, including AI-assisted review in the workflow.
Work with backend and product on technical decisions, including API design, and mentor two junior developers.

Architecture

MVVM with clear boundaries

Each screen has three parts. The view holds React components with no business rules. The view model is a hook that coordinates data, UI state and presentation rules. The data layer talks to the API and normalizes responses. Components get data that is ready to render, and indicator logic lives outside JSX, where it is easier to test and reuse.

Server state kept apart from UI state

API data lives in TanStack Query, which handles caching, deduplication and revalidation. Local state only covers what belongs to the interface, like filters, the selected period and tabs. That avoids copying API responses into a global store and cuts repeated requests when users move between dashboards.

Performance on chart-heavy screens

Routes are code-split and lazy loaded, and re-renders on chart screens are tightly controlled, since re-rendering Recharts for no reason gets expensive as the number of data points grows.

Boilerplate, Design System and SDK

AMP's structure became a documented boilerplate, with two versioned private npm packages around it. The Design System holds components, visual patterns and shared behavior. The SDK holds the HTTP client, authentication flows, formatters, data lake integration and API abstractions. A new application starts from the same base instead of rebuilding integrations and infrastructure.

Key decisions & trade-offs

Vite over Next.js

AMP is an authenticated app with no SEO or SSR requirements. Next.js would have added a server to run and a rendering model the product would not use. Vite gave us a SPA that is simpler to build and operate. We gave up server rendering, which this product did not need.

MVVM from day one

Splitting view models from views means more files and some ceremony while the deadline is tight. The bet was that it would pay off as new modules arrived. It did, once the same structure became the boilerplate for other applications.

Sticking with Recharts

We evaluated alternatives together with UX. Recharts covered the charts the product needed with less complexity. More powerful libraries would have brought a learning curve and customization the requirements did not call for.

Results

MVP shipped in about 3 months, starting from an empty repository.
The boilerplate became the base for 4 client applications: 2 new ones and 2 migrated from Vue.
Design System and SDK in use across the applications, cutting duplicated components and integrations between teams.
Features planned for phase two, such as document management and industry news, shipped early.
Frontend technical reference for my team and for other teams at the client.