La Bonne Réponse
AI Ecosystem for the Construction Sector
Overview
Context
La Bonne Réponse is a French startup revolutionizing the construction and energy renovation sector through Generative AI. The problem: construction professionals need to verify compliance with over 300 French technical regulations (DTU, NF standards, Eurocodes, etc.), a manual process that is time-consuming and error-prone. The solution: an AI assistant specifically trained on these regulations, answering technical questions instantly while citing official sources.
Solution
The ecosystem consists of three internal components for the La Bonne Réponse team to manage their clients: (1) LBR-API - a robust multi-tenant REST API managing chat widgets, dual authentication (users and widgets), integrations with Stripe/AWS/Brevo, and automated quality control; (2) IA Factory - Back Office Admin where the team configures chatbots, generates custom widgets, manages knowledge bases and monitors conversations; (3) User Portal - where construction professionals access the AI assistant with conversation history and subscription management. The external link directs to the company's institutional website.
My Role
I served as Lead Front End and UI/UX Designer, responsible for the entire front-end architecture and development of both platforms (BO and Portal). I created all interface design and user experience, made technical decisions about stack and code patterns. I also actively collaborated on backend API development with the House of Coding team.
Tech Stack
Frontend
Backend
Projects
LBR-API
Multi-Tenant REST API
Robust REST API created by the House of Coding team using NestJS, specialized in AI chat widget management. I collaborated by implementing dashboard API calls, RAG tool integration and S3 document upload.
Features
RAG Integration
Connection with Retrieval-Augmented Generation tool for document-based responses
Multi-Tenancy
Complete data isolation per tenant with validated JWT
Dual Authentication
Separate JWT for users (admin, portal) and embedded widgets
Dynamic CORS
Origin validation based on widget integrations in database
Widget Management
Visual configurations (4 colors), logo, messages, Google Analytics
Reference System
Document upload, allowed/blocked URLs, automatic crawling
Quality Control
Verification points with Q&A, automatic validation via AI
Stripe Integration
Webhooks with signature validation, client management per tenant
S3 Upload
Presigned URLs for secure download with size limit
Rate Limiting
Custom throttler with 100 req/min per IP + user_id
CSV/Excel Import
Batch user import with validation and transaction
Auto Swagger
OpenAPI documentation generated via NestJS decorators
Design Patterns
Technical Decisions
RAG Tool
System for Retrieval-Augmented Generation, chosen for flexibility and control over the AI pipeline
Dual JWT (Users + Widgets)
Widgets embedded on external sites need their own authentication without exposing user credentials
Dynamic CORS via Database
Each widget can be embedded on multiple domains, impossible to configure static CORS
Presigned URLs for S3
Secure downloads without exposing AWS credentials, configurable expiration
TypeORM over Prisma
Better NestJS integration, decorator support, performance for complex queries
Challenges & Solutions
Dynamic CORS for Widgets
Database query to validate origin on each request, in-memory cache for performance
Stripe Webhook with Raw Body
Custom middleware to preserve raw body before NestJS bodyParser
Batch User Import
CSV/Excel parsing with fast-csv, batch validation, insert with transaction and rollback
IA Factory - Back Office Admin
AI Chatbot Management Platform
Enterprise-grade admin dashboard. I created the UI/UX design, design system and entire component architecture. I developed multi-step forms, advanced tables, widget management, reference system and all other features except user, company and QA modules.
Features
Admin Dashboard
Complete platform management interface with metrics
Multi-Step Form
Widget creation in 7 steps with Zod validation per step
Section Editor
Accordion with independently saveable sections via PATCH
Widget Configurator
Real-time preview of chatbot customizations
Composed DataTable
Tables with TanStack Table: sorting, filters, pagination, batch selection
Knowledge Base UI
Drag-and-drop document upload with react-dropzone
QC System
Quality control with CSV/Excel import of verification points
Click Prompts Editor
Interface for creating clickable pre-configured prompts
Multi-tenant Management
User, company and role-based permission administration
Referentials System
Crawler monitoring with last execution and change detection
Cache Invalidation
Central function invalidating related queries in cascade
Conversation History
User conversation viewing with markdown rendering
Internationalization
Multi-language system with react-i18next for different language support
Design Patterns
Technical Decisions
Context + React Query
Context for UI state (forms), React Query for server state
Accordion for editing
Allows saving sections independently without blocking the user
Challenges & Solutions
7-Step Form
Context for global state, Zod validation per step, hasStepErrors() for visual feedback
Upload with Preview
FileReader for immediate local preview, separate state for preview vs saved
Section Editing
Accordion with Save button per section, PATCH for partial updates, track changes
Cascade Cache Invalidation
refetchAllWidgetData() function invalidating related queries in correct order
User Portal
Web Portal with Integrated Chat Widget
Complete application built from scratch. I implemented robust authentication, automatic token refresh, Stripe integration, chat widget in isolated iframe and complete refactoring from Webflow version.
Features
Automatic Token Refresh
JWT refresh 10 minutes before expiration, continuous rescheduling
Iframe Widget
Complete CSS/JS isolation with sandbox, postMessage communication
Stripe Integration
Embedded pricing table, status verification, billing portal
Authentication System
Login, registration, account activation, password reset with tokens
B2B and B2C Support
Differentiated subscription logic by tenant type
Conversation Management
Sidebar with conversation list, create new, continue existing
Presentation Pages
Dynamic URLs by name for demos without authentication
Account Management
Edit profile, professional title, sector, change password with robust validation
Internationalization
Multi-language system with react-i18next for different language support
Design Patterns
Technical Decisions
Iframe for Widget
Complete CSS/JS isolation, avoids style conflicts with the portal
Proactive Refresh
Refresh 10min before avoids expiration during active use
Stripe Pricing Table
Embedded component eliminates need for custom UI for plans
B2B without payment
B2B companies have direct contract, no need for checkout
Challenges & Solutions
Automatic Token Refresh
Decode JWT to get expiration, setTimeout 10min before, reschedule after success
Isolated Iframe Widget
Sandbox with allow-scripts allow-same-origin, parameters via query string, postMessage
Subscription Status
useSubscription() hook with centralized logic for B2B (no payment) and B2C