Les Performeurs
Plateformes de Formation Professionnelle
Aperçu
Contexte
Les Performeurs est un organisme de formation professionnelle français qui accompagne les apprenants dans leur parcours de développement. Chaque apprenant est accompagné par un tuteur qui valide ses missions et étapes d'apprentissage. Le problème : un suivi pédagogique fragmenté dans des tableurs et emails, sans traçabilité centralisée du progrès, des évaluations manuelles dispersées (PIX, Cléa, soft skills), et une communication tuteur-apprenant sans historique organisé.
Solution
L'écosystème se compose de deux plateformes complémentaires : (1) LINK-Parcours - Dashboard administratif enterprise-grade pour la gestion des sessions de formation, des utilisateurs avec 8 niveaux de rôles, des évaluations de positionnement (PIX, Cléa, soft skills), et le suivi de progression (béabas, missions) ; (2) Tuto-Mission - PWA mobile-first pour l'accompagnement pédagogique en temps réel, où les tuteurs suivent les apprenants via chat avec support média et validation d'étapes.
Mon Rôle
Sur LINK-Parcours, j'ai occupé le rôle de Lead Front End et UI/UX Designer, créant tout le design de l'interface administrative et implémentant le système complet. Sur Tuto-Mission, j'ai implémenté le design reçu via Figma de House of Coding, développant des stratégies de cache avancées pour compenser l'API legacy et créer une expérience fluide.
Stack Technique
Frontend
Backend
Projets
LINK-Parcours
Dashboard Administratif de Formation
Plateforme administrative complète pour la gestion des sessions de formation, des utilisateurs et des évaluations. J'ai créé tout le design UI/UX et implémenté le système avec un contrôle d'accès basé sur 8 niveaux de rôles, des tables paginées côté serveur, et des formulaires complexes avec validation i18n.
Fonctionnalités
Gestion des Utilisateurs
CRUD complet avec 8 niveaux de rôles (superAdmin jusqu'à apprenant)
Gestion des Sessions
Création de sessions avec plusieurs jours (session_jours) et participants
Évaluation de Positionnement
Scores PIX, résultats Cléa, soft skills games, entretiens
Suivi de Progression
Béabas et missions avec calcul de pourcentage global
Tables Avancées
TanStack Table avec tri, filtres, pagination côté serveur
URL State Management
Filtres persistés dans l'URL via nuqs pour le partage
Formulaires Validés
React Hook Form + Zod avec messages i18n en français
Upload de Photo
Drag & drop avec preview et gestion de profil
Dashboard avec Graphiques
Visualisations avec Recharts pour les métriques
Système de Rôles
RoleProtectedRoute + useRoleBasedRedirect pour le contrôle d'accès
Pré-inscriptions
Gestion des candidats par session de formation
Internationalisation
Système multi-langue avec react-i18next pour le support de différentes langues
Design Patterns
Décisions Techniques
Tailwind CSS v4
Productivité accrue, design system intégré, purge automatique
Radix UI + shadcn/ui
Primitives accessibles sans styling imposé, contrôle total sur l'apparence
nuqs pour URL state
Synchronisation bidirectionnelle automatique, type-safe avec parsers
Pagination Hybride
Côté serveur pour users/sessions (grand volume), côté client pour apprenants (filtrage rapide)
React Hook Form + Zod
Performance (moins de re-renders), intégration native, meilleur TypeScript
Défis & Solutions
8 Niveaux de Rôles
Enum UserGroupCode avec codes numériques hiérarchiques, matrice de permissions par route
Filtres Persistants
État dans l'URL via nuqs + location.state pour le contexte de navigation
Système de Positionnement
Composants dédiés par type (PIX, Cléa, soft skills) + hook usePositioning centralisé
Formulaires Multi-Étapes
Tabs organisant les sections, schéma Zod partiel par section, validation à la soumission
Tuto-Mission
PWA d'Accompagnement Pédagogique
Application mobile-first pour l'accompagnement pédagogique en temps réel. J'ai implémenté le design reçu via Figma, développant un système de chat avec support média, validation d'étapes, et une stratégie de cache sophistiquée pour compenser l'API legacy.
Fonctionnalités
Système de Chat
Messages en temps réel tuteur ↔ apprenant avec historique persistant
Upload de Médias
Photos et vidéos pédagogiques avec preview avant envoi
Validation d'Étapes
Le tuteur valide ou demande une reprise avec feedback visuel immédiat
Vidéos avec Timestamps
Lecteur React Player avec timestamps spécifiques par étape
Auto-scroll Intelligent
Hook useScrollToBottom observe les changements et exécute le scroll
Token Refresh Automatique
Refresh JWT 10min avant l'expiration, transparent pour l'utilisateur
Multiples Apprenants
Sélection automatique si le tuteur en a 1, page de sélection si N
Messages de Pédagogie
Messages automatiques du système avec stylisation différenciée
Optimistic Updates
Les messages apparaissent instantanément avant la confirmation du serveur
Cache Performant
Stale-while-revalidate pour une navigation zéro-latence
Internationalisation
Système multi-langue avec react-i18next pour le support de différentes langues
Design Patterns
Décisions Techniques
React Query vs Redux
Cache automatique, mutations avec optimistic updates, moins de boilerplate
CSS Pur
Projet mobile-first petit, performance sans runtime CSS-in-JS
localStorage + Cookies
JWT en cookie pour la sécurité, données utilisateur en localStorage pour un accès rapide
Upload Direct via API
Architecture plus simple, le backend contrôle les validations
Défis & Solutions
API Legacy Lente
Cache sophistiqué : staleTime 5-10min, gcTime 30min, placeholderData pour UX instantanée
Refresh de Token Transparent
Timer 10min avant expiration + handleTokenExpiration global pour erreurs 401
Upload avec Preview
URL.createObjectURL() pour preview local, envoi séparé de texte et média
Scroll Automatique en Chat
Hook customisé observe [messages, isLoading] et exécute scrollIntoView