Générateur de documents médicaux dynamiques

Générateur de documents médicaux dynamiques

Next.js 13Tanstack QueryLayout Engine

Contexte

Dans le cadre d'une plateforme médicale, chaque ressource patient pouvait être transformée en document imprimable (que ce soit un rapport d’analyse, un compte-rendu ou un bilan).

Ces documents devaient :

  • 🖌️ Suivre un design strict défini sur Figma
  • 📐 Supporter différents formats (A4, A3, etc.)
  • 📏 Rester compatibles avec une taille de contenu variable.

L’application Next.js que j’ai développée s’intégrait dans une chaîne de génération plus large, avec un rôle précis :

  1. Recevoir une requête avec les paramètres du document
  2. Récupérer les données associées à la ressource
  3. Générer une page web, ensuite capturée par Puppeteer pour produire le PDF final

Le défi technique

Respecter un design Figma pixel-perfect sur un format fixe, c’est une tâche classique.

En revanche, avec du contenu dynamique, les choses se compliquent. Sur papier, la page ne peut pas s’adapter automatiquement:

Débordement du contenu hors du document A4

Certaines sections pouvaient être très courtes ou très longues selon les données du patient.

Le vrai défi était de prévoir à l’avance quand le contenu allait dépasser l’espace disponible.

L'intuition seule ne suffit pas pour résoudre ce genre de problème. C’est un vrai défi d’ingénierie, nécessitant créativité et approche méthodique.

Ma solution : mesurer avant d'afficher

Le système utilise deux rendus en parallèle :

Le rendu fantôme

Le contenu est généré hors écran. Il sert de référentiel et donne les dimensions exactes du contenu avant toute mise en page :

Rendu invisible pour mesure du contenu

Le rendu final

Une fois les hauteurs connues, le contenu est réparti dans une ou plusieurs pages. Si une page est pleine, le reste du contenu est automatiquement placé sur la page suivante. Le processus se répète jusqu’à ce que tout soit correctement disposé. ✅

Rendu final du document

Points forts et contraintes

✅ Points forts

  • 📄 Compatible avec tout format de document (A3, A4, custom, ...).
  • 🖋️ Header et footer optionnels.
  • ⚡ Pages dynamiques optionnelles : on peut rester statique si le contenu est invariable.
  • 🔢 Support de la numérotation automatique, même pour les pages ajoutées dynamiquement.

⚠️ Contraintes

  • 🧩 Les éléments découpables doivent être enfants directs du conteneur.
  • 📏 Pour les espacer entre eux, on utilise obligatoirement du padding et non des marges.
💡 Pour garantir que ces contraintes soient respectées, j’ai mis en place :
  • Une documentation claire
  • Des conventions intégrées directement dans le code, via des composants spécialisés à utiliser sans réfléchir, pour que le système reste fiable même quand d’autres développeurs ajoutent du contenu.

Outil de productivité d'équipe : prévisualisation en temps réel

Pour faciliter le développement et les tests, j’ai développé une interface interne permettant de :

  • ✏️ Modifier les données patient du document en temps réel.
  • 👀 Visualiser immédiatement les changements dans le rendu final.
Prévisualisation en temps réel du document

Test rapide de différents scénarios pour l’équipe, et aperçu direct pour les stakeholders. ✅

Bilan

En front, on cherche souvent à rendre les interfaces toujours plus adaptatives.

ici, c’était l’inverse : contraindre du dynamique dans du fixe.

Ce projet m'a appris à :

  • 🔄 Adapter mon approche au problème plutôt que de suivre des réflexes
  • 🔗 Comprendre comment une brique s’intègre dans une chaîne d’infra complète
  • 🧩 Concevoir des systèmes que les autres utilisent sans avoir à les comprendre