SAAS CHATBOT HOC
Écosystème IA pour le Secteur de la Construction
Aperçu
Contexte
SAAS CHATBOT HOC est une startup française qui révolutionne le secteur de la construction et de la rénovation énergétique grâce à l'IA Générative. Le problème : les professionnels du bâtiment doivent vérifier la conformité avec plus de 300 réglementations techniques françaises (DTU, normes NF, Eurocodes, etc.), un processus manuel chronophage et sujet aux erreurs. La solution : un assistant IA spécifiquement formé sur ces réglementations, répondant instantanément aux questions techniques en citant les sources officielles.
Solution
L'écosystème se compose de trois composants internes pour que l'équipe SAAS CHATBOT HOC gère ses clients : (1) LBR-API - API REST multi-tenant robuste gérant les widgets de chat, l'authentification double (utilisateurs et widgets), les intégrations avec Stripe/AWS/Brevo, et le contrôle qualité automatisé ; (2) IA Factory - Back Office Admin où l'équipe configure les chatbots, génère des widgets personnalisés, gère les bases de connaissances et surveille les conversations ; (3) Portail Utilisateur - où les professionnels du bâtiment accèdent à l'assistant IA avec historique des conversations et gestion des abonnements. Le lien externe redirige vers le site institutionnel de l'entreprise.
Mon Rôle
J'ai occupé le rôle de Lead Front End et UI/UX Designer, responsable de toute l'architecture et du développement front-end des deux plateformes (BO et Portail). J'ai créé tout le design d'interface et l'expérience utilisateur, pris des décisions techniques sur le stack et les patterns de code. J'ai également collaboré activement au développement de l'API backend avec l'équipe House of Coding.
Stack Technique
Frontend
Backend
Projets
LBR-API
API REST Multi-Tenant
API REST robuste créée par l'équipe House of Coding utilisant NestJS, spécialisée dans la gestion de widgets de chat avec IA. J'ai collaboré en implémentant les appels API du dashboard, l'intégration avec l'outil RAG et l'upload de documents sur S3.
Fonctionnalités
Intégration RAG
Connexion avec outil de Retrieval-Augmented Generation pour réponses basées sur documents
Multi-Tenancy
Isolation complète des données par tenant avec JWT validé
Authentification Double
JWT séparé pour utilisateurs (admin, portail) et widgets embarqués
CORS Dynamique
Validation d'origine basée sur widget integrations en base
Gestion des Widgets
Configurations visuelles (4 couleurs), logo, messages, Google Analytics
Système de Références
Upload de documents, URLs autorisées/bloquées, crawling automatique
Contrôle Qualité
Points de vérification avec questions/réponses, validation automatique via IA
Intégration Stripe
Webhooks avec validation de signature, gestion clients par tenant
Upload S3
URLs présignées pour téléchargement sécurisé avec limite de taille
Rate Limiting
Throttler personnalisé avec 100 req/min par IP + user_id
Import CSV/Excel
Importation en lot d'utilisateurs avec validation et transaction
Swagger Automatique
Documentation OpenAPI générée via décorateurs NestJS
Design Patterns
Décisions Techniques
Outil RAG
Système pour Retrieval-Augmented Generation, choisi pour la flexibilité et le contrôle sur le pipeline IA
JWT Double (Utilisateurs + Widgets)
Widgets embarqués sur sites externes nécessitent authentification propre, sans exposer credentials utilisateurs
CORS Dynamique via Base
Chaque widget peut être embarqué sur plusieurs domaines, impossible de configurer CORS statique
URLs Présignées pour S3
Téléchargements sécurisés sans exposer credentials AWS, expiration configurable
TypeORM plutôt que Prisma
Meilleure intégration NestJS, support décorateurs, performance pour queries complexes
Défis & Solutions
CORS Dynamique pour Widgets
Query en base pour valider origine à chaque requête, cache mémoire pour performance
Webhook Stripe avec Raw Body
Middleware personnalisé pour préserver raw body avant bodyParser NestJS
Import en Lot d'Utilisateurs
Parsing CSV/Excel avec fast-csv, validation en lot, insert avec transaction et rollback
IA Factory - Back Office Admin
Plateforme de Gestion de Chatbots IA
Dashboard administratif enterprise-grade. J'ai créé le design UI/UX, design system et toute l'architecture des composants. J'ai développé les formulaires multi-étapes, tables avancées, gestion des widgets, système de références et toutes les autres fonctionnalités sauf les modules utilisateurs, entreprises et QA.
Fonctionnalités
Dashboard Administratif
Interface complète pour la gestion de la plateforme avec métriques
Formulaire Multi-Étapes
Création de widget en 7 étapes avec validation Zod par étape
Éditeur par Sections
Accordion avec sections enregistrables indépendamment via PATCH
Widget Configurator
Prévisualisation en temps réel des personnalisations du chatbot
DataTable Composée
Tables avec TanStack Table : tri, filtres, pagination, sélection batch
Knowledge Base UI
Upload drag-and-drop de documents avec react-dropzone
Système de QC
Contrôle qualité avec import CSV/Excel de points de vérification
Click Prompts Editor
Interface pour créer des prompts pré-configurés cliquables
Gestion Multi-tenant
Administration des utilisateurs, entreprises et permissions par rôle
Système de Referentials
Surveillance du crawler avec dernière exécution et détection des changements
Cache Invalidation
Fonction centrale invalidant les queries liées en cascade
Historique des Conversations
Visualisation des conversations utilisateurs avec rendu markdown
Internationalisation
Système multi-langue avec react-i18next pour le support de différentes langues
Design Patterns
Décisions Techniques
Context + React Query
Context pour état UI (formulaires), React Query pour état serveur
Accordion pour édition
Permet sauvegarder sections indépendamment sans bloquer l'utilisateur
Défis & Solutions
Formulaire de 7 Étapes
Context pour état global, validation Zod par étape, hasStepErrors() pour feedback visuel
Upload avec Prévisualisation
FileReader pour prévisualisation locale immédiate, état séparé pour preview vs saved
Édition par Sections
Accordion avec bouton Save par section, PATCH pour updates partiels, track changes
Cache Invalidation en Cascade
Fonction refetchAllWidgetData() invalidant queries liées dans le bon ordre
Portail Utilisateur
Portail Web avec Widget de Chat Intégré
Application complète construite de zéro. J'ai implémenté authentification robuste, refresh automatique de tokens, intégration Stripe, widget de chat en iframe isolé et refonte complète de la version Webflow.
Fonctionnalités
Token Refresh Automatique
Refresh JWT 10 minutes avant expiration, replanification continue
Widget en Iframe
Isolation complète CSS/JS avec sandbox, communication via postMessage
Intégration Stripe
Pricing table intégrée, vérification de statut, billing portal
Système d'Authentification
Connexion, inscription, activation de compte, reset de mot de passe
Support B2B et B2C
Logique de souscription différenciée par type de tenant
Gestion des Conversations
Sidebar avec liste de conversations, créer nouvelle, continuer existante
Pages de Présentation
URLs dynamiques par nom pour démos sans authentification
Gestion de Compte
Modifier profil, titre professionnel, secteur, changer mot de passe
Internationalisation
Système multi-langue avec react-i18next pour le support de différentes langues
Design Patterns
Décisions Techniques
Iframe pour Widget
Isolation complète CSS/JS, évite conflits de style avec le portail
Refresh Proactif
Refresh 10min avant évite expiration pendant utilisation active
Stripe Pricing Table
Composant embarqué élimine besoin d'UI personnalisée pour plans
B2B sans paiement
Entreprises B2B ont contrat direct, pas besoin de checkout
Défis & Solutions
Token Refresh Automatique
Décoder JWT pour obtenir expiration, setTimeout 10min avant, replanifier après succès
Widget en Iframe Isolé
Sandbox avec allow-scripts allow-same-origin, paramètres via query string, postMessage
Statut de Souscription
Hook useSubscription() avec logique centralisée pour B2B (sans paiement) et B2C