Hub CSFORM
Une plateforme e-learning sur mesure pour le CFA CS FORM à Chartres, remplaçant Moodle par une solution moderne avec authentification individuelle, progression personnalisée et assistant IA pédagogique intégré. La plateforme gère plusieurs formations sur un seul site, avec une expérience fluide et responsive pensée pour les apprentis.
Site scolaire
design web & appli
Role
Web Design
Timeline
1 Mois
team
Léo Margueritte
platforme
Web
Moodle ne fonctionne pas. C'est qu'il fonctionne juste assez pour qu'on n'ose jamais le remettre en question. Les élèves ne l'ouvrent pas. Les formateurs le subissent. Et l'argent coule.
J'ai décidé de construire autre chose. Pas d'adapter, pas de "customiser", pas de coller des rustines. Construire.
Le HUB ?
Le HUB CS FORM est une plateforme pédagogique complète, conçue pour les apprentis toutes les formations à venir. Un seul site. Un seul accès. Chaque élève se connecte, retrouve sa formation, reprend là où il en était.
Une interface moderne, responsive, qui donne envie d'être ouverte, pas une corvée.
Un suivi de progression individuel et automatique, sans que le formateur ait à cocher quoi que ce soit à la main.
Un système d'authentification solide, avec un parcours par formation, chaque élève ne voit que ce qui le concerne.
Un assistant pédagogique intégré, alimenté par l'IA, capable de répondre aux questions des élèves 24h/24.
L'architecture
Le HUB est un assemblage pensé pour être léger, rapide et souverain sur ses données.
Le frontend repose sur Framer, un site SPA (Single Page Application) multi-pages qui gère le design, la navigation et le rendu des cours. Le template de base vient de CourseOS, un framework de cours en ligne que j'ai profondément modifié et étendu avec du Custom Code injecté dans le <body>.
L'authentification passe par Outseta. Chaque élève a son compte, son plan (lié à sa formation), et des content groups qui restreignent l'accès : un élève inscrit en TP CC ne voit que le parcours CC, un élève REM ne voit que le REM. Après connexion, un script de redirection vérifie le profil et route automatiquement vers la bonne page de formation.
Le backend est entièrement construit sur Google Apps Script + Google Sheets. C'est la colonne vertébrale invisible du système : chaque fois qu'un élève termine une leçon, le script HubTracking capture son email (extrait du token JWT Outseta), le nom du module, la date, l'heure de début, l'heure de fin et la duré, puis enregistre tout ça dans le Google Sheet via une requête Image tag qui contourne les restrictions CORS. Zéro serveur. Zéro base de données traditionnelle. Zéro coût d'infrastructure.
L'IA pédagogique, baptisée Prof IA, tourne sur l'API Groq (modèle Llama 3.3 70B) gratuite, performante, et intégrée directement dans la plateforme. Les élèves y accèdent soit via une page dédiée en plein écran (style ChatGPT, thème dark avec glassmorphism), soit via une bulle flottante présente sur toutes les pages du HUB. L'assistant est cadré pour ne répondre qu'aux sujets liés aux formations CS FORM, avec un ton bienveillant et accessible.
Les défis techniques
Construire sur Framer, c'est accepter de se battre contre un environnement qui n'a pas été conçu pour ça. Quelques exemples des problèmes résolus :
La navigation SPA casse tout. Dans une Single Page App, changer de page ne recharge pas le DOM, les event listeners disparaissent. J'ai contourné ça avec un pattern de setInterval qui rebinde les écouteurs en continu (le pattern watch()), combiné à des z-index: 2147483647 !important et des {capture: true} pour s'assurer que mes scripts passent toujours en priorité.
Framer limite chaque bloc de Custom Code à 5 000 caractères. Un script entier ne tient pas. Chaque fonctionnalité est donc systématiquement découpée en fichiers séparés — CSS1, CSS2, HTML, JS — injectés dans le <body> en fin de page.
Le cache de progression doit être instantané. Les élèves ne veulent pas attendre 5 secondes pour voir leurs coches vertes apparaître. Le script HubProgress lit d'abord le cache localStorage (affichage immédiat en 0 seconde), puis vérifie en arrière-plan avec le Google Sheet et met à jour si nécessaire. Résultat : 1 à 2 secondes de latence perçue.
Le choix du fournisseur IA a été un parcours. Gemini : erreurs 429 en rafale. Mistral : pas gratuit sans carte bancaire. Groq : gratuit, rapide, fiable. Les clés API sont stockées dans les Script Properties de Google Apps Script, jamais en clair dans le code, après un incident avec une clé Gemini exposée par erreur (révoquée et régénérée immédiatement).
Le système multi-formations
Le HUB est conçu pour accueillir toutes les formations du CFA sur un seul site. Le mécanisme est simple et extensible :
Chaque formation a son propre dossier de pages dans Framer (/course pour le TP CC, /course-rem pour le TP REM, /course-tai pour le TP TAI, etc.). Dans Outseta, chaque formation correspond à un plan distinct et un content group configuré.
Dans le Google Sheet, un onglet "Profils" associe chaque adresse email à une formation. Le script HubRedirect, qui s'exécute à chaque visite, lit ce profil et redirige l'élève vers le bon parcours. Les élèves CC restent sur /course par défaut, seuls les élèves des autres formations sont redirigés.
La suite
Le HUB est fonctionnel. La prochaine étape : personnaliser les 15 leçons avec les vrais contenus pédagogiques, intégrer les ressources Google Drive (cours PDF, vidéos, grilles d'évaluation), embarquer les contenus interactifs existants (quiz, escape games, cas pratiques), et lancer un pilote avec 10 à 15 élèves avant l'été 2026.
À la rentrée 2026, le TP CC sera déployé pour toute la promotion. Le TP REM suivra. Puis le TAI, le TIP, le FPA, le RPMS. L'objectif à terme : basculer l'intégralité des formations sur le HUB et décommissionner Moodle.
Et au-delà du CFA, le modèle est reproductible. Un « Kit HUB CFA » est envisagé pour d'autres centres de formation, une offre clé en main qui leur permettrait de se libérer eux aussi de Moodle, avec la même stack légère et le même rapport coût/qualité.
Ce que ce projet représente
Le HUB CS FORM, c'est la preuve qu'on n'a pas besoin de budgets massifs ni d'équipes de développeurs pour construire un outil pédagogique de qualité professionnelle. C'est un site Framer, un tableur Google, quelques scripts bien placés, et une IA open source. Le tout tenu ensemble par une conviction : les élèves méritent mieux qu'une interface de 2005.
Ce projet, je l'ai conçu, développé et documenté seul, du premier wireframe à la dernière ligne de code. Pas parce que j'avais les moyens de faire autrement, mais parce que c'était la bonne chose à faire.