CAHIER DES CHARGES

Application Web de Gestion des Finances Personnelles

FinanceApp — Module Depenses & Module Dettes

Version 2.0 | Avril 2025

Niveau cible : 2e annee Genie Logiciel — Cameroun

FastAPI (Back-end) React (Front-end) PostgreSQL (BDD)

A qui s'adresse ce document ?

Ce cahier des charges est redige pour un etudiant en 2e annee de Genie Logiciel au Cameroun. Il decrit de
facon claire les besoins fonctionnels, l'architecture technique (FastAPI, React, PostgreSQL), les schemas
de base de donnees et les contraintes du projet FinanceApp.
 TABLE DES MATIERES

1 Presentation Generale du Projet

2 Objectifs et Perimetre

3 Architecture Technique Generale

4 Acteurs du Systeme

5 MODULE 1 — Gestion des Depenses

6 MODULE 2 — Gestion des Dettes

7 Fonctionnalites Transversales

8 Schema de Base de Donnees (PostgreSQL)

9 API REST — Endpoints FastAPI

10 Architecture Front-end React

11 Securite et Authentification

12 Interfaces Utilisateur (Wireframes)

13 Planning et Livrables

14 Glossaire
 1. PRESENTATION GENERALE DU PROJET

1.1 Contexte
Au Cameroun, de nombreux etudiants et jeunes actifs eprouvent des difficultes a gerer leurs finances
personnelles. Les depenses quotidiennes (nourriture, transport, credit telephone) s'accumulent sans suivi, et les
prets entre amis ou aupres de tontines sont souvent mal documentes. Cette absence de traçabilite conduit a
des desequilibres budgetaires et des conflits financiers.
FinanceApp est une application web responsive qui repond a ce probleme en offrant deux modules distincts : un
module de gestion des depenses avec classification automatique, et un module de suivi des dettes avec alertes
de remboursement.

1.2 Identification du Projet

Champ Detail

Nom du projet FinanceApp

Type Application web responsive (desktop + mobile)

Version 2.0

Date de redaction Avril 2025

Auteur Etudiant 2e annee Genie Logiciel

Encadrant [Nom du professeur responsable]

Duree estimee 10 semaines

1.3 Problemes Resolus

• Difficulte a savoir combien on depense et dans quelle categorie.
• Oubli de remboursement de dettes (argent emprunte ou prete).
• Absence de rappels automatiques avant les echeances.
• Manque de vision globale sur le budget mensuel disponible.
• Aucun historique des transactions financieres personnelles.
 2. OBJECTIFS ET PERIMETRE

2.1 Objectifs Principaux

Code Objectif Module Priorite

O1 Permettre la saisie et classification automatique des depenses

Depenses HAUTE

O2 Suivre les dettes avec calcul automatique du solde restantDettes HAUTE

O3 Envoyer des notifications avant les echeances de remboursement

Dettes HAUTE

O4 Afficher des statistiques visuelles par categorie et periode Les deux MOYENNE

O5 Authentifier les utilisateurs de facon securisee (JWT) Transversal HAUTE

O6 Offrir une API REST documentee et testable (FastAPI/Swagger)

Technique HAUTE

O7 Exporter les rapports en PDF ou CSV Les deux BASSE

2.2 Perimetre — Inclus vs Exclu

INCLUS dans le projet EXCLU du projet

Gestion des depenses personnelles avec categories Comptabilite d'entreprise ou de commerce

Suivi des dettes entre particuliers Gestion de credits bancaires complexes

Notifications par email (back-end) Notifications SMS ou push mobiles (v2)

Application web (navigateur) Application mobile native (iOS/Android)

API REST avec FastAPI + Swagger GraphQL ou API temps reel (WebSocket)

Stockage PostgreSQL Synchronisation multi-appareils (v2)

Authentification JWT Connexion via reseaux sociaux (OAuth v2)

 3. ARCHITECTURE TECHNIQUE GENERALE

