✅ 1.1 Récupération des posts avec usePosts
J'ai créé un hook personnalisé usePosts dans src/hooks/usePosts.jsx qui utilise useState et useEffect pour récupérer les posts depuis l'API https://dummyjson.com/posts. Les données sont stockées dans un état local et mises à jour lors du chargement.

✅ 1.2 Affichage des posts avec PostList
Le composant PostList (dans src/components/PostList.jsx) reçoit les données des posts via props et les affiche sous forme de liste. Chaque post montre le titre, le corps du texte, les tags et le nombre de réactions.

✅ 1.3 Recherche avec PostSearch
Le composant PostSearch permet à l'utilisateur de rechercher des posts par titre ou contenu. Lorsqu'on tape dans l'input, un état de recherche est mis à jour et filtré dynamiquement sur les posts via le hook useEffect.

✅ 2.1 Délais avec useDebounce
J’ai créé un hook personnalisé useDebounce dans src/hooks/useDebounce.jsx pour ralentir les mises à jour d’un état. Il est utilisé dans PostSearch pour éviter trop de recherches à chaque frappe.

✅ 2.2 Sauvegarde avec useLocalStorage
Le hook useLocalStorage (dans src/hooks/useLocalStorage.jsx) permet de garder des données même après rechargement de la page. Par exemple, il peut garder le thème ou une recherche précédente.

✅3.1 –Création du ThemeContext pour gérer le thème clair/sombre:
J’ai créé un fichier src/context/ThemeContext.jsx qui utilise React.createContext() pour centraliser la gestion du thème.
Le provider ThemeProvider utilise un hook personnalisé useLocalStorage pour mémoriser le thème (light ou dark), même après un rechargement de la page. Cela permet d’avoir un thème persistant.

✅3.2 – Implémentation du composant ThemeToggle:
Dans src/components/ThemeToggle.jsx, j’ai créé un bouton qui permet de basculer entre le thème clair et sombre.
Il utilise le hook useTheme() fourni par le contexte pour accéder à theme et toggleTheme.

✅3.3 – Optimisation avec useCallback et useMemo:
Pour éviter des re-rendus inutiles, j’ai utilisé useCallback pour mémoriser la fonction toggleTheme, afin qu’elle ne soit pas recréée à chaque rendu.

✅4.1 – Implémenter le chargement infini des posts avec useIntersectionObserver:
J’ai créé un hook personnalisé useIntersectionObserver(ref, callback) qui détecte lorsqu’un élément devient visible à l’écran.

✅4.2 –J’ai conçu un composant réutilisable appelé PostDetails, qui affiche les informations détaillées d’un article lorsque l’utilisateur le sélectionne. Ce composant est rendu de manière conditionnelle à partir de PostList grâce à l’état selectedPost.

✅4.3 –J’ai intégré une fonctionnalité de filtrage par tag directement dans la section de recherche.

📁 ./
├─ 📄 README.md
├─ 📄 package.json
├─ 📁 public/
│  └─ 📄 index.html
└─ 📁 src/
   ├─ 📄 App.js               # Composant principal de l'application
   ├─ 📄 App.css              # Styles CSS de l'application
   ├─ 📁 components/
   │  ├─ 📄 PostList.js       # Liste des posts
   │  ├─ 📄 PostSearch.js     # Barre de recherche
   │  ├─ 📄 PostDetails.js    # Détails d'un post
   │  ├─ 📄 ThemeToggle.js    # Bouton pour changer de thème
   │  └─ 📄 LoadingSpinner.js # Indicateur de chargement
   ├─ 📁 hooks/
   │  ├─ 📄 usePosts.js       # Hook pour gérer les posts
   │  ├─ 📄 useDebounce.js    # Hook pour débouncer les valeurs
   │  ├─ 📄 useLocalStorage.js # Hook pour gérer le localStorage
   │  └─ 📄 useIntersectionObserver.js # Hook pour le chargement infini
   ├─ 📁 context/
   │  └─ 📄 ThemeContext.js   # Contexte pour le thème
   ├─ 📄 index.css
   └─ 📄 index.js

GET https://dummyjson.com/posts

GET https://dummyjson.com/posts/{id}

GET https://dummyjson.com/posts/search?q={terme}

GET https://dummyjson.com/posts/tag/{tag}