DEV. FRONT-END by CÉDRIC VÉRAUD

Note : Le travail présenté ici est issu d'un module de la formation d'intégrateur web proposée par OpenClassRooms, pour laquelle j'ai obtenu la certification RNCP38145 en octobre 2025. Le client comme le projet sont fictifs mais font l'objet d'un scénario calqué sur les conditions réelles. Les livrables attendus sont jaugés à l'aulne de ce scénario.
⪢ Voir mon évaluation.


Contexte du projet

Pour ce projet, il s'agissait de travailler sur le développement front-end d’une application bancaire en utilisant React et Redux afin de créer une expérience utilisateur dynamique et réactive. La mission principale était d'intégrer le front-end avec le back-end via des appels API et d'écrire des appels à l'API REST pour connecter les deux parties de l'application en assurant une communication fluide entre le client et le serveur.

Objectifs pédagogiques

✦ Afficher les données du back end sur l'interface via des appels API
✦ Configurer des routes API pour la communication client / serveur
✦ Implémenter la gestion des données avec Redux pour assurer le fonctionnement du front-end

Page d'accueil du site Argent Bank

GitHub


Afin d'assurer un suivi pertinent lors des échanges avec mon mentor et de préparer la soutenance de fin de projet, le code a été versionné sur GitHub via des commits réguliers. Ce code est public et accessible sur mon compte GitHub

Dépendances et outils du back-end


La partie back-end était fournie dans le scénario du projet.
Pour autant, il s'agissait de le faire fonctionner, de le tester, et de savoir lire la documentation.
Pour ce faire j'ai utilisé les outils suivants :

• Node.js pour l'exécution de javascript côté serveur
• MongoDB pour gérer la base de données
• Swagger pour lire la documentation de l'API
• Postman pour tester les routes de l'API

Installation de React avec Vite


Vite est un outil de construction qui m'a permis d'installer un pré-template React, auquel j'ai ajouté les dépendances suivantes :

• React-Router pour gérer la navigation entre les différentes pages de l'application
• Es-Lint pour assurer un code lisible et maintenable
• SASS pour structurer les feuilles de style efficacement

Création de composants-fonctions réutilisables


Dans un environnement React, le javascript est modulaire (.jsx) ce qui permet de créer des composants réutilisables qui optimisent le rendu. Au lieu de charger des suites de pages, une application React va appeler les composants javascript souhaités pour construire la page indiquée via une route (React-Router), allégeant ainsi le chargement. Un composant est un contenant qui affiche le contenu, y compris dynamique, qui lui est fourni.

Score Green IT

Conformément au scénario l'application est entièrement optimisée et obtient un score de A (la plus haute note) en terme de green IT. Traitement et format des images, minification des fichiers, composants légers, requêtes limitées au strict nécessaire... J'ai ainsi obtenu une interface légère et performante qui répond aux standards les plus stricts du moment.

Installation de Redux-Toolkit


Les bonnes pratiques préconisaient d’utiliser Redux avec la librairie Redux-Toolkit.
En centralisant l'état de l'application dans un Store unique, Redux permet de gérer cet état de manière plus prévisible et de simplifier le debug. Redux-Toolkit, lui, remplace et simplifie le processus de configuration de Redux :

• Gestion du code asynchrone
• Déclenchement automatique des actions
• Génération combinée d'actions, de reducers et de sélecteurs
• Composition du store par fonctionnalités grâce à createSlice()

Appels API centralisés

En plus des actions, reducers et slices centralisés grâce à Redux, j'ai également créé un composant appelé APIfetch(); destiné à intercepter et formater toute requête à l'API. Cela simplifie ces dernières et offre une économie de code quand elles sont nécessaires. Les réponses formatées reçues de l'API sont ainsi traitées plus efficacement.

État de l'application

Comme nous venons de le voir, l'état de l'application est centralisé et peut être suivi en direct grâce aux outils de développement proposés par Redux. Ci-dessous, l'état de l'application avant et après la connection de l'utilisateur

Validations

1. Afficher les données du back end sur l'interface via des appels API
✔ Validé
→ Cedric a parfaitement réussi à implémenter l'affichage des données en provenance du back-end sur l'interface. Il a utilisé un token JWT pour assurer l'authentification des utilisateurs et a bien géré les appels API pour afficher les informations dans le profil de l'utilisateur et d'autres parties de l'application.

2. Configurer des routes API pour la communication client / serveur
✔ Validé
→ Les routes API sont correctement configurées, et l’étudiant a respecté les bonnes pratiques en matière de communication client-serveur. La documentation Swagger est bien fournie, avec des endpoints clairs pour chaque action nécessaire. Les codes de réponse sont également cohérents avec chaque route. Cedric a bien justifié ses choix concernant les routes et leurs paramètres, et l'intégration avec le front-end a été réalisée efficacement.

3. Implémenter la gestion des données avec Redux pour assurer le fonctionnement du front
✔ Validé
→ La gestion du state avec Redux a été implémentée de manière cohérente et bien structurée. Cedric a mis en place un store global pour gérer les données nécessaires au bon fonctionnement de l'application, avec des actions et des reducers bien définis. Lorsqu'un utilisateur modifie son profil (par exemple, le nom d'utilisateur), la modification se reflète instantanément dans la barre de connexion, prouvant ainsi la bonne gestion du state global avec Redux. De plus, Cedric a bien expliqué le flux des données dans Redux et a justifié ses choix de manière convaincante.

Livrable

Points forts :
→ Code propre et bien structuré avec des bonnes pratiques clairement appliquées
→ Bonne utilisation de Redux pour la gestion du state global
→ Explication claire du flux des données dans le système Redux
→ API bien intégrée, avec une documentation Swagger complète et des routes cohérentes.

Axes d'amélioration :
→ Ajouter des commentaires en anglais pour une meilleure uniformité dans le code et la documentation.

Remarques :
→ Très bonne présentation et organisation du projet.