Architecture 3-tiers : L'application suit le modele classique Client / Serveur / Base de donnees. Le
navigateur (React) communique avec le serveur (FastAPI) via des requetes HTTP/JSON. FastAPI interroge
la base de donnees PostgreSQL et renvoie les donnees au client.

COUCHE TECHNOLOGIE ROLE PORT PAR DEFAUT

React 18 + Vite Interface utilisateur,

Presentation
+ TailwindCSS appels API, affichage localhost:5173
(Front-end)
+ Axios des donnees

FastAPI (Python) Traitement des requetes,

Logique Metier
+ SQLAlchemy ORM validation des donnees, localhost:8000
(Back-end)
+ Pydantic gestion JWT, emails

PostgreSQL 15 Stockage persistant

Donnees
+ Alembic des utilisateurs, localhost:5432
(Base de donnees)
(migrations) depenses et dettes

Envoi automatique
Notifications FastAPI
d'emails de rappel Integre au back-end
(Service email) + smtplib / SendGrid
d'echeance

3.1 Structure des Dossiers du Projet

financeapp/

backend/ # Projet FastAPI

app/

[Link] # Point d'entree FastAPI

models/ # Modeles SQLAlchemy (tables BDD)

[Link]

[Link]

[Link]

[Link]

[Link]

schemas/ # Schemas Pydantic (validation)

depense_schema.py

dette_schema.py

routes/ # Endpoints de l'API

[Link]

[Link]

[Link]

services/ # Logique metier

notification_service.py

[Link] # Connexion PostgreSQL

[Link] # Variables d'environnement

[Link]

.env # Secrets (ne pas versionner !)

frontend/ # Projet React

src/

components/ # Composants reutilisables

pages/ # Pages principales

[Link]

[Link]

[Link]

[Link]

services/ # Appels API (Axios)

[Link]

store/ # Gestion d'etat (Context ou Redux)

[Link]

[Link] # (Optionnel) Pour tout lancer d'un coup

4. ACTEURS DU SYSTEME

Acteur Type Role et Responsabilites

Utilisateur
Humain S'inscrit, se connecte, gere ses depenses et dettes. Consulte ses statistiques et recoit des noti
authentifie

API FastAPI Systeme Traite toutes les requetes HTTP du front-end. Valide les donnees, interroge PostgreSQL et ret

PostgreSQL Systeme Stocke de maniere persistante tous les utilisateurs, depenses, categories, dettes et rembourse

Service de
Systeme Tache planifiee (cron / APScheduler) qui verifie chaque jour les echeances de dettes et envoie
Notification
 5. MODULE 1 — GESTION DES DEPENSES

5.1 Description
Le module Depenses permet a l'utilisateur d'enregistrer chaque somme d'argent depensee au quotidien.
Chaque depense est obligatoirement liee a une categorie. Le systeme propose une classification automatique
basee sur des mots-cles : si l'utilisateur saisit 'pizza' ou 'bonbon', le systeme propose automatiquement la
categorie Nourriture. L'utilisateur peut accepter la suggestion ou choisir une autre categorie.

5.2 Categories de Depenses

ID Categorie Mots-cles exemples Couleur

CAT-01 Nourriture et Boissons pizza, bonbon, eau, pain, biere, restaurant, repas, djossa, soya #16A34A

CAT-02 Transport bus, taxi, carburant, moto, bendskin, essence, voyage, billet #2563EB

CAT-03 Logement et Charges loyer, electricite, eau, internet, wifi, bouteille gaz #7C3AED

CAT-04 Education cahier, stylo, scolarite, livre, impression, photocopie #0891B2

CAT-05 Habillement vetements, chaussures, sac, ceinture, habit, friperie #DB2777

CAT-06 Sante medicament, pharmacie, consultation, analyse, clinique #DC2626

CAT-07 Technologie credit, airtime, accessoire, reparation, batterie, chargeur #EA580C

CAT-08 Loisirs et Sorties cinema, sport, fete, boite, jeu, concert, piscine #CA8A04

CAT-09 Soins Personnels coiffeur, savon, parfum, creme, rasoir, gel #0D9488

