- ProblèmeCréé un portefeuille gamifié (OSI, cybersécurité, pitch) que les enseignants clonent, thématisent et déploient en quelques heures.
- RôleLead full-stack engineer
- DuréeSprint de consolidation sur 6 semaines
- StackNext.js • React • Tailwind • Supabase
- FocusNext.js • React • Tailwind
- ImpactTemps de lancement d’un module: 2 jours → 4 h
Problème
Créé un portefeuille gamifié (OSI, cybersécurité, pitch) que les enseignants clonent, thématisent et déploient en quelques heures.
Contexte
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.
Portail learning gamifié avec Next.js + Supabase
Engines réutilisables pour lancer de nouveaux modules vite.
Analytics centralisées pour suivre engagement et drop‑off.
Apps pédagogiques accessibles et thémables
Design tokens + theme packs garantissent une UX cohérente.
Automations pour onboarding et badges.
Architecture
- 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.
- 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.
- Persisté la progression + leaderboards via Supabase avec APIs assainies pour export enseignant.
- Ajouté feature flags + thèmes pour lancer de nouveaux flux par classe sans cloner le code.
- Intégré des workflows n8n (onboarding, badges, emails) avec clés API cloisonnées stockées dans Doppler.
- Superposé analytics PostHog + Vercel Web Analytics pour détecter les points de friction (questions abandonnées, temps par énigme).
- Livré une passe accessibilité : contrôles sémantiques, variantes reduced-motion, transcriptions audio et contrastes élevés.
Sécurité / Modèle de menace
- 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.
Compromis & retours d’expérience
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.
Résultats
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.
Stack technique
FAQ
Comment créer de nouveaux modules rapidement ?
Hooks réutilisables et theme packs évitent les rebuilds.
Comment mesurer l’engagement ?
PostHog events et dashboards d’analytics.
Quels résultats obtenus ?
Temps de lancement réduit et session length en hausse.