La Bonne Réponse
Ecossistema de IA para o setor de construção
Visão Geral
Contexto
La Bonne Réponse é uma startup francesa que revoluciona o setor de construção e renovação energética através de IA Generativa. O problema: profissionais da construção civil precisam verificar conformidade com mais de 300 regulamentações técnicas francesas (DTU, normas NF, Eurocodes, etc.), um processo manual demorado e propenso a erros. A solução: um assistente de IA treinado especificamente nessas regulamentações, que responde perguntas técnicas instantaneamente, citando as fontes oficiais.
Solução
O ecossistema consiste em três componentes internos para que a equipe La Bonne Réponse gerencie seus clientes: (1) LBR-API - API REST multi-tenant robusta que gerencia widgets de chat, autenticação dupla (usuários e widgets), integrações com Stripe/AWS/Brevo, e controle de qualidade automatizado; (2) IA Factory - Back Office Admin onde a equipe configura chatbots, gera widgets personalizados, gerencia bases de conhecimento e monitora conversas; (3) Portal Usuário - onde profissionais da construção acessam o assistente de IA com histórico de conversas e gestão de assinaturas. O link externo direciona ao site institucional da empresa.
Meu Papel
Atuei como Lead Front End e UI/UX Designer, sendo responsável por toda a arquitetura e desenvolvimento front-end de ambas as plataformas (BO e Portal). Criei todo o design de interface e experiência do usuário, tomei decisões técnicas sobre stack e padrões de código. Também colaborei ativamente no desenvolvimento da API backend junto ao time House of Coding.
Stack Técnica
Frontend
Backend
Projetos
LBR-API
API REST Multi-Tenant
API REST robusta criada pela equipe House of Coding usando NestJS, especializada em gerenciamento de widgets de chat com IA. Colaborei implementando as chamadas do dashboard, integração com ferramenta RAG e upload de documentos no S3.
Features
Integração RAG
Conexão com ferramenta de Retrieval-Augmented Generation para respostas baseadas em documentos
Multi-Tenancy
Isolamento completo de dados por tenant com JWT validado
Autenticação Dupla
JWT separado para usuários (admin, portal) e widgets embarcados
CORS Dinâmico
Validação de origem baseada em widget integrations no banco
Gestão de Widgets
Configurações visuais (4 cores), logo, mensagens, Google Analytics
Sistema de Referências
Upload de documentos, URLs permitidas/bloqueadas, crawling automático
Controle de Qualidade
Pontos de verificação com perguntas/respostas, validação automática via IA
Integração Stripe
Webhooks com validação de assinatura, gestão de clientes por tenant
Upload S3
Presigned URLs para download seguro com limite de tamanho
Rate Limiting
Throttler customizado com 100 req/min por IP + user_id
Import CSV/Excel
Importação em lote de usuários com validação e transaction
Swagger Automático
Documentação OpenAPI gerada via decoradores NestJS
Design Patterns
Decisões Técnicas
Ferramenta RAG
Sistema para Retrieval-Augmented Generation, escolhido pela flexibilidade e controle sobre o pipeline de IA
JWT Duplo (Usuários + Widgets)
Widgets embarcados em sites externos precisam de autenticação própria, sem expor credenciais de usuários
CORS Dinâmico via Banco
Cada widget pode ser embarcado em múltiplos domínios, impossível configurar CORS estático
Presigned URLs para S3
Downloads seguros sem expor credenciais AWS, com expiração configurável
TypeORM sobre Prisma
Melhor integração com NestJS, suporte a decoradores, e performance para queries complexas
Desafios & Soluções
CORS Dinâmico para Widgets
Query no banco para validar origem em cada request, cache em memória para performance
Webhook Stripe com Raw Body
Middleware customizado para preservar raw body antes do bodyParser do NestJS
Import em Lote de Usuários
Parsing CSV/Excel com fast-csv, validação em lote, insert com transaction e rollback
IA Factory - Back Office Admin
Plataforma de Gestão de Chatbots IA
Dashboard administrativo enterprise-grade. Criei o design UI/UX, design system e toda estrutura de componentes. Desenvolvi formulários multi-step, tabelas avançadas, gestão de widgets, sistema de referências e todas as demais funcionalidades exceto módulos de usuários, empresas e QA.
Features
Dashboard Administrativo
Interface completa para gestão da plataforma com métricas
Formulário Multi-Step
Criação de widget em 7 passos com validação Zod por etapa
Editor por Seções
Accordion com seções salváveis independentemente via PATCH
Widget Configurator
Preview em tempo real das customizações do chatbot
DataTable Composição
Tabelas com TanStack Table: sorting, filtros, paginação, seleção batch
Knowledge Base UI
Upload drag-and-drop de documentos com react-dropzone
Sistema de QC
Controle de qualidade com import CSV/Excel de pontos de verificação
Click Prompts Editor
Interface para criar prompts pré-configurados clicáveis
Gestão Multi-tenant
Administração de usuários, empresas e permissões por role
Sistema de Referentials
Monitoramento de crawler com última execução e detecção de mudanças
Cache Invalidation
Função central que invalida queries relacionadas em cascata
Histórico de Conversas
Visualização de conversas dos usuários com markdown rendering
Internacionalização
Sistema multi-idioma com react-i18next para suporte a diferentes línguas
Design Patterns
Decisões Técnicas
Context + React Query
Context para estado de UI (formulários), React Query para estado de servidor
Accordion para edição
Permite salvar seções independentemente sem bloquear o usuário
Desafios & Soluções
Formulário de 7 Passos
Context para estado global, validação Zod por step, hasStepErrors() para feedback visual
Upload com Preview
FileReader para preview local imediato, estado separado para preview vs saved
Edição por Seções
Accordion com botão Save por seção, PATCH para updates parciais, track changes
Cache Invalidation em Cascata
Função refetchAllWidgetData() que invalida queries relacionadas na ordem correta
Portal Usuário
Portal Web com Widget de Chat Integrado
Aplicação completa criada do zero. Implementei autenticação robusta, refresh automático de tokens, integração Stripe, widget de chat em iframe isolado e refatoração completa da versão Webflow legada.
Features
Token Refresh Automático
Refresh JWT 10 minutos antes da expiração, reagendamento contínuo
Widget em Iframe
Isolamento completo CSS/JS com sandbox, comunicação via postMessage
Integração Stripe
Pricing table embarcada, verificação de status, billing portal
Sistema de Autenticação
Login, registro, ativação de conta, reset de senha com tokens
Suporte B2B e B2C
Lógica de subscrição diferenciada por tipo de tenant
Gestão de Conversas
Sidebar com lista de conversas, criar nova, continuar existente
Páginas de Apresentação
URLs dinâmicas por nome para demos sem autenticação
Gestão de Conta
Editar perfil, título profissional, setor, alterar senha com validação robusta
Internacionalização
Sistema multi-idioma com react-i18next para suporte a diferentes línguas
Design Patterns
Decisões Técnicas
Iframe para Widget
Isolamento completo de CSS/JS, evita conflitos de estilo com o portal
Refresh Proativo
Refresh 10min antes evita expiração durante uso ativo
Stripe Pricing Table
Componente embarcado elimina necessidade de UI customizada para planos
B2B sem pagamento
Empresas B2B têm contrato direto, não precisam de checkout
Desafios & Soluções
Token Refresh Automático
Decodificar JWT para obter expiração, setTimeout 10min antes, reagendar após sucesso
Widget em Iframe Isolado
Sandbox com allow-scripts allow-same-origin, parâmetros via query string, postMessage
Status de Subscrição
Hook useSubscription() com lógica centralizada para B2B (sem pagamento) e B2C