CAT-10 Epargne epargne, tontine, mise de cote, cotisation #059669

CAT-11 Divers Tout ce qui ne rentre dans aucune autre categorie #64748B

5.3 Fonctionnalites Detaillees

Ajouter une depense
F-DEP-01 L'utilisateur saisit : montant (FCFA), description, categorie, date. Le systeme suggere
automatiquement la categorie via analyse de mots-cles.

Lister les depenses

F-DEP-02 Affichage paginé et filtrable de toutes les depenses. Filtres : periode (jour, semaine, mois,
personnalise), categorie, montant min/max. Tri par date ou montant.

Modifier une depense

F-DEP-03
Mise a jour de tous les champs d'une depense existante. Historique de modification conserve.
 Supprimer une depense
F-DEP-04
Suppression avec confirmation obligatoire. La suppression est definitive (soft-delete optionnel).

Tableau de bord visuel

F-DEP-05 Graphique camembert (par categorie) et graphique en barres (evolution mensuelle). Total depense
du mois, comparaison avec le mois precedent.

Definir un budget par categorie

F-DEP-06 L'utilisateur fixe un plafond mensuel par categorie. L'interface affiche une barre de progression et
alerte (couleur rouge) si le plafond est depasse ou sur le point de l'etre.

Classification automatique
F-DEP-07 A la saisie de la description, le back-end analyse les mots-cles et retourne une suggestion de
categorie. Exemple : 'pizza chez le voisin' -> CAT-01 (Nourriture).

Recherche textuelle
F-DEP-08
Barre de recherche sur la description des depenses. Resultat en temps reel.
 6. MODULE 2 — GESTION DES DETTES

6.1 Description
Le module Dettes gere deux flux financiers : l'argent que l'utilisateur doit rembourser (EMPRUNT) et l'argent
qu'on lui doit (PRET). Pour chaque dette, l'application enregistre les remboursements partiels ou totaux et
calcule automatiquement le solde restant. Un systeme de notifications previent l'utilisateur avant les echeances.

Exemple concret (Cameroun) : Martial emprunte 75 000 FCFA a sa tante le 5 mars, avec echeance le 5
avril. Le 20 mars, il rembourse 30 000 FCFA via Mobile Money. L'application affiche : Rembourse = 30 000
FCFA | Reste = 45 000 FCFA | Rappel email prevu le 29 mars (7 jours avant).

6.2 Fonctionnalites Detaillees

Creer une dette

F-DET-01 Champs : type (EMPRUNT ou PRET), nom de la personne, montant total, date du pret, date
d'echeance, nombre de jours avant rappel (1/3/7/14), description optionnelle.

Enregistrer un remboursement partiel

F-DET-02 L'utilisateur peut ajouter plusieurs paiements. Chaque paiement : montant, date, mode de paiement
(especes, Mobile Money, virement). Le solde restant est recalcule automatiquement.

Suivi automatique du solde

F-DET-03 Solde restant = Montant total - Somme de tous les remboursements. Calcul en temps reel a chaque
ajout de paiement. Affiche en FCFA et en pourcentage.

Notifications email automatiques

Le back-end (APScheduler) envoie un email de rappel N jours avant la date d'echeance. Un second
F-DET-04
email est envoye le jour J si la dette n'est pas soldee. Un troisieme email est envoye si la date est
depassee (dette en retard).

Cycle de vie et statuts

F-DET-05 EN_COURS : active, remboursement partiel ou nul. EN_RETARD : date d'echeance depassee.
SOLDEE : montant restant = 0. ARCHIVEE : soldee et deplacee dans l'historique.

Historique des remboursements

F-DET-06 Pour chaque dette, liste complete de tous les paiements : date, montant, mode, note. Permet de
retracer l'integralite des transactions.

Tableau de bord des dettes

F-DET-07 Recap : total de ce que je dois (EMPRUNT actifs), total de ce qu'on me doit (PRET actifs), nombre de
dettes en retard, prochaines echeances (7 prochains jours).
 Marquer comme soldee
