Aller au contenu
Site & catalogue technique · client2025 - aujourd'huien production

BioInteraction DZ

Le catalogue de référence du diagnostic in vitro en Algérie - 418 réactifs, 19 analyseurs, deux langues.

Signal reçu

Un distributeur de réactifs et d'équipements de laboratoire dont tout le catalogue vivait dans des PDF envoyés par email. Les biologistes ne trouvaient pas les références, l'équipe commerciale renvoyait les mêmes fiches techniques dix fois par semaine, et Google ne connaissait pas l'entreprise.

Signal émis

Un catalogue technique complet et indexable, avec fiches produit, notices téléchargeables, hubs éditoriaux par marque, blog et espace client. Servi en HTML statique depuis un hébergement mutualisé - donc rapide et increvable - avec Supabase pour tout ce qui bouge.

Résultats

418
références réactifs
19
analyseurs
273
fiches traduites
2
langues

Démonstration interactive

Un catalogue réellement interrogeable

Cherchez une référence ou un analyte. Le filtre est exactement celui du site en production.

24 résultats sur 24

  • XSYS0001ALB 440AlbuminERBA · 2000 tests
  • XSYS0002ALP 110Alkaline PhosphataseERBA · 500 tests
  • XSYS0003AMY 110Alpha AmylaseERBA · 500 tests
  • REG00065EC cartridge XSERBA · 250 Tests/2 mois
  • REG00058EC cartridge SERBA · 500 Tests/3 mois
  • REG00056EC cartridge MERBA · 1000 Tests/3 mois
  • HEM00028Erba H360 DilERBA · 20 L
  • HEM00029Erba H360 LyseERBA · 500 mL
  • HEM00023ELite H CleanERBA · 50 mL
  • EHL00001ERBA Protime TPERBA · 4x5 mL
  • EHL00003ERBA Actime TCKERBA · 6x5 mL
  • EHL00005ERBA Thrombin Reagent FIBRINOGENEERBA · 2x5 mL
  • URPH0028DekaPHAN LauraLeucocytes, Nitrite, pH, Protéine, Glucose, Urobilinogène, BERBA · 100 bandelettes
  • URPH0029MicroalbuPHAN LAURADensité, Microalbumine, Créatinine, CPERBA · 50 bandelettes
  • REG00053UrinormContrôleERBA · 2x(3x15 mL)
  • 3002Medizym Anti TPOGeneric Assays · 96 Tests
  • 3102Medizym Anti TgGeneric Assays · 96 Tests
  • 3505Medizym TRA humanGeneric Assays · 96 Tests
  • MY00405BioCLIA-SubstrateHOB Biotech · 4 X 600 Tests
  • MY01312Conjugate and Microparticle Reagent KitHOB Biotech · 150 Tests
  • MY01315Calibrator and Control SetHOB Biotech · CAL:0.5mLx7; CON:1mLx2
  • TOP-WBGMTOXOPLASMA WB IgG-IgMLDBIO · 12 / 24 / 96 tests
  • TXA-WBGTOXOCARA WB IgGLDBIO · 12 / 24 / 96 tests
  • LES-WBGLEISHMANIA WB IgGLDBIO · 12 / 24 / 96 tests

La recherche porte sur trois champs à la fois : la référence, le libellé court et la description longue. Tapez XSYS pour la référence, H360 pour le libellé, créatinine pour la description. La marque n'est pas dans le texte cherché : sur le site en production, c'est une facette à part, au même titre que la catégorie.

Mécanisme reconstruit pour ce site, ce n'est pas une capture du produit. Règle reprise de src/components/catalogue/CatalogueClient.tsx. 24 références réelles du catalogue public, sur les 418 en ligne.

Flux de traitement

De l'interface jusqu'aux données

  1. Interface

    Deux groupes de routes - français à la racine, anglais sous /en/. Une couche src/views partagée évite de dupliquer la moindre logique entre les locales.

  2. Contenu typé

    Le catalogue est du TypeScript, pas une base : 418 entrées sur 21 sections, versionnées dans git, vérifiées par le compilateur, à coût runtime nul.

  3. Fonctions serveur

    Edge Functions Supabase avec une couche _shared : limitation de débit en token bucket, vérification de JWT, CORS, envoi d'email. Aucun secret dans le bundle.

  4. Livraison

    Export statique déployé en SFTP incrémental sur OVH, avec une configuration Apache portant redirections, en-têtes de sécurité et CSP.

