Tests E2E Playwright & DĂ©ploiement en Production
Écrire des tests End-to-End avec Playwright, conteneuriser avec Docker et déployer en production sur Coolify.
Frontend
38 presentations in this collection.
search
Loading…
React — Pages d'Administration & RBAC
Construire les pages d'administration pour les instructeurs : RBAC frontend, vues conditionnelles par rôle, tableaux de données avec tri et pagination, formulaires multi-step, bulk actions et confirmation dialogs
WebSocket & Pair Programming
Implémenter le système de pair programming avec affichage du partenaire, et les notifications temps réel via WebSocket. Stratégies de reconnexion, file d'attente de messages, et notification UI.
Soumission d'exercices & Visualisation de progression
Cycle de vie d'une soumission, optimistic UI avec React Query mutations, data visualization avec Recharts (bar, line, radial), et page de progression gamifiée avec streaks et badges.
React — Liste & Détail, Markdown et Filtrage
Implémenter les pages liste et détail avec React Router, grouper des données par catégorie, rendre du Markdown en React, navigation breadcrumb et filtrage côté client.
Dashboard React : Skeleton Loading & Polling
Construire la page dashboard avec TodayLesson, TodayExercise, PairCard et StreakBadge. Skeleton loading, React Query, polling et SSE.
Setup du projet Bootcode Hub + Authentification
Scaffolder le projet complet avec Vite + React + TypeScript + Tailwind. Configurer tous les outils (Router, Zustand, React Query, RHF, Zod). Implémenter le flow d'authentification complet connecté au backend.
Design System, Accessibilité & Bibliothèque de Composants
Semaine 6 — Projet de synthèse : design tokens, variantes, composition, accessibilité ARIA/clavier/contraste, checklist production-ready, et mini-projet bibliothèque de composants
Maîtriser les patterns avancés React
Custom hooks, Higher-Order Components, compound components avec Context, composants headless et composants génériques typés avec TypeScript.
Optimisation React
Présentation sur l'optimisation des performances React : comprendre les re-renders, utiliser React.memo, useMemo, useCallback, et implémenter le code splitting avec React.lazy et Suspense.