Les Performeurs
Plataformas de Formación Profesional
Visión General
Contexto
Les Performeurs es un organismo de formación profesional francés que acompaña a los aprendices en su trayectoria de desarrollo. Cada aprendiz es acompañado por un tutor que valida sus misiones y etapas de aprendizaje. El problema: seguimiento pedagógico fragmentado en hojas de cálculo y emails, sin trazabilidad centralizada del progreso, evaluaciones manuales dispersas (PIX, Cléa, soft skills), y comunicación tutor-aprendiz sin historial organizado.
Solución
El ecosistema consiste en dos plataformas complementarias: (1) LINK-Parcours - Dashboard administrativo enterprise-grade para gestión de sesiones de formación, usuarios con 8 niveles de roles, evaluaciones de posicionamiento (PIX, Cléa, soft skills), y seguimiento de progreso (béabas, missions); (2) Tuto-Mission - PWA mobile-first para acompañamiento pedagógico en tiempo real, donde los tutores monitorean aprendices a través de chat con soporte de media y validación de etapas.
Mi Rol
En LINK-Parcours, actué como Lead Front End y UI/UX Designer, creando todo el diseño de la interfaz administrativa e implementando el sistema completo. En Tuto-Mission, implementé el diseño recibido via Figma de House of Coding, desarrollando estrategias de cache avanzadas para compensar API legacy y crear una experiencia fluida.
Stack Técnico
Frontend
Backend
Proyectos
LINK-Parcours
Dashboard Administrativo de Formación
Plataforma administrativa completa para gestión de sesiones de formación, usuarios y evaluaciones. Creé todo el diseño UI/UX e implementé el sistema con control de acceso basado en 8 niveles de roles, tablas paginadas server-side, y formularios complejos con validación i18n.
Funcionalidades
Gestión de Usuarios
CRUD completo con 8 niveles de roles (superAdmin hasta aprendiz)
Gestión de Sesiones
Creación de sesiones con múltiples días (session_jours) y participantes
Evaluación de Posicionamiento
Scores PIX, resultados Cléa, soft skills games, entrevistas
Seguimiento de Progreso
Béabas y missions con cálculo de porcentaje global
Tablas Avanzadas
TanStack Table con ordenación, filtros, paginación server-side
URL State Management
Filtros persistidos en URL via nuqs para compartir
Formularios Validados
React Hook Form + Zod con mensajes i18n en francés
Upload de Foto
Drag & drop con preview y gestión de perfil
Dashboard con Gráficos
Visualizaciones con Recharts para métricas
Sistema de Roles
RoleProtectedRoute + useRoleBasedRedirect para control de acceso
Pre-inscripciones
Gestión de candidatos por sesión de formación
Internacionalización
Sistema multi-idioma con react-i18next para soporte de diferentes idiomas
Design Patterns
Decisiones Técnicas
Tailwind CSS v4
Productividad aumentada, design system integrado, purge automático
Radix UI + shadcn/ui
Primitives accesibles sin styling impuesto, control total sobre apariencia
nuqs para URL state
Sincronización bidireccional automática, type-safe con parsers
Paginación Híbrida
Server-side para users/sessions (gran volumen), client-side para aprendices (filtrado rápido)
React Hook Form + Zod
Performance (menos re-renders), integración nativa, mejor TypeScript
Desafíos & Soluciones
8 Niveles de Roles
Enum UserGroupCode con códigos numéricos jerárquicos, matriz de permisos por ruta
Filtros Persistentes
Estado en URL via nuqs + location.state para contexto de navegación
Sistema de Posicionamiento
Componentes dedicados por tipo (PIX, Cléa, soft skills) + hook usePositioning centralizado
Formularios Multi-Etapas
Tabs organizando secciones, schema Zod parcial por sección, validación en submit
Tuto-Mission
PWA de Acompañamiento Pedagógico
Aplicación mobile-first para acompañamiento pedagógico en tiempo real. Implementé el diseño recibido via Figma, desarrollando sistema de chat con soporte de media, validación de etapas, y estrategia de cache sofisticada para compensar API legacy.
Funcionalidades
Sistema de Chat
Mensajes en tiempo real tutor ↔ aprendiz con historial persistente
Upload de Media
Fotos y videos pedagógicos con preview antes del envío
Validación de Etapas
Tutor valida o solicita rehacerlo con feedback visual inmediato
Videos con Timestamps
Player React Player con timestamps específicos por etapa
Auto-scroll Inteligente
Hook useScrollToBottom observa cambios y ejecuta scroll
Token Refresh Automático
Refresh JWT 10min antes de expiración, transparente al usuario
Múltiples Aprendices
Selección automática si tutor tiene 1, página de selección si N
Mensajes de Pedagogía
Mensajes automáticos del sistema con estilización diferenciada
Optimistic Updates
Mensajes aparecen instantáneamente antes de confirmación del servidor
Cache Performático
Stale-while-revalidate para navegación zero-latency
Internacionalización
Sistema multi-idioma con react-i18next para soporte de diferentes idiomas
Design Patterns
Decisiones Técnicas
React Query vs Redux
Cache automático, mutations con optimistic updates, menos boilerplate
CSS Puro
Proyecto mobile-first pequeño, performance sin runtime CSS-in-JS
localStorage + Cookies
JWT en cookie para seguridad, datos de usuario en localStorage para acceso rápido
Upload Directo via API
Arquitectura más simple, backend controla validaciones
Desafíos & Soluciones
API Legacy Lenta
Cache sofisticado: staleTime 5-10min, gcTime 30min, placeholderData para UX instantánea
Refresh de Token Transparente
Timer 10min antes de expiración + handleTokenExpiration global para errores 401
Upload con Preview
URL.createObjectURL() para preview local, envío separado de texto y media
Scroll Automático en Chat
Hook customizado observa [messages, isLoading] y ejecuta scrollIntoView