My Slides

oop heritage polymorphisme extends super javascript

Héritage et Polymorphisme

Comprendre extends et super(). Savoir quand utiliser l'héritage. Découvrir le polymorphisme : une même méthode, des comportements différents.

View arrow_forward

react zustand react-query forms zod state-management crud tutorial

Semaine 5 — Mini-Projet E-commerce Tutoriel

Tutoriel étape par étée pour construire un mini-projet e-commerce illustrant Zustand, React Query, React Hook Form + Zod

View arrow_forward

javascript oop encapsulation frontend

Classes JavaScript : Encapsulation

Maîtriser class, constructor, this et les propriétés privées #. Comprendre l'encapsulation et protéger les données internes.

View arrow_forward

react testing vitest frontend

Testing React avec Vitest

Apprendre la philosophie de testing frontend, configurer Vitest + React Testing Library, et écrire ses premiers tests de composants : render, screen, queries, userEvent et assertions.

View arrow_forward

react zustand react-query react-hook-form zod architecture crud

Feature CRUD Architecture

Mettre en pratique Zustand, API client, React Query, React Hook Form + Zod dans une architecture feature-based. Flow CRUD complet : list, create, update, delete.

View arrow_forward

react forms zod validation typescript

React Hook Form + Zod

Maîtriser React Hook Form pour des formulaires performants et Zod pour la validation TypeScript-first. useForm, register, handleSubmit, validation, useFieldArray et intégration avec l'UI.

View arrow_forward

oop javascript classes objets encapsulation

Introduction à l'OOP

Comprendre pourquoi on regroupe données et comportements dans des objets, et pourquoi un objet protège ses données et expose des actions. Classe vs Objet, l'analogie du moule et du gâteau.

View arrow_forward

react tanstack-query server-state caching data-fetching

Maîtriser TanStack Query — Server State Management

useQuery, useMutation, query keys, caching, invalidation, optimistic updates et DevTools

View arrow_forward

algorithmes two-sum anagrammes fréquence javascript

Algorithmes Classiques

Résoudre une série de problèmes algorithmiques classiques en combinant les techniques apprises : compteur de fréquence, Two Sum, anagrammes, et plus longue sous-chaîne.

View arrow_forward

react http fetch axios typescript api

Maîtriser les appels HTTP en React - fetch & Axios

Comprendre fetch et Axios, construire un client API typé, gérer les erreurs, configurer les variables d'environnement et comprendre CORS

View arrow_forward

algorithmes récursion javascript factorielle fibonacci

La Récursion - Cas de base, cas récursif, factorielle, Fibonacci

Comprendre le principe de la récursion : cas de base, cas récursif. Implémenter factorielle, Fibonacci et la somme d'un tableau récursivement. Visualiser la pile d'appels.

View arrow_forward

react zustand state-management hooks middleware

Zustand - State Management Minimaliste pour React

Découvrir Zustand, la bibliothèque de state management minimaliste pour React. Comprendre pourquoi Zustand, créer des stores, utiliser des selectors et configurer les middlewares.

View arrow_forward

algorithmes tri bubble-sort selection-sort O(n²)

Tri à Bulles & Tri par Sélection

Comprendre et implémenter le tri à bulles (bubble sort) et le tri par sélection (selection sort), avec visualisations étape par étape.

View arrow_forward

algorithmes recherche complexité big-o

Recherche Linéaire & Binaire

Implémenter la recherche linéaire et binaire, comprendre pourquoi trier un tableau aide à chercher plus vite.

View arrow_forward

react hooks error-boundaries architecture typescript

React Architecture Avancée — Synthèse Semaine 4

Projet de synthèse semaine 4 : custom hooks, Error Boundaries et architecture par feature pour une application React complète.

View arrow_forward

React State Management Context API useReducer

Context API & useReducer

Résoudre le prop drilling et gérer le state global avec Context API et useReducer

View arrow_forward

algorithmes complexité big-o performance pseudo-code javascript

Algorithmes & Complexité - Big O

Mesurer le temps d'exécution de différents algorithmes, comparer O(n) et O(n²) sur de vrais exemples, et analyser la complexité de fonctions existantes. Pseudo-code, notation Big O, et exercices pratiques.

View arrow_forward

react router navigation spa frontend

React Router - Navigation côté client

Navigation côté client avec React Router : BrowserRouter, Routes, Route, Link, NavLink, useParams, routes imbriquées, routes protégées et useSearchParams

View arrow_forward

json crud architecture objects

