{"id":21951473,"url":"https://github.com/matthieu83600/argentbank-frontend","last_synced_at":"2026-04-11T00:19:53.081Z","repository":{"id":200199608,"uuid":"703767778","full_name":"Matthieu83600/ArgentBank-FrontEnd","owner":"Matthieu83600","description":"OpenClassrooms - Projet 11 - Implémentez le front-end d'une application bancaire avec React","archived":false,"fork":false,"pushed_at":"2023-11-17T14:11:14.000Z","size":508,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T22:36:17.555Z","etag":null,"topics":["react","react-redux","react-router","redux","sass"],"latest_commit_sha":null,"homepage":"https://matthieu83600-argent-bank-front-end.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matthieu83600.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-11T21:58:45.000Z","updated_at":"2023-11-13T14:10:14.000Z","dependencies_parsed_at":"2023-11-17T16:05:55.627Z","dependency_job_id":null,"html_url":"https://github.com/Matthieu83600/ArgentBank-FrontEnd","commit_stats":null,"previous_names":["matthieu83600/argentbank-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthieu83600%2FArgentBank-FrontEnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthieu83600%2FArgentBank-FrontEnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthieu83600%2FArgentBank-FrontEnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthieu83600%2FArgentBank-FrontEnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matthieu83600","download_url":"https://codeload.github.com/Matthieu83600/ArgentBank-FrontEnd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244999230,"owners_count":20544866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-redux","react-router","redux","sass"],"created_at":"2024-11-29T06:14:24.587Z","updated_at":"2025-12-30T23:45:42.736Z","avatar_url":"https://github.com/Matthieu83600.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ArgentBank\n\n![ArgentBank Icon](./src/assets/images/argentBankLogo.webp)\n\nProjet 11 du parcours \"Intégrateur Web\" chez OpenClassrooms. \nL'objectif de la mission consiste à implémenter le front-end d'une application bancaire en utilisant React.\n\n## Mission \n### Contexte\n\nVous venez d’intégrer Argent Bank comme développeur front-end.\nArgent Bank est une nouvelle banque en ligne qui souhaite percer dans le secteur bancaire.\nVous travaillez avec Mila, la cheffe de projet, pour la mise en place du tableau de bord des utilisateurs. \n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eMise en place du dashboard : phase 1\u003c/b\u003e\u003c/summary\u003e\n---\nDe : Avery Moreau\nÀ : Mila, Vous\n---\n\nBonjour Mila et l’équipe,\n\nNous allons pouvoir commencer à travailler sur notre application web React pour le nouveau système d'authentification des utilisateurs. \n\nAyant des délais très serrés, nous comptons beaucoup sur l’équipe !\n\nVoici un aperçu de ce dont nous avons besoin pour la **phase 1 : Authentification des utilisateurs**.\n\n- Créer l’application web complète et responsive avec React. Comme point de départ, nous vous avons fourni le HTML statique et le CSS pour la page d'accueil, la page de connexion et la page de profil.\n- Utiliser Redux pour gérer le state de l'ensemble de l'application.\n- Ce que doit faire l’application (voir les détails pour chacune des fonctionnalités sur nos modèles de GitHub Issues) :\n    - L'utilisateur peut visiter la page d'accueil.\n    - L'utilisateur peut se connecter au système.\n    - L'utilisateur peut se déconnecter du système.\n    - L'utilisateur ne peut voir les informations relatives à son propre profil qu'après s'être connecté avec succès.\n    - L’utilisateur ne peut pas modifier son nom ni son prénom, mais il peut modifier son pseudo.\n\nVous pouvez commencer par forker notre repo existant et suivre l’avancement du travail en créant des issues GitHub, grâce aux modèles d’Issues que nous y avons incluses.\n\nNos ingénieurs back-end ont déjà créé toutes les routes API dont vous avez besoin. Vous trouverez toute la documentation Swagger à l'intérieur du repo.\n\nUn petit point sur Redux. À ce stade de l'application, cela peut paraître un peu trop, pour le peu de données à passer entre les composants. Mais gardez bien en tête que lorsque nous travaillerons sur les transactions, nous aurons alors beaucoup plus de données à gérer.  \n\nA noter lors de l’intégration du contenu des pages : nous aimerions mettre en place des bonnes pratiques de Green Code.\n- Il faut veiller en particulier à 2 aspects lors de l’intégration : \n   - que les images soient optimisées tant sur le poids que sur les dimensions.\n   - que le code soit optimisé par la création, le plus possible, de composants réutilisables.\n\nMerci à vous, \nJe vous envoie un mail demain pour la deuxième étape. \nAvery.\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eMise en place du dashboard : phase 2\u003c/summary\u003e\n---\nDe : Avery Moreau\nÀ : Vous\n---\n\nPour la phase 2 : Transactions, nous sommes encore en phase de conception. Nous mettons au point une fonctionnalité pour les transactions, qui doit pouvoir permettre aux utilisateurs :\n    - de visualiser toutes leurs transactions pour le mois en cours, groupées par compte ;\n    - de visualiser les détails d'une transaction dans une autre vue ;\n    - d'ajouter, de modifier ou de supprimer des informations sur une transaction (on ne supprimera ou n'ajoutera pas de transaction).\n\nAfin d’avoir plusieurs avis sur la question, et comme vous travaillez sur l’application dans la phase 1, nous voulons connaître votre avis sur la façon dont vous pensez que les routes API devraient être modélisées du côté back-end. Nous avons besoin que vous nous fournissiez un document décrivant les routes API proposées pour les manipulations sur les transactions, en suivant les directives de Swagger. \n\nParmi les éléments clés à spécifier pour chaque endpoint de l’API, il faudra :\n    - la méthode HTTP (ex. : GET, POST, etc.) ;\n    - la route (ex. : /store/inventory) ;\n    - la description de ce à quoi correspond l’endpoint (ex. : Retour de l'inventaire des animaux de compagnie) ;\n    - les paramètres possibles pour tenir compte des différents scénarios (ex. : itemId (facultatif) = ID de l'article spécifique à demander à la base de données d'inventaire) ;\n    - les différentes réponses avec les codes de réponse correspondants qui ont un sens pour cet endpoint (ex. : 404 : réponse d'erreur d'article inconnu).\n\nVous pouvez utiliser la page des transactions présentée dans les maquettes pour guider vos choix (mais vous n'avez pas besoin d'implémenter cette page). Assurez-vous simplement que le document soit exporté vers un fichier YAML (c'est-à-dire Fichier \u003e Enregistrer sous YAML) en utilisant la syntaxe Swagger, qui peut être exportée dans l'outil d'édition de Swagger.\n\nNous ferons une revue de code et discuterons ensemble de la proposition d'API une fois que tout sera terminé.\n\nAu plaisir de travailler avec vous !\n\nAvery Moreau\n\u003c/details\u003e\n\n### Objectifs\n\n- ** Utiliser React pour créer l'application **\n- ** Site responsive **\n- ** Utiliser React Router pour gérer les routes de l'application ** \n- ** Utiliser Redux pour gérer le state de l'ensemble de l'application **\n- ** Mettre en place les bonnes pratiques du Green IT **\n- ** Proposer les routes API pour les manipulations sur les transactions en utilisant Swagger **\n\n### Comptes / Login\n\n| Prénom | Nom    | Email            | Mot de passe    |\n| ------ | ------ | ---------------- | --------------- |\n| Tony   | Stark  | tony@stark.com   | password123     |\n| Steve  | Rogers | steve@rogers.com | password456     |\n| ------ | ------ | ---------------- | --------------- |\n\n## Prerequisites\n\n- You will need to have Node and `npm` installed locally on your machine.\n\n\u003e [!WARNING]  \n\u003e The [backend](https://github.com/Matthieu83600/ArgentBank-Backend) must also be installed in order to launch this project.\n\n## Project setup\n\n### Install\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes, you may also see any lint errors in the console.\n\n```\nnpm run start\n```\n\n### Running tests\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n```\nnpm run test\n```\n\n### Compiles and minifies for production\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n```\nnpm run build\n```\n\n### Eject\n\n**Note: this is a one-way operation. Once you `eject`, you can't go back!**\n\nIf you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.\n\nYou don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.\n\n```\nnpm run eject\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthieu83600%2Fargentbank-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthieu83600%2Fargentbank-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthieu83600%2Fargentbank-frontend/lists"}