Tous les projets
P

Provision Energie

SaaS

Micro-SaaS pour piloter son énergie et ses provisions.

Rôle
Conception & développement
Catégorie
SaaS
Stack principale
Next.js · Supabase · Recharts
01Le contexte

Un propriétaire face à une facture d'énergie n'a aucun moyen simple de répondre à la seule question qui compte : est-ce que ces travaux vont se rembourser, et en combien de temps ? L'information existe, éparpillée entre des barèmes officiels, des simulateurs partiels et des devis. Personne ne la relie.

02Le problème et la réponse
Le problème

Les particuliers peinent à estimer leur PEB, à anticiper leurs dépenses énergétiques et à savoir si des travaux sont réellement rentables.

La solution

Un micro-SaaS regroupant plusieurs outils : calcul du PEB, analyse des dépenses, simulation des provisions d'énergie futures et rentabilité directe des aménagements sur les provisions mensuelles.

03Le produit, écran par écran
Maquette jouable
provision-energie.app/tableau-de-bord

Performance du logement

Maison 4 façades · 1978 · 180 m²

Échelle PEB : A → G · position estimée
Ce qui pèse le plus
ToitureIsolation faible
ChâssisSimple vitrage
ChauffageChaudière gaz 2004

L'incertitude est affichée, pas masquée : un simulateur qui promet trop perd sa crédibilité au premier écart.

01 / 03 · Calcul PEB

Le point d'entrée : où se situe le logement. Un score dans l'absolu ne parle à personne. C'est ce qu'on en fait ensuite qui compte.

Maquette interactive reconstituée pour ce portfolio. Les valeurs affichées illustrent l'interface — ce ne sont pas des chiffres de production.

04Les partis pris
01

Relier le calcul à la facture réelle

Un score PEB dans l'absolu ne parle à personne. Traduit en euros par mois sur la provision, il devient une décision.

02

Des outils séparés, une seule logique

Calcul, analyse, simulation et rentabilité sont quatre écrans distincts qui partagent le même modèle sous-jacent, pas quatre calculatrices indépendantes.

03

Rendre le résultat lisible

Des graphiques épurés, une échelle honnête, et l'incertitude affichée plutôt que masquée. Un simulateur qui promet trop perd sa crédibilité au premier écart.

05La planche de design
// palette
#F59E0B
#EA580C
#0A0A0C
#F5F5F7
// échelle typographique
AaDisplay · 600
AaTitre · 550
AaCorps · 400
// partis pris visuels
  • 01L'ambre plutôt que le rouge : on parle d'une décision d'investissement, pas d'une alerte. La couleur ne doit pas faire peur.
  • 02Les graphiques n'ont ni ombre ni dégradé décoratif. Sur un simulateur financier, chaque effet visuel est un soupçon de manipulation.
  • 03L'incertitude est dessinée, pas cachée : les fourchettes apparaissent visuellement plutôt qu'en note de bas de page.
  • 04Tout résultat est exprimé en euros par mois. C'est la seule unité qu'un propriétaire manipule vraiment.
06Pourquoi cette stack
Supabase
Chaque utilisateur retrouve ses simulations. L'authentification et la base arrivent ensemble.
Recharts
Des graphiques déclaratifs en React, cohérents avec le reste de l'interface, sans embarquer une bibliothèque de visualisation entière.
TypeScript
Des calculs financiers non typés sont une bombe à retardement. Chaque unité (kWh, euro, année) est un type distinct.
Next.js
Les routes serveur gardent la logique de calcul côté serveur, hors de portée du navigateur.
Next.jsSupabaseRechartsTypeScript

Un projet du même genre ?

Décrivez-moi votre situation. Je vous dis ce qui est réaliste,
dans quel ordre, et ce que je ferais différemment.

amauryandrade1998@gmail.com