ABE MetaSystems · Prodigy & Hub

Context

ABE MetaSystems operates in collective self-consumption — a solar-energy model still being defined in law and pushed by the French state as part of the wider energy transition. Consumers and operators alike need clarity: what it is, why it matters, and what it costs.

Over two and a half years I owned the engagement end-to-end: co-shaping the roadmap with the CEO, designing in Figma, and shipping every layer from the corporate website to Prodigy, ABE's operational platform.

Corporate website — abe-metasystems.com

I built the site from scratch in Next.js — not a template hand-off, but the whole product surface: brand, content, interactive tools, commercial framing and legal pages.

Brand & visual identity

The visual charter was shaped in close collaboration with the CEO. The goal was a site that felt like him and matched how he sees his product — not a generic energy template. We iterated in Figma on typography, colour, motion and page rhythm until the public face aligned with his vision before a single production component shipped.

Typography

Display · Inter 700

Crafted interfaces, delivered on time

UI body · Inter 400

Building products that work well for the people who use them every day.

UI emphasis · Inter 600

OVERVIEW · PROCESS · DELIVERY

Data · Inter 500 · tabular nums

3 missions · 24 months · 100%

Colour

Primary

#DC2626

--primary · hsl(0 72.2% 50.6%)

Signature ABE red — hero backdrop, CTAs, links and progress accents.

Background

#FAFAFA

--background · hsl(0 0% 98%)

Light canvas for product and offer pages.

Foreground

#1A1A1A

--foreground · hsl(0 0% 10%)

Primary text on light surfaces.

Muted

#737373

--muted-foreground · hsl(0 0% 45%)

Secondary copy, footer links and supporting labels.

Surface

#FFFFFF

--card · hsl(0 0% 100%)

Cards, panels and form fields on the light theme.

Ink

#000000

Footer / cinematic frames

Deep black for footer bands and high-contrast editorial sections.

Shape & motion

• Radius

  0.5rem base (--radius) — rounded cards, inputs and chips consistent with shadcn/ui primitives.

• Hero rhythm

  Full-bleed primary-red loading frame, bold white display type with soft shadow — brand energy before first navigation.

• Scroll

  Lenis smooth scroll + Framer Motion page transitions; motion kept purposeful, not decorative.

Savings simulator

The site includes an interactive savings simulator. I designed the underlying algorithm to translate ABE's product logic into numbers visitors can grasp — helping educate and reassure consumers entering a regulatory and commercial landscape that is still new to most households. The simulator turns abstract policy (collective self-consumption, solar self-production) into tangible projected savings.

Commercial framing & growth

Beyond engineering, I worked with the CEO to define tariffs and service offers from his cost structure and business plan — pricing logic wired into the site so prospects see consistent, defensible numbers. That work supported ABE's growth narrative and fundraising preparation: the public site doubles as a credible commercial front for investors and partners, not only end consumers.

Legal & compliance

Collective self-consumption sits at the intersection of state-driven regulation and B2B operations. A substantial part of the corporate build was legal content: terms, disclosures and pages aligned with the regulatory context so ABE could communicate confidently within a framework still evolving in law.

100

Performance

97

Accessibility

100

Best Practices

100

SEO

Stack: Next.js, TypeScript, Tailwind CSS, Framer Motion, Lenis, Radix UI primitives.

Prodigy — B2B / B2C operations platform

On the other side of the corporate site sits Prodigy — ABE's B2B and B2C application for running collective self-consumption day to day. Collectivities, enterprises and operators use it to manage every operation in a community: from onboarding households to billing the energy they share.

The platform connects Linky smart meters for individual consumers — whether or not they are fully equipped with the ABE ecosystem — so operators can supervise real consumption and production data across a whole collective.

From POC to production

Before the full build, I shipped an Angular proof of concept with the CEO to validate the product need and vision — core flows, operator vs household views, and the value of tying Linky data to collective operations. Once the direction was proven, Prodigy was rebuilt and scaled in Next.js for SSR, performance and long-term maintainability.

Operator surface (B2B)

Consumer surface (B2C)

Households get their own view inside the same product:

• Consumption — what they draw from the grid and from the collective, down to per-device breakdown where metering allows.
• Production — output from solar panels or solar carports delivered and operated by ABE.
• Optimisation — visibility into self-production vs consumption so residents can adjust behaviour and get more from their installation.
• Geospatial context — collective sites and installations mapped with Google Maps and OpenLayers so operators and users can situate production and consumption in space.

SSR, state & real-time

Prodigy carries meaningful SSR complexity in Next.js — tenant-scoped routes, role-aware pages and data that must render correctly on first paint without leaking context across collectives. Client state is organised in Zustand stores; live equipment and meter flows arrive over WebSockets and MQTT, with Grafana for operational monitoring behind the scenes.

GDPR & legal compliance

The product handles customers' electricity consumption data — among the most sensitive datasets an energy operator holds. Compliance was not a footer checkbox:

• Lawful basis & consent — enrolment flows and in-product copy aligned with why data is collected and how long it is kept.
• Data minimisation — household views scoped to what each role needs; operator access bounded by tenant and address.
• Retention & subject rights — architecture designed around export and deletion expectations, not retrofitted after launch.
• Legal pages & disclosures — privacy policy, terms and regulatory framing consistent with the corporate site and the ACC context.

Security posture

Security had to be visible and reassuring to operators signing up collectivities and households sharing meter data:

Delivery

• PostgreSQL + Prisma as the persistence layer for multi-tenant entities, meter history and billing artefacts.
• CEO-aligned roadmap and Figma validation before sprints; releases orchestrated through ABE Hub (see below).

Stack: Next.js, TypeScript, Tailwind CSS, Zustand, PostgreSQL, Prisma, WebSocket, MQTT, Grafana, Google Maps, OpenLayers, Docker · POC: Angular.

ABE Hub — licensing, billing & platform control

The third product is ABE Hub — a full B2B control plane for ABE itself. Where Prodigy serves collectivities and households, Hub is how ABE licenses Prodigy, bills end clients and keeps the whole platform economically viable at the infrastructure layer.

ABE's model includes revenue on energy resale alongside software — so billing, licensing and delivery accuracy are not back-office nice-to-haves; they directly affect margin.

Hub centralises every application in the ABE ecosystem:

Automated delivery pipeline

Hub is paired with CI that generates and configures applications automatically — container images, env wiring and release artefacts produced from defined templates rather than one-off ops runbooks.

Stack: Next.js, TypeScript, Zustand, Docker, Kubernetes, automated CI for app generation and configuration.

Impact

ABE MetaSystems went from needing an external agency for every web touchpoint to owning a live corporate site, Prodigy (GDPR-aware B2B/B2C operations, Angular POC → Next.js production) and ABE Hub (licensing, client billing, plugin/config injection and infra-aware automated delivery). One product-minded engineer, in the room with the CEO from brand charter through platform economics and shipped code.