Études de cas / 03 — LaboDental

LaboDental — Portfolio cinéma pour 35 ans d’expertise.

Vitrine premium pour Atchapa Georges, prothésiste dentaire expert et fondateur du Syndicat des Prothésistes de La Réunion. Un site one-page cyber-luxe doublé d’un panneau d’administration où chaque mot, chaque chiffre et chaque image se modifie en live.

Client: Atchapa Georges (prothésiste dentaire · expert judiciaire · 974)
Période: 2026
Rôle: Conception, design, développement, déploiement, formation
Stack: Next.js 16 (App Router, RSC, ISR) · TypeScript strict · Tailwind v4 · Motion v12 · Supabase (Postgres + Storage + Auth) · Vercel · Cloudflare DNS

Voir le site live ↗ www.georges-atchapa.com · En production

Méthode OODA — Observation, Orientation, Décision, Action

Atchapa Georges, prothésiste depuis plus de 35 ans à La Réunion, expert judiciaire agréé et fondateur du syndicat local, n’avait aucune présence en ligne. Ses clients institutionnels (CPAM, ARS, cabinets dentaires), ses pairs et ses étudiants devaient le rencontrer pour comprendre son travail.

Le risque : une expertise rare reste invisible. Les rares portfolios de prothésistes dentaires en France sont des templates Wix sans identité, sans hiérarchie, sans capacité d’éditorialiser une carrière. Le sujet appelait l’inverse : un objet web qui transmet le métier — précision, esthétique, fiabilité — avant d’en parler.

Quatre partis pris ont structuré le projet :

One-page éditoriale plutôt que multi-pages — l’histoire d’un homme se raconte en une lecture, pas en une arborescence.
Direction artistique cyber-luxe (palette « atelier de précision » : porcelaine, émail, or, bleu et rouge néon) pour traduire visuellement le métier sans tomber dans le médical générique.
CMS complet sur mesure — règle absolue : aucun élément hardcodé. Chaque texte, photo, chiffre, lien, ordre de section et couleur de marque est éditable depuis un panneau d’administration que le client (60+ ans, peu technique) peut tenir seul.
Infrastructure managée (Vercel + Supabase + Cloudflare) plutôt que self-hosted — pour un client qui ne doit jamais avoir à toucher à de l’infra.

Next.js 16 App Router avec ISR 60 s sur la page publique : rendu serveur depuis Supabase, cache CDN global, revalidation déclenchée à chaque sauvegarde admin.
Modèle de contenu jsonb dans une table content (section, data) + deux tables annexes (sections_config pour l’ordre / visibilité, nav_items pour le menu). RLS publique en lecture, authentifiée en écriture.
15 éditeurs d’admin typés strictement (un par section + Navbar / Footer / Navigation / Ordre / Design). Drag-and-drop pour réordonner, drag-drop upload pour les images et PDFs (Supabase Storage), revalidation ISR optimiste.
Live theming via composant ThemeStyle server-side qui injecte les tokens de design (couleurs primaire, secondaire, fond, image de fond, mode de style) en variables CSS au runtime — pas de rebuild requis.
Hero cinématographique : sol perspective 3D, brumes volumétriques bleue / rouge avec mix-blend-mode: screen, raie de lumière rouge sur le bord droit, lab-beams diagonaux subtils. Tous les calques sont aria-hidden et respectent prefers-reduced-motion.
A11y first : skip-link, :focus-visible universel, contraste WCAG AA validé, navigation clavier complète, IntersectionObserver pour l’indicateur de section active, chiffres tabulaires sur les compteurs.

Livré en moins de 24 h de conception à la mise en production : 10 sections publiques (Hero, Spécialités, Syndicat, Parcours, Réalisations, Documents, À propos, Vie professionnelle, Famille, Contact), 15 éditeurs admin, déployé sur www.georges-atchapa.com avec SSL Let’s Encrypt auto-renouvelé.

Sécurité durcie : RLS Supabase, headers Vercel stricts (X-Frame-Options, Permissions-Policy), audit /security-review passé avec 0 finding ouvert (XSS via <script> et CSS injection via bgImageUrl tous deux fermés).

Branding pro : favicon AG dans l’onglet du navigateur, apple-touch-icon pour l’écran d’accueil iOS, Open Graph image dynamique générée server-side (preview WhatsApp / LinkedIn rendue depuis le contenu courant).

Métriques de prod

HTTP 200 < 2 s · ISR : 60 s · Coût mensuel : 0 € (free tier partout) · Champs éditables : 100 %

Captures

Deux écrans, un même soin.

À droite, le hero desktop : monogramme AG en néon bleu et rouge surplombant une dentition réaliste sur un sol perspective. Brumes volumétriques et raie de lumière au bord droit pour la profondeur cinéma. À gauche, la version mobile : même atmosphère, hiérarchie comprimée, CTA pleine largeur.

Vue mobile de LaboDental — hero avec titre gradient, deux CTA et l'image néon AG dentition en arrière-plan. — 01 / MOBILE · Hero compressé

Vue desktop de LaboDental — navbar transparente, hero double colonne avec titre gradient, monogramme AG en néon et dentition réaliste sur sol perspective. — 02 / DESKTOP · Hero cinématographique

www.georges-atchapa.com · En production

Ce que ce projet démontre.

Direction artistique au service d’un métier. Le cyber-luxe « atelier de précision » n’est pas une déco — il traduit fidèlement le travail d’un prothésiste : précision millimétrique, matériaux nobles, lumière contrôlée. Le design ne décore pas, il raconte.
CMS sans compromis. Un client de 60+ ans qui n’a jamais touché à du code peut renommer sa marque, changer ses couleurs primaire et secondaire, ajouter une réalisation avec photo, modifier un PDF restreint, réordonner ses sections — tout depuis une interface qu’il atteint en deux clics.
Performance par construction. RSC + ISR + Vercel CDN + Supabase Postgres en région EU-Paris donnent un TTFB < 200 ms en Europe, et le live theming via CSS variables n’ajoute pas un seul appel client supplémentaire.
Sécurité à la racine. Sandbox RLS Supabase, validation stricte des couleurs et URLs server-side, escape automatique React, audit complet avant production. Le client peut publier sans risquer une injection.
Capacité à livrer vite et juste. De la specification au domaine en production, en moins d’une journée — sans dette, sans raccourci, avec doc et passage de relais propres.

Étude de cas suivante : BeeruAcademy — Plateforme SaaS dentaire multi-tenant

← Retour aux études de cas