Roadmap Complète React Developer
Cette roadmap contient 20 exercices React progressifs allant du niveau débutant au niveau avancé. Chaque
exercice décrit précisément ce que l’application doit faire avec une architecture claire, des indices, une maquette UI,
des étapes détaillées et une correction complète.
1. Carte Profil Étudiant
Énoncé :
Créer une application qui affiche les informations complètes d’un étudiant : photo, nom, matricule, classe et
moyenne générale. L’utilisateur doit pouvoir modifier le thème clair/sombre et afficher plusieurs étudiants
dynamiquement.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Créer un composant StudentCard recevant les données via props. Utiliser useState pour le thème. Créer un tableau
d’étudiants et utiliser map() pour afficher les cartes.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
2. Gestion des Notes
Énoncé :
Créer une application permettant d’ajouter des notes d’élèves via un formulaire. Les notes doivent être validées,
enregistrées et affichées dans un tableau avec calcul automatique des moyennes.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser useState pour gérer les champs du formulaire. Valider les notes entre 0 et 20. Utiliser map() pour afficher les
notes et reduce() pour calculer la moyenne.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
3. Upload de Photos
Énoncé :
Créer une application permettant à un utilisateur d’importer une image depuis son téléphone ou ordinateur et
afficher un aperçu instantané.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser FileReader pour lire l’image. Sauvegarder le fichier dans un state React et afficher l’aperçu avec une balise
img.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
4. Todo Agricole
Énoncé :
Créer une application de tâches pour agriculteurs permettant d’ajouter, modifier, supprimer et filtrer des tâches
agricoles.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Créer des composants TodoForm et TodoList. Utiliser useState pour gérer les tâches et filter() pour les recherches.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
5. Panier Agritech
Énoncé :
Créer une boutique agricole où l’utilisateur peut ajouter des produits dans un panier sauvegardé dans localStorage.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser [Link]() et getItem(). Créer une logique d’ajout/suppression de produits.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
6. Dark Mode App
Énoncé :
Créer une interface React avec mode sombre persistant après rechargement de la page.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser useEffect pour sauvegarder le thème dans localStorage.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
7. Application Multi Pages
Énoncé :
Créer une application scolaire contenant plusieurs pages : Accueil, Étudiants, Notes et Contact.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Installer React Router et configurer BrowserRouter, Routes et Route.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
8. Dashboard Navigation
Énoncé :
Créer un dashboard avec sidebar responsive et sous-pages dynamiques.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser des routes imbriquées et NavLink pour la navigation active.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
9. Gestion Utilisateur
Énoncé :
Créer un système de partage d’état utilisateur entre plusieurs composants.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Créer un UserContext avec createContext et Context Provider.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
10. Boutique Agricole Avancée
Énoncé :
Créer une boutique complète avec gestion globale du panier et favoris.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser Context API pour partager le panier et les favoris.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
11. Gestion Avancée du State
Énoncé :
Créer une application complexe de gestion scolaire avec plusieurs actions.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser useReducer avec des actions ADD, DELETE et UPDATE.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
12. CRUD Étudiants
Énoncé :
Créer un CRUD complet permettant d’ajouter, modifier, supprimer et afficher des étudiants.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Créer des fonctions CRUD et organiser la logique dans des composants séparés.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
13. API Pays Africains
Énoncé :
Créer une application qui récupère et affiche des pays africains depuis une API publique.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser fetch() dans useEffect et gérer les erreurs avec try/catch.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
14. Dashboard API Agricole
Énoncé :
Créer un dashboard qui affiche des données agricoles récupérées via Axios.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Installer Axios et créer un dossier services/[Link].
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
15. Login System
Énoncé :
Créer un formulaire de connexion avec validation complète des champs.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Valider email et mot de passe avant connexion.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
16. Protected Dashboard
Énoncé :
Empêcher l’accès au dashboard sans authentification.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Créer un composant ProtectedRoute avec Navigate.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
17. Firebase Upload
Énoncé :
Créer une application permettant d’envoyer des images dans Firebase Storage.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Configurer Firebase et utiliser uploadBytes.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
18. Firebase Auth
Énoncé :
Créer un système d’authentification Firebase complet.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser createUserWithEmailAndPassword et signInWithEmailAndPassword.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
19. Optimisation React
Énoncé :
Optimiser une application React lente contenant beaucoup de composants.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Utiliser [Link], useMemo et useCallback.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
20. Projet Final Agribox
Énoncé :
Créer une plateforme agritech complète avec authentification, dashboard, CRUD, upload image, API et dark mode.
Indices :
• Découper l’interface en composants réutilisables
• Utiliser les hooks React correctement
• Créer des dossiers organisés
• Tester les erreurs utilisateur
Architecture des dossiers :
src/
■■■ components/
■■■ pages/
■■■ hooks/
■■■ context/
■■■ services/
■■■ assets/
■■■ [Link]
Maquette UI :
UI attendue :
- Header moderne
- Sidebar responsive
- Boutons modernes
- Cartes dynamiques
- Responsive mobile
Étapes détaillées :
1 Créer le projet avec Vite
2 Créer les composants principaux
3 Créer les hooks nécessaires
4 Ajouter les formulaires
5 Créer la validation
6 Créer les routes
7 Ajouter les appels API
8 Tester le responsive
Correction complète :
Structurer l’application en modules, créer une architecture scalable et optimiser les performances.
Défis bonus :
• Ajouter animations
• Ajouter dark mode
• Ajouter pagination
• Créer une version mobile
Compétences Finales
Après avoir terminé cette roadmap, tu seras capable de : - Développer des applications React modernes - Structurer
un projet professionnel - Utiliser Firebase et les APIs - Créer un portfolio solide - Préparer des projets de soutenance
innovants