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.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