WebApps Portal — Suite d’apprentissage immersive

S — Le programme professionnel gérait des mini-apps séparées (Cyber Defenders, OSI Adventure, Pitch Studio) sans marque cohérente ni analytics partagées. Les profs passaient des jours à dupliquer le contenu. T — Consolider dans un portail unique avec moteurs réutilisables, télémétrie live et outils d’édition non techniques pour publier de nouveaux scénarios du jour au lendemain.

• Pages legacy mêlant vanilla JS et jQuery, rendant l’accessibilité pénible.
• Pas d’auth centralisée ni de persistance : la progression ne suivait pas l’apprenant.
• Les auteurs n’avaient pas de moyen sûr pour ajuster textes ou scoring.
• Automatisations n8n contenant des secrets en clair.

1. Refactorisé en monorepo Next.js avec design tokens partagés, primitives layout et chorégraphies motion alignées sur l’esthétique néon du portfolio.
2. Construit des moteurs de simulation (glisser-déposer OSI, cartes de scénarios, minuteurs de pitch) sous forme de hooks React headless pour réutilisation future.
3. Persisté la progression + leaderboards via Supabase avec APIs assainies pour export enseignant.
4. Ajouté feature flags + thèmes pour lancer de nouveaux flux par classe sans cloner le code.
5. Intégré des workflows n8n (onboarding, badges, emails) avec clés API cloisonnées stockées dans Doppler.
6. Superposé analytics PostHog + Vercel Web Analytics pour détecter les points de friction (questions abandonnées, temps par énigme).
7. Livré une passe accessibilité : contrôles sémantiques, variantes reduced-motion, transcriptions audio et contrastes élevés.

Les enseignants composent de nouveaux parcours en quelques heures. Le temps passé a grimpé de 42 %, la complétion de 28 % et les bugs ont chuté de 70 % grâce aux composants durcis. Le portail est devenu la vitrine utilisée auprès des écoles partenaires.

Les expériences gamifiées reposent sur des fondamentaux franchement sérieux : design system, télémétrie et automatisation sûre. En traitant chaque mini-app comme un microservice du monorepo, on gagne en vitesse sans perdre la magie.