F-DET-08 Bouton 'Marquer comme soldee' disponible quand solde = 0 ou manuellement. Demande
confirmation, puis archive la dette.

6.3 Cycle de Vie d'une Dette

Statut Couleur UI Condition Action possible

EN_COURS Bleu Date non depassee, solde > 0 Ajouter remboursement, modifier

EN_RETARD Rouge Date d'echeance depassee, solde > 0 Ajouter remboursement, contacter

SOLDEE Vert Solde restant = 0 FCFA Archiver

ARCHIVEE Gris Soldee et archivee par l'utilisateur Consulter uniquement

 7. FONCTIONNALITES TRANSVERSALES

Inscription / Connexion
Formulaire d'inscription (nom, email, mot de passe hashe avec bcrypt). Connexion par email + mot de passe.
Retour d'un token JWT valable 30 jours. Deconnexion cote client.

Tableau de bord global

Page d'accueil apres connexion : solde budgetaire estime (revenus declares - depenses), total depense ce
mois, resume des dettes actives, prochaines echeances.

Statistiques et graphiques
Graphiques interactifs ([Link] ou Recharts) : camembert des depenses par categorie, evolution mensuelle en
barres, comparaison mois N vs mois N-1.

Gestion du profil
L'utilisateur peut modifier son nom, email, mot de passe. Il peut aussi saisir un revenu mensuel estime pour que
l'app calcule son budget restant.

Multi-devises
FCFA par defaut. Option de saisir dans une autre devise avec conversion indicative.

Export des donnees

Bouton 'Exporter' pour telecharger l'historique des depenses ou dettes en format CSV ou PDF.

Mode responsive
L'interface React est adaptee aux ecrans mobiles (smartphone) et ordinateurs de bureau. Utilisation de
TailwindCSS pour le design responsif.
 8. SCHEMA DE BASE DE DONNEES (PostgreSQL)

Technologie : PostgreSQL 15 avec SQLAlchemy comme ORM Python et Alembic pour les migrations.
Chaque table est representee comme un modele SQLAlchemy dans FastAPI.

TABLE : users
Colonne Type SQL Contrainte Description

id SERIAL PRIMARY KEY Identifiant unique auto-incremente

nom VARCHAR(100) NOT NULL Nom complet de l'utilisateur

email VARCHAR(150) UNIQUE, NOT NULL Adresse email (identifiant de connexion)

mot_de_passe VARCHAR(255) NOT NULL Mot de passe hashe (bcrypt)

revenu_mensuel NUMERIC(12,2) DEFAULT 0 Revenu mensuel declare (optionnel)

date_creation TIMESTAMP DEFAULT NOW() Date d'inscription

est_actif BOOLEAN DEFAULT TRUE Compte actif ou suspendu

TABLE : categories
Colonne Type SQL Contrainte Description

id SERIAL PRIMARY KEY Identifiant unique

nom VARCHAR(100) NOT NULL Ex : 'Nourriture', 'Transport'

icone VARCHAR(10) Emoji representatif (ex : pizza)

