Frontend

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

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

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

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

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 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

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

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

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

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

Les Emails HTML & Chrome Lighthouse

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

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

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

CSS Frontend Animations

CSS Transitions & Animations

Apprenez à créer des animations fluides avec CSS transitions et keyframes animations

View arrow_forward

css responsive frontend

Responsive Design

Responsive web design fundamentals

View arrow_forward

css bem devtools frontend francais

Consolidation CSS - BEM, Organisation & DevTools

Cours de consolidation du vendredi : revue HTML/CSS, convention BEM, organisation des fichiers CSS, debug avec DevTools, et mini-projet landing page.

View arrow_forward

CSS Layout Grid Web Design

CSS Grid

A comprehensive presentation about CSS Grid layout system

View arrow_forward

CSS FLEXBOX DISPLAY

Css Positioning

Introduction au css layout et opsitionnement flex

View arrow_forward

CSS SELECTORS UNITS

Css Fundamentals

Css Fundamentals

View arrow_forward

HTTP HTML5 Accessibilité

Comment le Web fonctionne

Comprendre les fondamentaux : HTTP, pipeline de rendu, HTML5 sémantique, formulaires accessibles et DevTools.

View arrow_forward