LearnCS — plateforme d'apprentissage L1→L3

LearnCS est un site pédagogique francophone qui rassemble des cours d'informatique, des visualisations interactives et des playgrounds exécutés côté client. L'objectif est d'accompagner les étudiantes et étudiants de licence (L1 → L3) — mais aussi les autodidactes — avec des explications progressives et des ressources libres.

Fonctionnalités principales

• Modules thématiques : 50+ chapitres organisés par niveau, avec fiches de synthèse et slides imprimables
• Playgrounds intégrés : exécution de code Python (Pyodide), SQL (sql.js), C/ASM (WebAssembly) et Java directement dans le navigateur
• Visualisations animées : algorithmes, structures de données, systèmes distribués, sécurité…
• Progression locale : suivi dans localStorage, pas de compte requis
• Recherche universelle : ⌘/Ctrl+K pour naviguer entre modules, sections et champs lexical
• Mode sombre par défaut et respect des bonnes pratiques d'accessibilité (skip link, focus, ARIA)

Pile technique

• Next.js 14 — App Router, MDX, middleware
• React 18 + TypeScript 5
• Tailwind CSS 3 + animations Framer Motion
• Rendu MDX enrichi (remark-math, rehype-katex, rehype-pretty-code)
• Monaco Editor, Pyodide, sql.js, worker-loader pour les playgrounds
• Tests Vitest + coverage V8

Installation

npm install
npm run dev

• npm run dev : démarre le serveur Next.js en mode développement
• npm run build : génère le site (pré-exécute scripts/generate_search_index.js)
• npm run start : lance le serveur en production
• npm run lint : ESLint avec eslint-config-next
• npm run test : tests Vitest (pool multi-thread, coverage V8)
• npm run generate:datasets : scripts utilitaires TypeScript (ts-node)

Organisation du code

src/
  app/           Pages et routes App Router, API, routing dynamique
  components/    Visualisations, widgets, animations réutilisables
  content/       Modules MDX + registry (imports dynamiques)
  lib/           Utilitaires partagés (playgrounds, helpers)
  styles/        Tailwind + styles globaux
scripts/         Génération d'index de recherche & jeux de données
public/          Assets statiques (icônes, images OG)

Contenu MDX

• src/content/modules.json : catalogue des modules (id, titre, niveau)
• src/content/registry.tsx : association modules ↔ sections, slides, playgrounds
• Les MDX peuvent importer des composants réactifs (mdx-components.tsx pour le mapping)

Guidelines éditoriales

Des règles spécifiques sont décrites dans docs/ :

• docs/content-guidelines.md : ton, longueur recommandée, pédagogie
• docs/pedagogy.md : objectifs et limites (pas d'exécution serveur, priorisation Python, etc.)
• docs/security.md : contraintes CSP, exécutions côté client

Merci d'ouvrir une Pull Request pour toute amélioration de contenu ou de fonctionnalités. Chaque PR doit inclure :

1. Description claire du changement
2. Capture(s) ou preview (si visuel)
3. Résultats des tests (lint + vitest)

Déploiement

Le projet cible un déploiement sur Vercel (cf. docs/vercel-deploy.md). Assurez-vous de :

• Configurer NEXT_PUBLIC_SITE_URL
• Activer l'Analytics Vercel
• Vérifier les en-têtes de sécurité (CSP déjà configurée dans next.config.mjs)

Bonne exploration ✨