Argent Bank

• README en Français - README en Anglais

Description en Français

1. Présentation du projet

Projet réalisé dans le cadre du programme de formation Développeur Front-end JavaScript React chez OpenClassrooms.

1.1 Objectif :

• Développer une application bancaire en utilisant React et Redux pour créer une expérience utilisateur dynamique et réactive.

1.2 Compétences évaluées :

• S'authentifier à une API
• Implémenter un gestionnaire d'état dans une application React
• Intéragir avec une API
• Modéliser une API

2. Contraintes

2.1 Fonctionnelles :

• Respect de la charte graphique de la maquette (voir : 5.1 maquette )
• Le projet doit être responsive.
• Réaliser un Swagger représentant la fonctionnalité pour les transactions (voir : 5.2 swagger )

2.2 Techniques :

• Séparation logique du code dans des composants réutilisables.
• Utilisation de Rédux pour gérer les données de l'application
• Gestion des appels HTTP, utilisant des bibliothèques comme Fetch ou Axios pour interagir avec le back-end et récupérer les données nécessaires.
  • Création de services pour gérer les appels en dehors des composants React.

3. Lancement du projet :

3.1 Prérequis :

• Git
• Node pour les commandes npm ou Yarn pour les commandes yarn

3.2 Dépendances :

• React: ^18.2.0
• React-router-dom: ^6.22.3
• npm i react-router-dom ou yarn add react-router-dom
• react-redux: ^9.1.0
• npm i react-redux ou yarn add react-redux
• prop-types: ^15.8.1
• npm i prop-types ou yarn add prop-types

4. Procédure d'installation :

Cloner le dépôt :

git clone https://github.com/MeTuseL/ArgentBank

4.1 Configuration du back-end :

• Suivre les intructions du README dans le dossier "backend-api-argentbank"

4.2 Configuration du front-end :

• Accéder au dossier "frontend-argentbank"

• Installer toutes les dépendances :

  npm install ou yarn

• Lancer le front-end :

npm run start ou yarn run start

Le front-end sera accessible sur le port 3002 : http://localhost:3002/ArgentBank.

5. Autres :

5.1 Maquette

• Lien vers les maquettes

5.2 Swagger

• Swagger avec la fonctionnalité des transactions

---

Argent Bank

• README in French - README in English

Description in English

1. Project Presentation

Project carried out as part of the JavaScript React Front-end Developer training program at OpenClassrooms.

1.1 Objective:

• Develop a banking application using React and Redux to create a dynamic and responsive user experience.

1.2 Assessed Skills:

• Authenticate to an API
• Implement a state manager in a React application
• Interact with an API
• Model an API

2. Constraints

2.1 Functional:

• Respect of the graphic charter of the mockup (see: 5.1 mockup )
• The project must be responsive.
• Create a Swagger representing the transaction functionality (see: 5.2 swagger )

2.2 Technical:

• Logical separation of code into reusable components.
• Use Redux to manage application data
• Handling HTTP calls, using libraries like Fetch or Axios to interact with the back-end and retrieve necessary data.
  • Creating services to handle calls outside of React components.

3. Project Launch:

3.1 Prerequisites:

• Git
• Node for npm commands or Yarn for yarn commands

3.2 Dependencies:

• React: ^18.2.0
• React-router-dom: ^6.22.3
• npm i react-router-dom or yarn add react-router-dom
• react-redux: ^9.1.0
• npm i react-redux or yarn add react-redux
• prop-types: ^15.8.1
• npm i prop-types or yarn add prop-types

4. Installation Procedure:

Clone the repository:

git clone https://github.com/MeTuseL/ArgentBank

4.1 Back-end Configuration:

• Follow the instructions in the README in the "backend-api-argentbank" folder.

4.2 Front-end Configuration:

• Access the "frontend-argentbank" folder

• Install all dependencies:

  npm install or yarn

• Launch the front-end:

npm run start or yarn run start

The front-end will be accessible on port 3002: http://localhost:3002/ArgentBank.

5. Other:

5.1 Mockup

• Link to the mockups

5.2 Swagger

• Swagger with transaction functionality