JSON & Carnet de Contacts

JSON.stringify(), JSON.parse(), récapitulatif de la semaine. CRUD complet en mémoire avec séparation données/opérations.

View arrow_forward

javascript reference value clone spread structuredClone

Valeur vs Référence - Primitifs, Objets, Shallow & Deep Clone

Comprendre la différence entre types primitifs (copie par valeur) et objets (copie par référence). Shallow clone vs deep clone avec spread et structuredClone.

View arrow_forward

React hooks DOM refs

useRef & forwardRef - Accès DOM et Valeurs Mutables

Comprendre useRef et ses deux usages (DOM et valeur mutable), accéder aux éléments DOM, différencier composants contrôlés et non-contrôlés, et utiliser forwardRef pour exposer une ref.

View arrow_forward

Destructuring d'Objets

Extraire des valeurs d'objets avec le destructuring, utiliser des valeurs par défaut, renommer des variables, et manipuler des objets imbriqués.

View arrow_forward

react hooks useeffect side-effects cleanup api

useEffect - Les effets de bord en React

Comprendre les effets de bord, l'anatomie de useEffect, le tableau de dépendances, le cleanup, et quand NE PAS utiliser useEffect.

View arrow_forward

react typescript lists state discriminated-unions français

Rendu de listes & États d'UI

Rendu de listes avec .map() et key, filtrage et tri, gestion des états loading/error/empty, et discriminated unions pour le typage des états.

View arrow_forward

javascript objets spread méthodes

Méthodes d'Objet : keys, values, entries & spread

Maîtriser Object.keys(), Object.values(), Object.entries(), Object.assign() et le spread operator sur les objets. Combiner ces méthodes avec map/filter/reduce.

View arrow_forward

react state hooks typescript immutability

Gestion de l'état local - useState

Comprendre l'état (state), utiliser useState avec TypeScript, respecter l'immutabilité, lifting state up. Le hook fondamental pour rendre les composants dynamiques.

View arrow_forward

javascript objects data-structures destructuring

Les Objets

Structures de données avec des noms explicites. Créer un objet avec {}, accéder aux propriétés (dot notation et bracket notation), méthodes et this, object destructuring.

View arrow_forward

react composition children typescript patterns

Composition React - children, compound components & render props

Comprendre et utiliser la prop children, typer avec ReactNode et PropsWithChildren, composition vs héritage, composants de layout réutilisables, compound components et render props.

View arrow_forward

react jsx typescript vite components props frontend

Découverte de React

Introduction à React : pourquoi une bibliothèque UI, création d'un projet Vite, syntaxe JSX, premiers composants fonctionnels avec props typées en TypeScript

View arrow_forward

javascript es6 spread destructuring rest-parameter arrays objects

Spread, Destructuring & Rest Parameter

Maîtriser le spread operator [...arr], le destructuring const [a, b] = arr, et le rest parameter ...args

View arrow_forward

Les Emails HTML & Chrome Lighthouse

Survivre à l'enfer du HTML email et auditer vos pages web avec Chrome Lighthouse

View arrow_forward

reduce() & Méthodes Avancées

Maîtriser .reduce(), .sort(), .every(), .some() et les méthodes avancées de tableaux JavaScript

View arrow_forward

tailwind css design-system radix-ui frontend

Tailwind Avancé - Extraction de Composants & Design System

Techniques avancées de Tailwind CSS v4 : @apply, personnalisation du config, design tokens, animations custom et introduction à Radix UI.

View arrow_forward

javascript tableaux callbacks map filter find includes chaînage

Callbacks & Méthodes de Tableau

Comprendre les callbacks et maîtriser les méthodes de tableau .map(), .filter(), .find() et .includes() avec le chaînage de méthodes

View arrow_forward

JAVASCRIPT FOR ARRAY

Les Tableaux

Présentation complète sur les tableaux JavaScript en français : création, accès, méthodes de modification, itération, et pièges courants

View arrow_forward

javascript scope fonctions pures composition architecture

Scope & Fonctions Pures

Comprendre les 3 niveaux de scope, les fonctions pures vs impures, et la composition de fonctions

View arrow_forward

CSS Tailwind Frontend Vite Responsive

Tailwind CSS — L'approche Utility-First

Présentation complète sur Tailwind CSS et la philosophie utility-first. Couvre l'installation avec Vite, les utilities principales (spacing, colors, typography, flex, grid), le responsive design avec les préfixes sm/md/lg, et les variantes d'état (hover, focus, group-hover).

View arrow_forward