La Bonne Réponse
Ecosistema de IA para el Sector de Construcción
Visión General
Contexto
La Bonne Réponse es una startup francesa que revoluciona el sector de construcción y renovación energética a través de IA Generativa. El problema: los profesionales de la construcción necesitan verificar el cumplimiento de más de 300 regulaciones técnicas francesas (DTU, normas NF, Eurocodes, etc.), un proceso manual que consume tiempo y es propenso a errores. La solución: un asistente de IA entrenado específicamente en estas regulaciones, respondiendo preguntas técnicas instantáneamente citando las fuentes oficiales.
Solución
El ecosistema consiste en tres componentes internos para que el equipo La Bonne Réponse gestione sus clientes: (1) LBR-API - API REST multi-tenant robusta que gestiona widgets de chat, autenticación doble (usuarios y widgets), integraciones con Stripe/AWS/Brevo, y control de calidad automatizado; (2) IA Factory - Back Office Admin donde el equipo configura chatbots, genera widgets personalizados, gestiona bases de conocimiento y monitorea conversaciones; (3) Portal Usuario - donde los profesionales de la construcción acceden al asistente de IA con historial de conversaciones y gestión de suscripciones. El enlace externo dirige al sitio institucional de la empresa.
Mi Rol
Actué como Lead Front End y UI/UX Designer, siendo responsable de toda la arquitectura y desarrollo front-end de ambas plataformas (BO y Portal). Creé todo el diseño de interfaz y experiencia de usuario, tomé decisiones técnicas sobre stack y patrones de código. También colaboré activamente en el desarrollo de la API backend junto al equipo House of Coding.
Stack Técnico
Frontend
Backend
Proyectos
LBR-API
API REST Multi-Tenant
API REST robusta creada por el equipo House of Coding usando NestJS, especializada en gestión de widgets de chat con IA. Colaboré implementando las llamadas del dashboard, integración con herramienta RAG y upload de documentos en S3.
Funcionalidades
Integración RAG
Conexión con herramienta de Retrieval-Augmented Generation para respuestas basadas en documentos
Multi-Tenancy
Aislamiento completo de datos por tenant con JWT validado
Autenticación Doble
JWT separado para usuarios (admin, portal) y widgets embebidos
CORS Dinámico
Validación de origen basada en widget integrations en base de datos
Gestión de Widgets
Configuraciones visuales (4 colores), logo, mensajes, Google Analytics
Sistema de Referencias
Upload de documentos, URLs permitidas/bloqueadas, crawling automático
Control de Calidad
Puntos de verificación con preguntas/respuestas, validación automática vía IA
Integración Stripe
Webhooks con validación de firma, gestión de clientes por tenant
Upload S3
URLs prefirmadas para descarga segura con límite de tamaño
Rate Limiting
Throttler personalizado con 100 req/min por IP + user_id
Import CSV/Excel
Importación en lote de usuarios con validación y transaction
Swagger Automático
Documentación OpenAPI generada vía decoradores NestJS
Design Patterns
Decisiones Técnicas
Herramienta RAG
Sistema para Retrieval-Augmented Generation, elegido por la flexibilidad y control sobre el pipeline de IA
JWT Doble (Usuarios + Widgets)
Widgets embebidos en sitios externos necesitan autenticación propia sin exponer credenciales de usuarios
CORS Dinámico vía Base de Datos
Cada widget puede embeberse en múltiples dominios, imposible configurar CORS estático
URLs Prefirmadas para S3
Descargas seguras sin exponer credenciales AWS, expiración configurable
TypeORM en vez de Prisma
Mejor integración con NestJS, soporte de decoradores, rendimiento para queries complejas
Desafíos & Soluciones
CORS Dinámico para Widgets
Query en base de datos para validar origen en cada request, caché en memoria para rendimiento
Webhook Stripe con Raw Body
Middleware personalizado para preservar raw body antes del bodyParser de NestJS
Import en Lote de Usuarios
Parsing CSV/Excel con fast-csv, validación en lote, insert con transaction y rollback
IA Factory - Back Office Admin
Plataforma de Gestión de Chatbots IA
Dashboard administrativo enterprise-grade. Creé el diseño UI/UX, design system y toda la arquitectura de componentes. Desarrollé formularios multi-paso, tablas avanzadas, gestión de widgets, sistema de referencias y todas las demás funcionalidades excepto módulos de usuarios, empresas y QA.
Funcionalidades
Dashboard Administrativo
Interfaz completa para gestión de la plataforma con métricas
Formulario Multi-Paso
Creación de widget en 7 pasos con validación Zod por paso
Editor por Secciones
Accordion con secciones guardables independientemente vía PATCH
Widget Configurator
Preview en tiempo real de las personalizaciones del chatbot
DataTable Compuesta
Tablas con TanStack Table: ordenación, filtros, paginación, selección batch
Knowledge Base UI
Upload drag-and-drop de documentos con react-dropzone
Sistema de QC
Control de calidad con import CSV/Excel de puntos de verificación
Click Prompts Editor
Interfaz para crear prompts pre-configurados clicables
Gestión Multi-tenant
Administración de usuarios, empresas y permisos por rol
Sistema de Referentials
Monitoreo de crawler con última ejecución y detección de cambios
Cache Invalidation
Función central que invalida queries relacionadas en cascada
Historial de Conversaciones
Visualización de conversaciones de usuarios con renderizado markdown
Internacionalización
Sistema multi-idioma con react-i18next para soporte de diferentes idiomas
Design Patterns
Decisiones Técnicas
Context + React Query
Context para estado UI (formularios), React Query para estado servidor
Accordion para edición
Permite guardar secciones independientemente sin bloquear al usuario
Desafíos & Soluciones
Formulario de 7 Pasos
Context para estado global, validación Zod por paso, hasStepErrors() para feedback visual
Upload con Preview
FileReader para preview local inmediato, estado separado para preview vs saved
Edición por Secciones
Accordion con botón Save por sección, PATCH para updates parciales, track changes
Cache Invalidation en Cascada
Función refetchAllWidgetData() invalidando queries relacionadas en orden correcto
Portal Usuario
Portal Web con Widget de Chat Integrado
Aplicación completa construida desde cero. Implementé autenticación robusta, refresh automático de tokens, integración Stripe, widget de chat en iframe aislado y refactorización completa de la versión Webflow.
Funcionalidades
Token Refresh Automático
Refresh JWT 10 minutos antes de expiración, reprogramación continua
Widget en Iframe
Aislamiento completo CSS/JS con sandbox, comunicación vía postMessage
Integración Stripe
Pricing table embebida, verificación de estado, billing portal
Sistema de Autenticación
Login, registro, activación de cuenta, reset de contraseña con tokens
Soporte B2B y B2C
Lógica de suscripción diferenciada por tipo de tenant
Gestión de Conversaciones
Sidebar con lista de conversaciones, crear nueva, continuar existente
Páginas de Presentación
URLs dinámicas por nombre para demos sin autenticación
Gestión de Cuenta
Editar perfil, título profesional, sector, cambiar contraseña con validación robusta
Internacionalización
Sistema multi-idioma con react-i18next para soporte de diferentes idiomas
Design Patterns
Decisiones Técnicas
Iframe para Widget
Aislamiento completo CSS/JS, evita conflictos de estilo con el portal
Refresh Proactivo
Refresh 10min antes evita expiración durante uso activo
Stripe Pricing Table
Componente embebido elimina necesidad de UI personalizada para planes
B2B sin pago
Empresas B2B tienen contrato directo, no necesitan checkout
Desafíos & Soluciones
Token Refresh Automático
Decodificar JWT para obtener expiración, setTimeout 10min antes, reprogramar tras éxito
Widget en Iframe Aislado
Sandbox con allow-scripts allow-same-origin, parámetros vía query string, postMessage
Estado de Suscripción
Hook useSubscription() con lógica centralizada para B2B (sin pago) y B2C