Étude de cas · Application web · 2026
Un portail bilingue qui transforme un appel d'offres en soumission structurée.
Application conçue et développée pour préparer, documenter et présenter une réponse à un appel d'offres public de refonte de marque et de site web, en français et en anglais. Un espace de travail interne protégé, et une vitrine client publique.
- Rôle
- Conception + développement
- Stack
- TanStack Start · React 19 · Tailwind v4
- Données
- Postgres géré, accès par rôles
- Langues
- Français / anglais, partout
Le problème
Un appel d'offres bilingue est un projet en soi, pas un document à remplir.
Répondre à un appel d'offres public suppose de lire des exigences dispersées, de les traduire en décisions, de coordonner plusieurs collaborateurs, de produire une documentation d'équipe crédible et de livrer le tout avant une date fixe — dans deux langues. Sans outil, ce travail vit dans des courriels, des fichiers Word et de la mémoire.
Exigences éparpillées
Les exigences du devis et de l'énoncé de travaux devaient être rattachées à des étapes concrètes plutôt qu'à des extraits de documents.
Collaboration à plusieurs mains
Plusieurs profils contribuent : direction de projet, design, révision linguistique. Chacun a besoin de sa portion, pas de tout.
Interne ≠ client
Notes de travail, prix et arbitrages internes ne doivent jamais apparaître dans ce qui est partagé au client.
Les utilisateurs
Deux publics, deux expériences, une seule base de données.
Équipe interne (connexion obligatoire)
Accède au portail guidé, aux ateliers par discipline, au registre, aux références, aux prix et au document de soumission. Tout vit derrière une section de routes protégée.
Client / évaluateur (lien public)
Reçoit une présentation cinématographique de l'approche : nom, échéancier, phases, dossiers d'équipe. Sans prix, sans notes internes.
La solution
Un parcours guidé plutôt qu'un formulaire.
L'application décompose la réponse en modules et en étapes. Chaque étape pose une question en langage clair, cite l'exigence source, propose un positionnement, liste les actions et les décisions à trancher. La progression est enregistrée, commentée et décidée dans l'outil.
- 01
Comprendre l'existant
Lecture du besoin et de l'écosystème actuel.
- 02
Cadrer le projet
Portée, phases et livrables attendus.
- 03
Poser les règles
Contraintes, gouvernance et non-négociables.
- 04
Construire la réponse
Équipe, références, prix, document final.
Interfaces
Captures issues de l'application en fonctionnement.
Écrans publics de l'application, capturés tels quels. Les vues internes et les dossiers nominatifs sont volontairement exclus.
Point d'entrée
Sépare explicitement l'espace de travail interne de l'espace client, et rappelle qu'aucune donnée interne n'est exposée ici.
Vitrine client — ouverture
Séquence d'ouverture animée qui met en scène le changement de nom bilingue, avec la date limite de dépôt en repère.
Vitrine client — échéancier
Les jalons du projet rendus sous forme de grille lisible, alimentés par les données du projet plutôt que saisis en dur dans la page.
Accès à l'espace interne
Point de contrôle unique : sans session valide, aucune route interne ne se charge.
Fonctionnalités présentes dans le code
Ce que l'application fait réellement.
Portail d'étapes guidées
Modules, étapes détaillées, progression enregistrée, commentaires et décisions par étape.
Ateliers par discipline
Banque de questions par discipline et réponses associées, pour faire contribuer chaque profil sur son terrain.
Document de soumission
Sections de soumission structurées, aperçu optimisé pour l'impression et export PDF depuis le navigateur.
Dossiers d'équipe
Fiches de membres et projets de portfolio, avec des mises en page éditoriales distinctes selon le rôle.
Bilinguisme intégral
Bascule FR/EN persistée côté navigateur, champs de contenu doublés en base et traduction automatique côté serveur.
Assistance IA
Reformulation de section, analyse critique d'une ébauche, lecture de CV pour préremplir une fiche, et dictée transcrite en texte.
Architecture
Une seule application, trois zones de confiance.
Le découpage sécurité est porté par la structure des routes et par la base de données, pas par des masques d'affichage.
Routage par fichiers
Routes typées avec TanStack Start ; toute la zone interne est regroupée sous une route parente qui exige une session.
Base de données à politiques
Postgres géré, avec des rôles stockés dans une table dédiée et des fonctions de contrôle d'accès côté base (rôle, responsable de projet, réviseur linguistique, accès client).
Fonctions serveur
Les appels à un service d'IA et les lectures destinées à l'espace client passent par des fonctions serveur ; aucune clé ne circule dans le navigateur.
Système de design par jetons
Tailwind v4 avec des variables de thème en oklch : couleurs, familles typographiques et rayons centralisés, jamais codés en dur dans les écrans.
Données de référence versionnées
Modules, étapes, phases, jalons, critères d'évaluation et non-négociables vivent dans des fichiers de données typés, relus par plusieurs écrans.
Couche de mouvement
Framer Motion pour les entrées, GSAP pour les séquences cinématographiques, Lenis pour le défilement — réservés à la vitrine client.
Décisions de conception
Les arbitrages qui ont façonné le produit.
Séparer physiquement l'interne et le client
Plutôt que de masquer des blocs selon l'utilisateur, les deux publics ont leurs propres routes. Un oubli d'affichage ne peut pas exposer un prix ou une note interne.
Traiter le bilinguisme comme une structure, pas une traduction
Chaque champ de contenu existe en deux langues dans le modèle de données ; l'interface choisit, elle ne devine pas.
Rattacher chaque étape à sa source
Les exigences citées sont distinguées visuellement de notre interprétation, pour éviter de présenter une lecture comme une obligation.
Le mouvement au service du message
L'animation lourde est confinée à la vitrine client. Les écrans de travail restent sobres et rapides.
L'IA propose, l'humain tranche
Les fonctions d'assistance produisent des propositions et des critiques ; rien n'est publié sans passage par un formulaire édité à la main.
Valeur commerciale
Ce que l'outil rend possible.
Formulé au niveau des capacités observables dans le produit ; aucun indicateur de performance n'est avancé.
Traçabilité
Chaque décision, commentaire et réponse est rattaché à une étape identifiable.
Contribution répartie
Les spécialistes répondent sur leur discipline sans traverser tout le dossier.
Livrable réutilisable
Le contenu saisi alimente directement le document de soumission et son export.
Effet de présentation
La vitrine client donne au dossier une qualité de présentation rarement associée à une réponse d'appel d'offres.
Compétences démontrées
Conception produit, développement, UX, intégration.
Mon rôle, tel qu'observable dans le projet
- Conception et réalisation de l'ensemble des écrans publics et internes de l'application.
- Définition du système de design (couleurs, typographies, composants) et de la structure des routes.
- Modélisation des données du dossier et mise en place des règles d'accès par rôle.
- Intégration des fonctions serveur d'assistance et de traduction.
- Mise en forme du document de soumission et de son export.