Portail consultant sorti du no-code 🧾

Contexte

L'espace consultant d'une solution de portage salarial existait en no-code : un site Webflow dans lequel les écrans, la logique métier et les appels réseau vivaient sous forme de blocs de code embarqués dans les pages. Chaque évolution passait par l'éditeur, et le portail dépendait du CDN de la plateforme pour ses assets.

La mission : reconstruire ce portail en application Next.js maintenable, à iso-fonctionnalités, sans régression et sans coupure pour les consultants déjà connectés. Projet mené pendant mon stage IA & Automatisation chez Café Crème.

Fonctionnalités clés

• Hub consultant en cinq rubriques : documents (visualisation du PDF en un clic), revenus mensuels et cumuls annuels avec sélecteur d'année, accès aux déclarations, informations et missions, suivi de la situation d'onboarding avec barre de progression.
• CRA & Factures : calendrier interactif de jours ouvrés (week-ends exclus automatiquement, compteur en temps réel, tout sélectionner / tout désélectionner), champ astreinte, upload du CRA signé par le client, dépôt de la facture débloqué une fois le CRA validé, historique avec motif de refus visible.
• Brouillon de CRA persistant : la saisie en cours est sauvegardée localement par consultant et par mois, et un bandeau propose de reprendre la déclaration au retour.
• Aperçu du fichier joint avant envoi : image affichée directement, première page d'un PDF rendue dans le navigateur.
• Notes de frais : deux types de dépenses (notes classiques et frais de siège pour le télétravail), contrôle des champs saisis face au justificatif déposé, statistiques et historique par type.
• Session unique partagée par les trois espaces : un seul login donne accès à l'ensemble du portail.
• Cache stale-while-revalidate, error boundaries par route, barre de progression de navigation.

Approche technique

La contrainte de départ était de ne rien casser : le backend n'appartient pas à ce dépôt (des endpoints existants, non modifiés) et le contrat d'API devait être préservé au caractère près, y compris ses règles implicites (pas d'en-tête Content-Type sur les POST, sous peine de déclencher un preflight CORS que le backend ne gère pas). J'ai donc relu la logique d'origine et l'ai reproduite fidèlement : les comparateurs de vérification des justificatifs (fournisseur en correspondance partielle, date couvrant une vingtaine de formats, montant exact ou à ±5 %), l'ouverture de document (fetchDoc) qui ouvre l'onglet avant l'appel réseau pour ne pas se faire bloquer par le navigateur puis convertit le base64 en Blob, et le pattern de cache local avec son préfixe et son TTL de cinq minutes.

Le front est en Next.js 14 (App Router), React 18 côté client, JavaScript, Tailwind CSS et CSS modules pour les écrans à reproduire au pixel. Les appels réseau passent par un wrapper autour de fetch : timeout de 30 secondes via AbortController et classification des erreurs (timeout, hors ligne, réponse illisible, réseau) pour afficher un message compréhensible plutôt qu'une erreur brute. Un hook stale-while-revalidate affiche les données en cache au montage puis les remplace au retour du réseau, en conservant l'affichage si l'appel échoue. PDF.js et Tesseract.js sont chargés à la demande, seulement quand un fichier est joint, pour ne pas alourdir le bundle initial. Le logo et les assets sont servis par l'application : la dépendance au CDN Webflow a disparu.

Le point le plus délicat a été la session. Les trois pages partagent une seule clé de stockage, exposée derrière deux API sémantiques (côté portail, côté notes de frais) pour que le code reste lisible et que les backends puissent diverger plus tard sans toucher aux composants. Une fonction de migration s'exécute au premier accès : elle détecte les anciennes clés issues des versions précédentes, reconstruit la session courante à partir de la première valide trouvée, puis nettoie les clés obsolètes. L'objectif était que personne ne soit déconnecté au moment de la bascule. Le reste du filet de sécurité tient dans les error boundaries par route (plus un filet global au-dessus du layout racine, avec ses propres styles inline au cas où le CSS lui-même n'aurait pas chargé) et une barre de progression déclenchée à l'interception des clics internes. Hébergement sur Vercel.

Résultats

Le portail est reconstruit à iso-fonctionnalités : les trois espaces vivent désormais dans une seule application versionnée, lisible et modifiable sans passer par un éditeur no-code, avec un découpage en composants et une couche lib/ où la logique métier est isolée.

La reconstruction a aussi permis d'ajouter ce que le no-code ne permettait pas de tenir : brouillon de déclaration persistant, aperçu du fichier avant envoi, messages d'erreur explicites au lieu d'une page blanche, et ouverture immédiate des pages grâce au cache.

Le code source n'est pas public (projet d'entreprise).