Les Performeurs
Plataformas de Formação Profissional
Visão Geral
Contexto
Les Performeurs é um organismo de formação profissional francês que acompanha aprendizes (apprenants) em seu percurso de desenvolvimento. Cada apprenant é acompanhado por um tuteur que valida suas missões e etapas de aprendizagem. O problema: acompanhamento pedagógico fragmentado em planilhas e emails, sem rastreabilidade centralizada do progresso, avaliações manuais dispersas (PIX, Cléa, soft skills), e comunicação tutor-apprenant sem histórico organizado.
Solução
O ecossistema consiste em duas plataformas complementares: (1) LINK-Parcours - Dashboard administrativo enterprise-grade para gestão de sessões de formação, usuários com 8 níveis de roles, avaliações de posicionamento (PIX, Cléa, soft skills), e tracking de progresso (béabas, missions); (2) Tuto-Mission - PWA mobile-first para acompanhamento pedagógico em tempo real, onde tutores monitoram apprenants através de chat com suporte a mídia e validação de etapas.
Meu Papel
No LINK-Parcours, atuei como Lead Front End e UI/UX Designer, criando todo o design da interface administrativa e implementando o sistema completo. No Tuto-Mission, implementei o design recebido via Figma da House of Coding, desenvolvendo estratégias avançadas de cache para compensar API legada e criar experiência fluida.
Stack Técnica
Frontend
Backend
Projetos
LINK-Parcours
Dashboard Administrativo de Formação
Plataforma administrativa completa para gestão de sessões de formação, usuários e avaliações. Criei todo o design UI/UX e implementei o sistema com controle de acesso baseado em 8 níveis de roles, tabelas paginadas server-side, e formulários complexos com validação i18n.
Features
Gestão de Usuários
CRUD completo com 8 níveis de roles (superAdmin até apprenant)
Gestão de Sessions
Criação de sessões com múltiplos dias (session_jours) e participantes
Avaliação de Posicionamento
Scores PIX, résultats Cléa, soft skills games, entretiens
Tracking de Progresso
Béabas e missions com cálculo de percentagem global
Tabelas Avançadas
TanStack Table com sorting, filtros, paginação server-side
URL State Management
Filtros persistidos na URL via nuqs para compartilhamento
Formulários Validados
React Hook Form + Zod com mensagens i18n em francês
Upload de Foto
Drag & drop com preview e gestão de perfil
Dashboard com Gráficos
Visualizações com Recharts para métricas
Sistema de Roles
RoleProtectedRoute + useRoleBasedRedirect para controle de acesso
Pré-inscrições
Gestão de candidatos por sessão de formação
Internacionalização
Sistema multi-idioma com react-i18next para suporte a diferentes línguas
Design Patterns
Decisões Técnicas
Tailwind CSS v4
Produtividade aumentada, design system integrado, purge automático
Radix UI + shadcn/ui
Primitives acessíveis sem styling imposto, controle total sobre aparência
nuqs para URL state
Sincronização bidirecional automática, type-safe com parsers
Paginação Híbrida
Server-side para users/sessions (volume grande), client-side para apprenants (filtagem rápida)
React Hook Form + Zod
Performance (menos re-renders), integração nativa, melhor TypeScript
Desafios & Soluções
8 Níveis de Roles
Enum UserGroupCode com códigos numéricos hierárquicos, matriz de permissões por rota
Filtros Persistentes
Estado na URL via nuqs + location.state para contexto de navegação
Sistema de Posicionamento
Componentes dedicados por tipo (PIX, Cléa, soft skills) + hook usePositioning centralizado
Formulários Multi-Etapas
Tabs organizando seções, schema Zod parcial por seção, validação na submissão
Tuto-Mission
PWA de Acompanhamento Pedagógico
Aplicação mobile-first para acompanhamento pedagógico em tempo real. Implementei o design recebido via Figma, desenvolvendo sistema de chat com suporte a mídia, validação de etapas, e estratégia de cache sofisticada para compensar API legada.
Features
Sistema de Chat
Mensagens em tempo real tutor ↔ apprenant com histórico persistente
Upload de Mídia
Fotos e vídeos pedagógicos com preview antes do envio
Validação de Etapas
Tuteur valida ou solicita refação com feedback visual imediato
Vídeos com Timestamps
Player React Player com timestamps específicos por etapa
Auto-scroll Inteligente
Hook useScrollToBottom observa mudanças e executa scroll
Token Refresh Automático
Refresh JWT 10min antes da expiração, transparente ao usuário
Múltiplos Apprenants
Seleção automática se tuteur tem 1, página de seleção se N
Mensagens de Pedagogia
Mensagens automáticas do sistema com estilização diferenciada
Optimistic Updates
Mensagens aparecem instantaneamente antes da confirmação do servidor
Cache Performático
Stale-while-revalidate para navegação zero-latency
Internacionalização
Sistema multi-idioma com react-i18next para suporte a diferentes línguas
Design Patterns
Decisões Técnicas
React Query vs Redux
Cache automático, mutations com optimistic updates, menos boilerplate
CSS Puro
Projeto mobile-first pequeno, performance sem runtime CSS-in-JS
localStorage + Cookies
JWT em cookie para segurança, dados do usuário em localStorage para acesso rápido
Upload Direto via API
Arquitetura mais simples, backend controla validações
Desafios & Soluções
API Legada Lenta
Cache sofisticado: staleTime 5-10min, gcTime 30min, placeholderData para UX instantânea
Refresh de Token Transparente
Timer 10min antes da expiração + handleTokenExpiration global para erros 401
Upload com Preview
URL.createObjectURL() para preview local, envio separado de texto e mídia
Scroll Automático em Chat
Hook customizado observa [messages, isLoading] e executa scrollIntoView