Décisions d'ingénierie

Les choix qui méritent d'être défendus, et pourquoi

01

Un site statique n'est pas un site pauvre

Le projet a migré de Firebase + Vercel vers Supabase + hébergement mutualisé OVH, en export statique intégral. Cela supprime tout serveur applicatif à maintenir : il ne reste que du HTML, du CSS et du JavaScript. La contrepartie est réelle - plus aucune route API dans l'application - et c'est ce qui a rendu la migration intéressante : toute la logique serveur a dû être repensée en Edge Functions, avec une frontière beaucoup plus nette entre ce qui est public et ce qui ne l'est pas. Le déploiement est un script Node en SFTP incrémental. Le reste tient dans un .htaccess : redirections 301, forçage HTTPS, en-têtes de sécurité, et une réécriture qui corrige les chemins de prefetch de Next - le piège classique de l'export statique sur Apache.

  • next.config.ts
  • scripts/deploy-ovh.mjs
  • public/.htaccess
02

Le compilateur garantit qu'aucune traduction ne manque

Pas de librairie i18n. Le dictionnaire anglais dérive son type du dictionnaire français : une clé oubliée devient une erreur TypeScript au build, jamais une chaîne vide en production. Le même principe protège les URL - une seule fonction décide si une page est traduite, et elle conditionne à la fois les liens, le sélecteur de langue et le sitemap. Il est donc structurellement impossible d'annoncer une URL anglaise qui renverrait un 404. Le français reste à la racine du domaine : l'anglais s'ajoute sans casser une seule URL existante.

  • src/i18n/config.ts
  • src/i18n/index.ts
  • app/sitemap.ts
03

Une couche de sécurité qui a survécu à un changement de plateforme

La limitation de débit en token bucket écrite pour les routes Next a été portée telle quelle dans les Edge Functions Supabase, aux côtés de la vérification de JWT et du contrôle de rôle. C'est le test qui compte pour une brique dite réutilisable : elle a changé de runtime sans changer de forme. L'ordre de traitement d'une fonction reste le même - CORS, limitation, parsing, validation, authentification, action métier - et cet ordre n'est pas cosmétique : valider avant de limiter revient à offrir le coût du parsing à un attaquant.

  • supabase/functions/_shared/ratelimit.ts
  • supabase/functions/_shared/auth.ts
04

La traduction du catalogue est dérivée, pas recopiée

Traduire 418 fiches à la main garantit une divergence à la première mise à jour. Un script régénère le catalogue anglais par substitution via une table de traduction : la version anglaise est un produit de la française, pas une copie qui vieillit à côté. Le même pipeline produit les catalogues imprimables en PDF.

  • scripts/catalogue-i18n/build_en.py
  • scripts/catalogue-print-*.mjs
05

Des animations pilotées par le markup, zéro JavaScript par page

Un composant sans rendu, monté une seule fois dans le layout, observe le document et anime tout le site : révélations au scroll, compteurs animés, parallaxe lissée par interpolation. Il suffit d'ajouter une classe pour animer un élément. Un observateur de mutations reprend les nœuds ajoutés dynamiquement, et tout se nettoie au démontage.

  • src/components/RevealObserver.tsx

Pile technique

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind v4
  • Supabase
  • Edge Functions
  • OVH

Ce que ce projet démontre

Trois points à retenir

01

Un site statique n'est pas un site pauvre

Le projet a migré de Firebase + Vercel vers Supabase + hébergement mutualisé OVH, en export statique intégral.

02

Le compilateur garantit qu'aucune traduction ne manque

Pas de librairie i18n.

03

Une couche de sécurité qui a survécu à un changement de plateforme

La limitation de débit en token bucket écrite pour les routes Next a été portée telle quelle dans les Edge Functions Supabase, aux côtés de la vérification de JWT et du contrôle de rôle.

Un projet comparable ?

Ce dossier est la preuve des prestations suivantes