Les Performeurs
Professional Training Platforms
Overview
Context
Les Performeurs is a French professional training organization that supports apprentices (apprenants) in their development journey. Each apprenant is accompanied by a tuteur who validates their missions and learning stages. The problem: fragmented pedagogical tracking in spreadsheets and emails, no centralized progress traceability, scattered manual assessments (PIX, Cléa, soft skills), and tutor-apprenant communication without organized history.
Solution
The ecosystem consists of two complementary platforms: (1) LINK-Parcours - Enterprise-grade admin dashboard for training session management, users with 8 role levels, positioning assessments (PIX, Cléa, soft skills), and progress tracking (béabas, missions); (2) Tuto-Mission - Mobile-first PWA for real-time pedagogical monitoring, where tutors track apprenants through media-supported chat and stage validation.
My Role
In LINK-Parcours, I served as Lead Front End and UI/UX Designer, creating the entire admin interface design and implementing the complete system. In Tuto-Mission, I implemented the design received via Figma from House of Coding, developing advanced caching strategies to compensate for legacy API and create a fluid experience.
Tech Stack
Frontend
Backend
Projects
LINK-Parcours
Training Admin Dashboard
Complete admin platform for training session management, users, and assessments. I created the entire UI/UX design and implemented the system with access control based on 8 role levels, server-side paginated tables, and complex forms with i18n validation.
Features
User Management
Full CRUD with 8 role levels (superAdmin to apprenant)
Session Management
Session creation with multiple days (session_jours) and participants
Positioning Assessment
PIX scores, Cléa results, soft skills games, interviews
Progress Tracking
Béabas and missions with global percentage calculation
Advanced Tables
TanStack Table with sorting, filters, server-side pagination
URL State Management
Filters persisted in URL via nuqs for sharing
Validated Forms
React Hook Form + Zod with i18n messages in French
Photo Upload
Drag & drop with preview and profile management
Dashboard with Charts
Visualizations with Recharts for metrics
Role System
RoleProtectedRoute + useRoleBasedRedirect for access control
Pre-registrations
Candidate management by training session
Internationalization
Multi-language system with react-i18next for different language support
Design Patterns
Technical Decisions
Tailwind CSS v4
Increased productivity, integrated design system, automatic purge
Radix UI + shadcn/ui
Accessible primitives without imposed styling, full control over appearance
nuqs for URL state
Automatic bidirectional sync, type-safe with parsers
Hybrid Pagination
Server-side for users/sessions (large volume), client-side for apprenants (fast filtering)
React Hook Form + Zod
Performance (fewer re-renders), native integration, better TypeScript
Challenges & Solutions
8 Role Levels
UserGroupCode enum with hierarchical numeric codes, permission matrix per route
Persistent Filters
URL state via nuqs + location.state for navigation context
Positioning System
Dedicated components per type (PIX, Cléa, soft skills) + centralized usePositioning hook
Multi-Step Forms
Tabs organizing sections, partial Zod schema per section, validation on submit
Tuto-Mission
Pedagogical Monitoring PWA
Mobile-first application for real-time pedagogical monitoring. I implemented the design received via Figma, developing a chat system with media support, stage validation, and sophisticated caching strategy to compensate for legacy API.
Features
Chat System
Real-time messages tutor ↔ apprenant with persistent history
Media Upload
Photos and pedagogical videos with preview before sending
Stage Validation
Tuteur validates or requests redo with immediate visual feedback
Videos with Timestamps
React Player with stage-specific timestamps
Smart Auto-scroll
useScrollToBottom hook observes changes and executes scroll
Automatic Token Refresh
JWT refresh 10min before expiration, transparent to user
Multiple Apprenants
Auto-selection if tuteur has 1, selection page if N
Pedagogy Messages
Automatic system messages with differentiated styling
Optimistic Updates
Messages appear instantly before server confirmation
Performant Cache
Stale-while-revalidate for zero-latency navigation
Internationalization
Multi-language system with react-i18next for different language support
Design Patterns
Technical Decisions
React Query vs Redux
Automatic cache, mutations with optimistic updates, less boilerplate
Pure CSS
Small mobile-first project, performance without CSS-in-JS runtime
localStorage + Cookies
JWT in cookie for security, user data in localStorage for quick access
Direct Upload via API
Simpler architecture, backend controls validations
Challenges & Solutions
Slow Legacy API
Sophisticated cache: staleTime 5-10min, gcTime 30min, placeholderData for instant UX
Transparent Token Refresh
Timer 10min before expiration + global handleTokenExpiration for 401 errors
Upload with Preview
URL.createObjectURL() for local preview, separate text and media sending
Auto-scroll in Chat
Custom hook observes [messages, isLoading] and executes scrollIntoView