EnergyCheck

Web

Your energy rating, your bill and your Walloon grants, in three minutes and without an expert.

View the siteprovision-energie.vercel.app
Role
Product, calculation engine & development
Category
Web
Core stack
Next.js · TypeScript · Three.js
01The context

In Wallonia, six homes out of ten are rated E, F or G. A homeowner who wants to renovate faces a paid energy certificate that takes weeks, quotes they cannot compare, and Renolution grants they never claim because they do not know they exist. The energy seller has one answer, the installer another, and nobody has a neutral figure.

02Problem, solution, outcome
The problem

A homeowner has no way, without an expert and without jargon, to know where their home stands, how much it loses every month, and which work to start with.

The solution

A free web app with no account that rebuilds the Walloon energy-rating calculation from a three-minute questionnaire, then prices every loss in euros per month, ranks the work by payback and deducts the regional grants. Four tools share one model: energy diagnosis, footprint score, dashboard and profitability calculator.

What it changes

A homeowner gets an estimate of their energy rating, the monthly cost of each source of loss and the order to tackle the works, with no expert, no account and no jargon. What used to need a paid appointment now takes three minutes.

03The product, screen by screen
Live site captures
Open the site
provision-energie.vercel.app
The home page : One question, one button. On the right, the annotated house changes with the question asked (rating, footprint, bill, payback), and under it the day's reference prices: the FPS Economy official tariff for heating oil and petrol, the CREG average for electricity and gas, each with its date.
01 / 08 · The home page

One question, one button. On the right, the annotated house changes with the question asked (rating, footprint, bill, payback), and under it the day's reference prices: the FPS Economy official tariff for heating oil and petrol, the CREG average for electricity and gas, each with its date.

Screenshots of the production site, taken as is. Prices and lead times shown are the site's at capture time.

04The calls I made
01

The real calculation, not a quiz

The engine follows the Walloon energy-rating method: net heat needs by construction period, U-values for walls, roof and glazing, heating efficiency, primary energy factor for electricity. It is calibrated on a real certificate. The result reads in kWh/m².year, the official unit, flagged as estimated, not certified.

02

A leaking roof ruins the insulation

The questionnaire asks about the roof's condition, not only its insulation. Wet mineral wool loses most of its insulating power, so the model degrades the roof coefficient according to the declared state. That is what lets the diagnosis say start with the roof instead of reciting a generic list.

03

See where the money escapes

The result is not a table: it is the house as a 3D wireframe, each surface coloured by its condition, energy flows moving through it, and a click on a zone opening its diagnosis. The same number on a model you can rotate sticks; in a table cell, it is forgotten.

04

Everything in euros per month

Every loss is translated into kWh lost, monthly cost and possible saving, with the price range for the work and the payback time. An energy class does not trigger renovation; 67 euros a month going through the roof does.

05

Official prices, updated by hand

The reference prices shown everywhere come from the FPS Economy's official tariff for heating oil and petrol, and from the CREG residential average for electricity and gas, each with its validity date. No simulated live feed: a wrong figure with a date on it is worse than no figure.

06

Alice and Bob, over twenty years

To convince people to act, the site does not promise: it compares. Two neighbours with the same house, one renovates, the other waits, and the curve of cumulative spending over twenty years with energy inflation. The crossing point is the only argument the site allows itself.

05The design board
// palette
#2F6B4F
#E2622F
#0A0A0C
#F5F5F7
// type scale
AaDisplay · 600
AaHeading · 550
AaBody · 400
// visual calls
  • 01The brand green for action and good condition, orange for what needs fixing, red reserved for critical. Three colours, always the same meaning, from the energy gauge to the 3D house.
  • 02Charts carry no shadow and no decorative gradient. On a financial simulator, every visual flourish reads as a hint of manipulation.
  • 03Every figure carries its source and validity date, right beside it and not in a footnote: FPS Economy, CREG, Renolution.
  • 04Every result is expressed in euros per month. It's the only unit a homeowner actually handles.
06Why this stack
Next.js
App Router with server-rendered content pages for search (understand, solutions, real cases) and fully client-side tools: the energy calculation runs in the browser, with no account and no data sent.
TypeScript
The energy engine is a pure service with no dependency on the UI, typed end to end: construction periods, heating types, roof conditions are closed unions. You cannot pass an efficiency where a U-value is expected, and the same engine feeds the diagnosis, the 3D house and the report.
Three.js
The 3D thermal house is built as a wireframe from the questionnaire answers: the number of facades, the roof type and each surface's condition change the geometry and colours. Light, mouse-rotated, clickable zone by zone.
Recharts
Price history since 2000 with the key events, bill breakdown, twenty-year payback curves: declarative React charts, with no shadow or decorative gradient, because on a financial simulator every visual flourish looks like manipulation.
Supabase
PostgreSQL only for what must outlive the browser: contact requests and the company directory under construction. Saved consumption profiles stay in the visitor's browser: no account, so no personal data stored server-side.
Tailwind CSS
Two complete themes, a cream default and a slate dark mode, driven by root variables. Dark mode is the same file with different values, not a second stylesheet to maintain.
Next.jsTypeScriptThree.jsRechartsSupabaseTailwind CSSVercel

Something similar in mind?

Describe your situation. I'll tell you what's realistic,
in what order, and what I'd do differently.

contact@amauryandrade.com