CyberLearn
Plateforme d'apprentissage interactif - Développement · Cybersécurité · Réseaux & Systèmes
Apprendre en pratiquant : leçons interactives, sandboxes de code dans le navigateur,
parcours certifiants - pensé pour la communauté francophone.
Projet étudiant solo. Construit pour apprendre, pas pour lever des fonds.
Fonctionnalités
- Leçons interactives MDX - quiz inline, terminal simulé, diagrammes, vidéos,
et sandboxes de code exécutées dans le navigateur (Python via Pyodide,
JavaScript, C, assembleur) dans des Web Workers durcis (réseau et storage bloqués).
- Parcours certifiants - examens finaux à tirage aléatoire et temps limité,
certificats PDF vérifiables publiquement (QR code, page
/verify).
- Catalogue - 16 parcours de 12 leçons, soit 192 leçons MDX versionnées
dans
content/, chacune avec son quiz final de certification.
- Gamification - XP, niveaux, streaks quotidiens, badges à 10 types de critères
(attribution temps réel + rattrapage rétroactif), classement public.
- Test de positionnement à l'onboarding - dispense automatique des prérequis
déjà maîtrisés.
- Révisions espacées - rappel du jour : les questions ratées reviennent, en boîtes de Leitner.
- Q&A par leçon, notifications realtime, profils publics, avatars.
- Classes & établissements - un enseignant compose ses leçons et ses parcours,
les assigne à sa classe avec une échéance, distribue des corrigés, et suit
l'avancement ; l'élève reçoit le travail par mail et le retrouve sur sa page.
- Forum par catégories, bloc-notes avec partage entre comptes, amis
(demandes, droits accordés, classement entre amis sur option).
- Modération - filtrage à la publication, file de relecture côté console,
décisions notifiées à l'auteur, bannissements avec motif, échéance et appel.
- Aide & demandes - tickets avec fil de conversation des deux côtés, statuts,
et réponse par mail.
- Saisonnalité - ligues et saisons, quêtes hebdomadaires, casier de
cosmétiques, et Wrapped : un récap annuel en story plein écran, ouvert du
1er décembre au 7 janvier.
- Application mobile (Expo / React Native) sur la même base de données, via
une API dédiée
/api/mobile/*.
- Dashboard admin isolé (sous-domaine dédié, rôle ADMIN + TOTP) - CRUD leçons /
parcours / badges / quiz / défis, import MDX en masse, gestion des comptes et
des classes, file de modération, tickets, remise à zéro d'une progression,
audit log complet.
Stack
| Domaine | Choix |
|---|
| Framework | Next.js 15 (App Router, RSC, Server Actions) |
| Langage | TypeScript 5 strict - zéro any |
| Monorepo | Turborepo + pnpm 9 workspaces (catalog:) |
| Base de données | Supabase Postgres + Prisma 6 (RLS versionnée dans les migrations) |
| Auth | Supabase Auth - e-mail + mot de passe, GitHub OAuth, TOTP optionnel (obligatoire côté admin) ; rôle injecté dans le JWT par Edge Function |
| UI | Tailwind CSS v4 (CSS-first) + shadcn/ui + design system maison |
| Validation | Zod sur toutes les entrées (Server Actions, Route Handlers, formulaires) |
| State / data | TanStack Query v5 |
| Email | Resend + React Email |
| Tests | Vitest (unit + intégration) · tests RLS/IDOR sur stack Supabase éphémère · rendu des mails vérifié sur le HTML produit |
| Observabilité | Sentry (PII scrubbing), rate limiting Upstash Redis |
Architecture
cyberlearn/
├── apps/
│ ├── web/ # App publique - cyberlearn.fr (port 3000)
│ ├── admin/ # Dashboard admin - admin.cyberlearn.fr (port 3001)
│ ├── mobile/ # App native Expo / React Native (Android)
│ └── marketing/ # Rendus Remotion pour la fiche Play Store
├── packages/
│ ├── db/ # Schéma Prisma, migrations (RLS incluse), repositories, clients Supabase
│ ├── lib/ # Logique métier partagée (XP, révisions, évaluateur de badges, scoring, guards)
│ ├── ui/ # Composants de marque (XPBar, LevelBadge, BadgeMedallion…) + tokens
│ ├── types/ # Schémas Zod et types partagés
│ ├── email/ # Templates React Email
│ └── config/ # Configs ESLint / TSConfig / Biome partagées
├── content/ # Leçons MDX et quiz, versionnés
├── supabase/ # Edge Functions (hook JWT) + migrations storage
├── scripts/ # Outillage (runtimes sandbox vendorés, vérification d'intégrité)
└── docs/ # Runbooks, ADR, hardening, RGPD, infra
Principes : server-first (RSC par défaut), repository pattern (aucun appel
Prisma dans les composants), code en anglais - le français est réservé aux textes UI.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
