Projet 01 / 04
Web app · Dashboard & vitrine · en production

Atelier
Delphine.

Une fleuriste avait besoin de savoir si son activité était rentable. Pas d'un joli site : d'une réponse. Un tableau de bord métier doublé d'une vitrine, livré en production pour suivre ventes et marges.

Scope Conception · Dev · Prod
Client Atelier Delphine
Stack Next · Drizzle · Neon · Clerk · R2
Année 2026
Tableau de bord Atelier Delphine
app privée · /tableau-de-bord Fig. 01 — le tableau de bord, vue desktop
(01)

Le problème.

La vraie difficulté n'était pas le code : c'était de rendre une intuition de métier lisible en quelques chiffres.

Delphine sait, au feeling, quand une semaine a été bonne. Mais « au feeling » ne se relit pas, ne se compare pas, et ne dit pas quel type de composition la fait vivre. Le produit devait traduire ce flair en quelques chiffres qu'elle relit seule : sans tableur, sans moi, sans formation. Une vitrine pour ses clients d'un côté, son tableau de bord de l'autre, sur la même base.

(02)

L'approche.

Trois décisions techniques. Le pourquoi avant le comment : c'est ici que se juge l'ingénierie.

D1 Drizzle · Neon

Calculer la rentabilité côté serveur, jamais dans le navigateur.

Une seule source de vérité. Les agrégats (Drizzle + Neon) sont calculés une fois, donc Delphine voit le même chiffre sur tous ses appareils, et un client malin ne peut pas bricoler les marges depuis la console.

D2 data model

Modéliser la marge par composition, pas par commande.

Le modèle mental de Delphine, c'est le bouquet : « celui-là me rapporte, celui-là me coûte ». Coller le schéma de données à sa façon de penser a rendu l'écran lisible du premier coup. La donnée parle sa langue, pas celle d'un logiciel de caisse.

D3 UX · R2 · Clerk

Un écran qui répond à la question, pas un dashboard de vingt widgets.

Elle posait une question : rentable ou pas ? L'interface y répond en haut, en une phrase et un chiffre ; le détail vient seulement si on le cherche. Accès vérifié à chaque requête (Clerk), pièces jointes isolées sur R2. C'est de la mise en vitrine : on montre l'essentiel d'abord, le reste se mérite.

(03)

Le résultat.

Avant

Un cahier, un tableur ouvert deux fois par an, beaucoup d'intuition. « Est-ce que ça vaut le coup ? » restait sans chiffre.

Après

Un chiffre qu'elle relit chaque dimanche soir, en deux minutes, sur son téléphone. La marge par composition est devenue une décision, pas une devinette.

Testé avec Playwright sur le parcours qui compte : saisir une commande → voir la marge mise à jour. Surveillé en prod avec Sentry : je vois une erreur avant que Delphine ne la rencontre. Le produit tient sans moi.

Le produit, en vrai.

Pas des maquettes : l'application en production, capturée via Playwright avec des données de démo.
Page ventes — total du mois, ventes par type de client, statut de paiement
Page ventes — total du mois, ventes par type de client, statut de paiement
Fig. 02 — /ventes, filtrer par client ou paiement
Page compositions — coût, prix conseillé, bénéfice et ventes par création florale
Page compositions — coût, prix conseillé, bénéfice et ventes par création florale
Fig. 03 — /compositions, coût, prix, bénéfice
Page récap mensuel — synthèse imprimable du mois
Page récap mensuel — synthèse imprimable du mois
Fig. 04 — /recap-mensuel, synthèse imprimable
Tableau de bord en version mobile
Responsive

La même réponse, dans la poche.

Le dashboard existe aussi en mobile. Delphine relit ses chiffres sans être devant un ordinateur : solde de la période, ventes payées, commandes à préparer, en quelques secondes le dimanche soir.

Projet suivant · 02 / 04
PaperVault →
Me contacter
© 2026 Nhat-Quan Ho Nguyen · Product builder full-stack Ce site : Astro · statique · zéro JS inutile. Mes apps : Next. L'outil suit le besoin.