Ce projet est une application bancaire front-end permettant aux utilisateurs de se connecter et de gérer leurs comptes en interagissant avec une API backend.
- Page d'accueil présentant les services de la banque
- Authentification des utilisateurs (connexion/déconnexion)
- Page de profil utilisateur avec possibilité de modifier les informations (nom/prénom)
- Affichage des comptes bancaires de l'utilisateur (solde et transactions de base)
- React 19
- Redux Toolkit pour la gestion d'état
- React Router pour la navigation
- Vite comme outil de build
- Node.js (version recommandée: >= 18)
- npm ou yarn
- API Backend Argent Bank (doit être lancée séparément)
- Note : Les maquettes de design initiales (HTML/CSS statiques, wireframes) sont disponibles dans ce dépôt (
/designs).
- Note : Les maquettes de design initiales (HTML/CSS statiques, wireframes) sont disponibles dans ce dépôt (
-
Clonez ce dépôt :
git clone https://github.com/nicoriera/argent_bank_front.git cd argent_bank_front -
Installez les dépendances :
npm install # ou # yarn install
-
Configurez les variables d'environnement : Créez un fichier
.envà la racine du projet et ajoutez l'URL de l'API :VITE_API_URL=http://localhost:3001/api/v1
(Assurez-vous que l'API backend est en cours d'exécution à cette adresse)
-
Lancez l'application en mode développement :
npm run dev # ou # yarn dev
L'application sera accessible sur
http://localhost:5173(ou un autre port indiqué par Vite).
npm run dev: Lance le serveur de développement avec Hot Module Replacement (HMR).npm run build: Construit l'application pour la production dans le dossierdist/.npm run lint: Lance ESLint pour vérifier la qualité et le style du code.npm run preview: Lance un serveur local pour prévisualiser la version de production (après unnpm run build).
L'API backend fournit les utilisateurs suivants pour les tests :
- Email:
tony@stark.com - Password:
password123
- Email:
steve@rogers.com - Password:
password456
/
├── public/ # Fichiers statiques publics
├── src/
│ ├── assets/ # Images, icônes, etc.
│ ├── components/ # Composants React réutilisables
│ ├── features/ # Logique métier (slices Redux, hooks spécifiques)
│ │ ├── auth/ # Authentification (slice, actions, selectors)
│ │ └── user/ # Gestion du profil utilisateur (slice, actions, selectors)
│ ├── layouts/ # Composants de mise en page (Header, Footer)
│ ├── pages/ # Composants représentant les pages de l'application
│ ├── router/ # Configuration de React Router
│ ├── services/ # Fonctions pour interagir avec l'API
│ ├── store/ # Configuration du store Redux
│ ├── styles/ # Fichiers CSS globaux ou spécifiques (si non Tailwind pur)
│ ├── App.jsx # Composant racine de l'application
│ └── main.jsx # Point d'entrée de l'application
├── .env.example # Exemple de fichier de variables d'environnement (Optionnel)
├── .eslintrc.cjs # Configuration ESLint
├── .gitignore # Fichiers ignorés par Git
├── index.html # Template HTML principal
├── package.json # Dépendances et scripts NPM
├── README.md # Ce fichier
└── vite.config.js # Configuration de Vite
Note : Les fonctionnalités décrites ci-dessous font partie de la phase 2 du projet et ne sont pas encore implémentées dans cette version.
La phase 2 consistera à implémenter les fonctionnalités de transactions, permettant aux utilisateurs de :
- Visualiser toutes leurs transactions pour le mois en cours.
- Visualiser l 5B39 es détails d'une transaction spécifique.
- Ajouter, modifier ou supprimer des informations (catégorie, notes) sur une transaction.
La spécification OpenAPI (Swagger) pour ces futurs endpoints est définie dans le fichier swagger-transactions.yaml à la racine de ce projet.
Développé dans le cadre du projet Argent Bank pour Remede Agency.