couleur_hex VARCHAR(7) Code couleur (ex : #16A34A)

mots_cles TEXT Mots-cles separes par virgule pour auto-classification

est_systeme BOOLEAN DEFAULT FALSE TRUE = categorie par defaut, FALSE = personnalisee

user_id INTEGER FK [Link] NULL si categorie systeme, sinon proprietaire

TABLE : depenses
Colonne Type SQL Contrainte Description

id SERIAL PRIMARY KEY Identifiant unique

user_id INTEGER FK [Link], NOT NULL Proprietaire de la depense

categorie_id INTEGER FK [Link], NOT NULL Categorie de la depense

montant NUMERIC(12,2) NOT NULL, > 0 Montant depense en FCFA

description TEXT NOT NULL Description libre (ex : pizza chez Jean)

date_depense DATE NOT NULL Date effective de la depense

date_creation TIMESTAMP DEFAULT NOW() Date de saisie dans l'application

TABLE : budgets
Colonne Type SQL Contrainte Description

id SERIAL PRIMARY KEY Identifiant unique

user_id INTEGER FK [Link], NOT NULL Proprietaire du budget

categorie_id INTEGER FK [Link], NOT NULL Categorie concernee

montant_max NUMERIC(12,2) NOT NULL, > 0 Plafond mensuel defini par l'utilisateur

mois INTEGER NOT NULL, 1-12 Mois concerne (1 = janvier)

annee INTEGER NOT NULL Annee concernee

TABLE : dettes
Colonne Type SQL Contrainte Description

id SERIAL PRIMARY KEY Identifiant unique

user_id INTEGER FK [Link], NOT NULL Proprietaire

type_dette VARCHAR(10) CHECK IN ('EMPRUNT','PRET')

EMPRUNT = je dois | PRET = on me doit

nom_personne VARCHAR(150) NOT NULL Nom du creancier ou debiteur

montant_total NUMERIC(12,2) NOT NULL, > 0 Montant total de la dette

montant_rembourse NUMERIC(12,2) DEFAULT 0 Cumul de tous les remboursements

montant_restant NUMERIC(12,2) GENERATED (virtual) montant_total - montant_rembourse

date_emprunt DATE NOT NULL Date de creation de la dette

date_echeance DATE NOT NULL Date prevue de remboursement complet

statut VARCHAR(15) DEFAULT 'EN_COURS' EN_COURS | EN_RETARD | SOLDEE | ARCHIVEE

rappel_jours INTEGER DEFAULT 3 Nb de jours avant echeance pour email de rappel

description TEXT Notes optionnelles

date_creation TIMESTAMP DEFAULT NOW() Date d'enregistrement

TABLE : remboursements
Colonne Type SQL Contrainte Description

id SERIAL PRIMARY KEY Identifiant unique

dette_id INTEGER FK [Link], NOT NULL Reference vers la dette concernee

montant NUMERIC(12,2) NOT NULL, > 0 Montant de ce remboursement

date_remboursement DATE NOT NULL Date effective du paiement

mode_paiement VARCHAR(50) Especes, Mobile Money, Virement, etc.

note TEXT Commentaire optionnel

date_creation TIMESTAMP DEFAULT NOW() Date de saisie

 9. API REST — ENDPOINTS FASTAPI

Documentation automatique : FastAPI genere automatiquement une documentation interactive

accessible a [Link] (Swagger UI) et [Link] Chaque endpoint
peut etre teste directement depuis le navigateur.

AUTHENTIFICATION
Methode URL Description Auth ?

POST /auth/register Inscription d'un nouvel utilisateur Non

POST /auth/login Connexion, retourne un token JWT Non

GET /auth/me Informations de l'utilisateur connecte Oui

PUT /auth/me Modifier le profil (nom, email, revenu) Oui

PUT /auth/password Changer le mot de passe Oui

MODULE DEPENSES
Methode URL Description Auth ?

GET /categories Lister toutes les categories disponibles Oui

POST /categories Creer une categorie personnalisee Oui

GET /depenses Lister les depenses (avec filtres + pagination) Oui

POST /depenses Creer une nouvelle depense Oui

GET /depenses/{id} Obtenir le detail d'une depense Oui

PUT /depenses/{id} Modifier une depense existante Oui

DELETE /depenses/{id} Supprimer une depense Oui

GET /depenses/stats/mensuel Statistiques mensuelles par categorie Oui

POST /depenses/classifier Suggerer une categorie selon description Oui

GET /budgets Lister les budgets par categorie Oui

POST /budgets Definir un budget pour une categorie/mois Oui

MODULE DETTES
Methode URL Description Auth ?

GET /dettes Lister toutes les dettes (filtres: statut, type) Oui
 POST /dettes Creer une nouvelle dette Oui

GET /dettes/{id} Detail d'une dette + historique remboursements Oui

PUT /dettes/{id} Modifier une dette (echeance, description) Oui

DELETE /dettes/{id} Supprimer une dette (confirmation requise) Oui

POST /dettes/{id}/rembourser Enregistrer un remboursement partiel/total Oui

PUT /dettes/{id}/solder Marquer la dette comme soldee manuellement Oui

GET /dettes/stats/resume Resume : total du, total a recevoir, en retard Oui

GET /dettes/echeances/prochaines Dettes dont l'echeance arrive dans 7 jours Oui

9.1 Exemple de Code FastAPI — Endpoint Depenses

# backend/app/routes/[Link]

from fastapi import APIRouter, Depends, HTTPException

from [Link] import Session

from ..database import get_db

from ..[Link] import Depense

from ..schemas.depense_schema import DepenseCreate, DepenseResponse

from ..services.auth_service import get_current_user

router = APIRouter(prefix='/depenses', tags=['Depenses'])

@[Link]('/', response_model=DepenseResponse)

def creer_depense(

depense: DepenseCreate,

db: Session = Depends(get_db),

current_user = Depends(get_current_user)

):

nouvelle = Depense(**[Link](), user_id=current_user.id)

[Link](nouvelle)

[Link]()

[Link](nouvelle)

return nouvelle

@[Link]('/', response_model=list[DepenseResponse])
def lister_depenses(

categorie_id: int = None,

db: Session = Depends(get_db),

current_user = Depends(get_current_user)

):

query = [Link](Depense).filter(Depense.user_id == current_user.id)

if categorie_id:

query = [Link](Depense.categorie_id == categorie_id)

return query.order_by(Depense.date_depense.desc()).all()
 10. ARCHITECTURE FRONT-END REACT

10.1 Librairies et Outils

Librairie / Outil Version Role dans le projet

React 18.x Framework principal pour construire l'interface utilisateur

Vite 5.x Outil de build et serveur de developpement rapide

TailwindCSS 3.x Framework CSS utilitaire pour le design responsive

Axios 1.x Client HTTP pour les appels API vers FastAPI

React Router DOM 6.x Navigation entre les pages (SPA - Single Page Application)

Recharts ou [Link] Latest Graphiques interactifs (camembert, barres)

React Hook Form 7.x Gestion des formulaires avec validation

Context API ou Zustand — Gestion de l'etat global (utilisateur connecte, token JWT)

date-fns 3.x Manipulation et formatage des dates

10.2 Pages Principales

Page Route Contenu

Connexion / Inscription /login, /register Formulaires d'authentification

Tableau de bord / Resume global, alertes, stats rapides

Depenses /depenses Liste, ajout, modification, filtres

Statistiques depenses /depenses/stats Graphiques par categorie et periode

Budgets /budgets Definition et suivi des plafonds par categorie

Dettes /dettes Liste des dettes actives, archivees, resume

Detail d'une dette /dettes/:id Historique remboursements, barre progression

Profil /profil Modification des informations personnelles

10.3 Exemple de Composant React — Formulaire de Depense

// frontend/src/pages/[Link]

import { useState } from 'react';

import axios from '../services/api';

export default function AjouterDepense() {

const [form, setForm] = useState({

montant: '', description: '', categorie_id: '', date_depense: ''

});

const handleSubmit = async (e) => {

[Link]();

try {

await [Link]('/depenses', form);

alert('Depense enregistree avec succes !');

} catch (error) {

alert('Erreur : ' + [Link]);

};

return (

<form onSubmit={handleSubmit} className='space-y-4 p-6'>

<input type='number' placeholder='Montant (FCFA)'

onChange={e => setForm({...form, montant: [Link]})}

className='border rounded p-2 w-full' />

<input type='text' placeholder='Description (ex: pizza chez Jean)'

onChange={e => setForm({...form, description: [Link]})}

className='border rounded p-2 w-full' />

{/* Selecteur de categorie + Bouton Enregistrer */}

<button type='submit' className='bg-green-600 text-white px-4 py-2 rounded'>

Enregistrer la depense

</button>

</form>

);

}
 11. SECURITE ET AUTHENTIFICATION

11.1 Authentification JWT

JWT (JSON Web Token) : Apres connexion, le serveur FastAPI genere un token signe. Ce token est
stocke dans le navigateur (localStorage ou cookie HTTP-only). Pour chaque requete protegee, React
envoie ce token dans l'en-tete HTTP : Authorization: Bearer <token>. FastAPI verifie le token avant de
traiter la requete.

Mesure de Securite Implementation Librairie

Hachage des mots de passe bcrypt avec salt automatique passlib[bcrypt]

Tokens d'authentification JWT avec expiration de 30 jours python-jose

Validation des entrees Schemas Pydantic (types, contraintes) pydantic

Protection CORS Middleware FastAPI CORS (domaines autorises) [Link]

Variables sensibles Fichier .env (jamais versionne) python-dotenv

Requetes SQL securisees ORM SQLAlchemy (anti SQL injection) sqlalchemy

HTTPS en production Certificat SSL via Nginx ou Caddy Serveur web

Rate limiting Limiter les tentatives de connexion slowapi

 12. INTERFACES UTILISATEUR (Wireframes Textuels)

Outil recommande : Figma (gratuit pour etudiants) pour concevoir les maquettes graphiques. Les
wireframes ci-dessous decrivent la structure de chaque ecran principal.

Ecran 1 : Tableau de Bord (Dashboard)

• En-tete : Logo FinanceApp | Nom utilisateur | Bouton Deconnexion
• Barre de navigation gauche (sidebar) : Dashboard | Depenses | Dettes | Stats | Profil
• Carte 1 : 'Depenses ce mois' — montant total en FCFA + variation vs mois precedent
• Carte 2 : 'Dettes actives' — nombre + montant total du + montant total a recevoir
• Carte 3 : 'Prochaine echeance' — nom de la personne + date + montant restant
• Graphique rapide : camembert des 3 principales categories du mois
• Liste : 5 dernieres depenses enregistrees (date, description, montant, categorie)

Ecran 2 : Page Depenses

• Barre de filtres : Date (debut/fin) | Categorie | Montant min/max | Bouton Rechercher
• Bouton 'Ajouter une depense' (prominent, vert)
• Tableau des depenses : icone categorie | date | description | montant | actions (editer/sup.)
• Pagination en bas du tableau (10 resultats par page)
• Total de la periode affiche en bas

Ecran 3 : Formulaire Ajout/Modification Depense

• Champ : Montant (FCFA) — clavier numerique, obligatoire
• Champ : Description — texte libre, obligatoire
• Champ : Categorie — selecteur avec icones colorees + suggestion automatique
• Champ : Date — selecteur de date (defaut = aujourd'hui)
• Boutons : Enregistrer (vert) | Annuler (gris)
• Zone de suggestion : 'Nous suggerons la categorie [X] pour cette depense'

Ecran 4 : Page Dettes

• Onglets : Actives | En retard | Soldees/Archives
• Filtres : Type (EMPRUNT/PRET) | Statut | Periode
• Bouton 'Nouvelle dette' (prominent, orange)
• Carte par dette : nom personne | type badge | montant total | barre de progression | echeance
• Indicateurs en haut : Total du (rouge) | Total a recevoir (vert)

Ecran 5 : Detail d'une Dette

• En-tete : Nom + Type + Statut (badge colore) + Bouton 'Rembourser'
• Resume chiffre : Montant total | Rembourse | Reste | Date echeance | Jours restants
• Grande barre de progression circulaire (pourcentage rembourse)
• Section 'Historique des remboursements' : tableau date | montant | mode | note
• Bouton 'Marquer comme soldee' (visible si solde = 0 ou forçage manuel)
• Bouton 'Archiver' (visible si statut = SOLDEE)
 13. PLANNING ET LIVRABLES

Sprint Duree Taches Back-end (FastAPI) Taches Front-end (React) Livrable

Config FastAPI + PostgreSQL Init React + Vite

Sprint 0 Projet configure
1 sem. Modeles SQLAlchemy TailwindCSS
Mise en place BDD creee
Alembic migrations Axios + React Router

Endpoints auth Pages Login/Register

Sprint 1 Authentification
1 sem. (register/login/JWT) Gestion token JWT
Auth & Users fonctionnelle
Hachage bcrypt Protection routes

CRUD depenses Page Depenses

Sprint 2 Module Depenses
2 sem. CRUD categories Formulaire ajout
Module Depenses complet
Classification mots-cles Suggestion categorie

Endpoint stats Graphiques Recharts

Sprint 3 Statistiques
1 sem. Endpoint budgets Page Statistiques
Budgets & Stats visibles
Calculs aggregats Barre budget

CRUD dettes Page Dettes

Sprint 4 Module Dettes
2 sem. CRUD remboursements Detail dette
Module Dettes complet
Logique statuts Barre progression

APScheduler
Sprint 5 Affichage alertes UI Notifications
1 sem. Verification echeances
Notifications Badges 'En retard' operationnelles
Envoi emails SMTP

Tests unitaires pytest Tests E2E

Sprint 6 Application finale
2 sem. Corrections bugs Responsivite mobile
Tests & Deploy deployable
Documentation API Optimisation UI

Duree totale : 10 semaines | Equipe recommandee : 2 a 3 etudiants (1 back-end, 1 front-end, 1

fullstack/tests) | Methode : Agile Scrum avec reunions de suivi hebdomadaires.
 14. GLOSSAIRE

Interface de programmation permettant a deux systemes (React et FastAPI) de

API REST
communiquer via HTTP en echangeant des donnees JSON.

Framework Python moderne pour creer des APIs REST. Il genere automatiquement
FastAPI
une documentation Swagger et est tres rapide.

Librairie JavaScript developpee par Meta pour construire des interfaces utilisateur
React
interactives (front-end).

Systeme de gestion de base de donnees relationnelle open-source, robuste et adapte

PostgreSQL
aux projets serieux.

ORM (Object-Relational Mapper) Python : permet d'ecrire des requetes SQL sous
SQLAlchemy
forme de code Python orienté objet.

Outil de migration de base de donnees pour SQLAlchemy. Gere les modifications de

Alembic
structure (ajout/suppression de colonnes).

JSON Web Token : format de token securise utilise pour l'authentification. Contient
JWT
des informations signees numeriquement.

Algorithme de hachage securise pour les mots de passe. Rend impossible la

bcrypt
recuperation du mot de passe original.

Librairie Python pour la validation des donnees. S'assure que les donnees reçues par
Pydantic
l'API respectent le bon format.

Librairie Python pour programmer des taches automatiques (ex : verifier les
APScheduler
echeances de dettes chaque jour a 8h).

Cross-Origin Resource Sharing : mecanisme qui autorise (ou interdit) React a appeler
CORS
l'API FastAPI depuis un autre domaine.

Object-Relational Mapper : couche logicielle qui fait le lien entre les objets Python et
ORM
les tables SQL.

Script qui modifie la structure de la base de donnees sans perdre les donnees
Migration
existantes.

Une URL specifique de l'API qui repond a un type de requete precise (GET, POST,
Endpoint
PUT, DELETE).
 Create, Read, Update, Delete : les quatre operations de base sur une base de
CRUD
donnees.

Framework CSS qui fournit des classes utilitaires pour styler rapidement des
TailwindCSS
interfaces sans ecrire de CSS custom.

Franc CFA : monnaie officielle utilisee au Cameroun et dans d'autres pays d'Afrique
FCFA
centrale et occidentale.

Outil de build JavaScript moderne, beaucoup plus rapide que l'ancien Create React
Vite
App.

Single Page Application : l'application React charge une seule page HTML et met a
SPA
jour le contenu dynamiquement sans rechargement.

En methode Agile, periode de travail courte (1 a 2 semaines) avec un objectif precis et

Sprint
mesurable.

Usage Academique — Genie

FinanceApp — CDC v2.0 FastAPI | React | PostgreSQL | 2025
Logiciel