SpendWise est une application web conçue pour aider les utilisateurs à gérer leurs finances personnelles. Elle permet de suivre les revenus et les dépenses, d'analyser les habitudes de consommation, et de prendre des décisions éclairées pour un meilleur contrôle budgétaire. L'application est destinée à toute personne souhaitant améliorer sa gestion financière, qu'il s'agisse d'étudiants, de jeunes professionnels ou de familles.
SpendWise est une application web qui permet à l'utilisateur de gérer ses dépenses et ses revenus. L'application permet à l'utilisateur de :
- Ajouter, modifier et supprimer des transactions.
- Visualiser des graphiques sur les dépenses et les revenus dans un format simple et intuitif.
- Organiser les transactions en catégories et obtenir un aperçu de la répartition des dépenses.
Cette application est construite avec Node.js, Express, MongoDB pour la gestion des données, et Chart.js pour la visualisation graphique.
- Gestion des transactions : Ajout, suppression, mise à jour des transactions.
- Graphiques interactifs : Visualisation des dépenses et des revenus à l'aide de graphiques en barres et en camembert.
- Stockage des données : Les transactions sont stockées dans une base de données MongoDB locale.
- Alertes et notifications : Avertir les utilisateurs lorsqu'ils dépassent leur budget.
- Frontend :
- HTML5, CSS3
- JavaScript (Vanilla JS)
- Chart.js pour la visualisation des graphiques
- Backend :
- Node.js avec Express
- MongoDB pour le stockage des données
Avant de pouvoir exécuter ce projet, assurez-vous que vous avez les éléments suivants installés sur votre machine :
- Node.js (version 14 ou supérieure)
- MongoDB (version 4.x ou supérieure) – si vous utilisez une base de données locale
-
Cloner le projet : Si ce n'est pas déjà fait, clonez le projet sur votre machine.
git clone https://github.com/votre-utilisateur/spendwise.git
-
Naviguer dans le dossier du projet :
cd spendwise -
Installer les dépendances : Utilisez
npmpour installer toutes les dépendances nécessaires.npm install
-
Configurer MongoDB : Si vous utilisez une instance locale de MongoDB, assurez-vous qu'elle soit en cours d'exécution. Si vous préférez utiliser une base de données MongoDB Atlas ou autre, vous devrez modifier le fichier de configuration (par exemple,
.env) avec l'URL de connexion. -
Démarrer le serveur : Pour démarrer le serveur en mode développement (avec
nodemon), utilisez la commande suivante :npm run dev
Votre application sera alors disponible à l'adresse http://localhost:3000.
-
Ajouter une transaction : Allez dans la section "Ajouter une transaction" de l'application, entrez les détails de la transaction (type, catégorie, montant) et soumettez le formulaire.
-
Voir les transactions : Vous pouvez consulter toutes vos transactions dans la section "Voir les transactions". Vous y verrez une liste de vos transactions avec des options pour les modifier ou les supprimer.
-
Visualiser les graphiques : Dans la section "Visualisation", vous pouvez voir un graphique comparant vos dépenses et revenus, ainsi qu'un graphique circulaire montrant la répartition des dépenses par catégorie.
Le backend de l'application expose les routes suivantes :
- GET /transactions : Récupère toutes les transactions.
- POST /transactions : Ajoute une nouvelle transaction.
- DELETE /transactions: Supprime une transaction par son identifiant.
- PUT /transactions: Modifie une transaction existante par son identifiant.
Voici la structure des fichiers du projet :
spendwise/
├── controllers/
├── models/
├── routes/
├── public/
│ ├── script/
│ ├── style-sw/
│ ├── index.html
│ ├── add-transac.html
│ └── visualisation.html
├── app.js
├── package-lock.json
├── package.json
└── .gitignore
Voici un aperçu de l'application :
-
Page d'introduction :
-
Page d'accueil (index.html) :
-
Voir les transactions (transac.html) :
- Tableau des transactions :
- Vue de la modification d'une transaction :
- Vue de la modification de la date d'une transaction :
-
Visualisation des graphiques (visualisation.html) :
