ArgentBank

Vue d'ensemble du projet

J'ai intégré une nouvelle banque en ligne "Argent Bank" comme développeur front-end pour mettre en place un tableau de bord des utilisateurs.

Ma mission pour ce projet était de :
● Créer l’application web complète et responsive avec React.
● Utiliser Redux pour gérer le state de l'ensemble de l'application.
● Mettre en place des bonnes pratiques de Green Code.
● Implémenter les fonctionnalités suivantes :
- L'utilisateur peut visiter la page d'accueil.
- L'utilisateur peut se connecter au système.
- L'utilisateur peut se déconnecter du système.
- L'utilisateur ne peut voir les informations relatives à son propre profil qu'après s'être connecté avec succès.
- L’utilisateur ne peut pas modifier son nom ni son prénom, mais il peut modifier son pseudo.
● Mettre en place des bonnes pratiques de Green Code.
● Imaginer les routes API qui devraient être modélisées du côté back-end afin :
- de visualiser toutes leurs transactions pour le mois en cours, groupées par compte ;
- de visualiser les détails d'une transaction dans une autre vue ;
- d'ajouter, de modifier ou de supprimer des informations sur une transaction

Les étapes du projet :
● Installer l’application en local :
- forker le repo original du projet
- lancer le projet ;
- remplir la base de données ;
- tester les routes dans Postman
- Vérifier que vous avez des versions de Node ou de mongoDB compatibles
- Mettre en place l’application et intégrer les maquettes :
- Créer notre application au travers de Create React App, et transformer le code HTML/CSS en React.
- Installer React Router pour gérer la navigation dans l’application.
- Découper les différentes pages en composants pertinents.
● Mettez en place le state global avec Redux et la connection de l’utilisateur :
- Avoir la gestion de la connexion utilisateur fonctionnelle dans l'application, et les premiers éléments présents dans le store de Redux.
● Modifiez le nom d’utilisateur via le formulaire.
● Traiter l’appel à l’API pour réaliser l’actualisation.
● Gestion des transactions : analyse des maquettes
- Lister toutes les actions nécessaires au bon fonctionnement de l’API afin de connaître tous les endpoints à créer.
● Gestion des transactions : Écrire les différents endpoints dans le fichier Swagger
- Suivre la nomenclature Swagger 2.0.

Le projet se basait sur des éléments préparés au préalable :
● le HTML statique et le CSS pour la page d'accueil, la page de connexion et la page de profil.
● les routes API dont on a besoin (voir la documentation Swagger à l'intérieur du repo).
● les GitHub issues : détails pour chacune des fonctionnalités.
● le Repository GitHub existant.

Les compétences évaluées étaient :
● 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

Pour mener à bien ce projet, j'ai suivi les cours OpenClassrooms suivants :
● Utiliser le state manager Redux pour gérer l’état de vos applications
● Appliquez les principes du Green IT dans votre entreprise
● Adoptez les API REST dans vos projets web

N’hésitez pas à consulter le code, le visuel du projet et le fichier Swagger en visitant les liens correspondants ci-dessous.