Système de Gestion de Tontine (Tontine Management System)

Application complète de gestion de tontines avec suivi financier, gestion des membres et analyses détaillées

Projet académique - Université de Yaoundé I
Faculté des Sciences - Département d'Informatique
INF2212 : Implémentation des Bases de Données
Janvier 2026

Fonctionnalités • Démarrage • Technologies • Équipe

---

📚 Table des Matières

• 🎯 Contexte du Projet
• ✨ Fonctionnalités
• 🛠️ Stack Technologique
• 🚀 Démarrage Rapide
• 📁 Structure du Projet
• 🎨 Interface Utilisateur
• 👥 Équipe de Développement
• 📄 Licence

🎯 Contexte du Projet

Ce projet constitue un travail de synthèse pour l'UE INF2212 (Implémentation des Bases de Données) à l'Université de Yaoundé I. Il vise à concevoir et implémenter une application complète de gestion d'une tontine, reposant sur une base de données relationnelle.

Objectifs du Projet

L'application permet de gérer efficacement :

• ✅ Les cotisations périodiques des membres
• ✅ La distribution des gains lors des tours
• ✅ Les crédits internes contractés par les membres
• ✅ L'application de pénalités
• ✅ Le financement de projets collectifs (FIAC)
• ✅ La génération de rapports financiers détaillés

Types de Tontines Supportées

1. Tontine de Présence (Obligatoire)

• Participation obligatoire pour tous les membres
• Cotisation requise à chaque séance
• Suivi automatique des présences et pénalités

2. Tontines Optionnelles

• Participation facultative
• Possibilité de souscrire plusieurs parts
• Bénéfice multiple possible selon les parts souscrites
• Contrainte majeure : Le montant cumulé perçu ne doit jamais excéder le montant total de cotisation prévu

✨ Fonctionnalités

📊 Dashboard & Analytics

• Vue d'ensemble financière en temps réel avec métriques clés
• Graphiques interactifs avec visualisation en dégradé
• Tendances des cotisations et analyses
• Suivi des activités récentes
• Cartes réactives avec couleurs accent émeraude

👥 Gestion des Membres

• Répertoire complet des membres avec recherche et pagination
• Vue détaillée des membres avec résumé financier
• Opérations CRUD complètes avec intégration API
• Récupération des données en temps réel depuis Supabase
• Notifications toast pour feedback utilisateur
• Affichage d'avatar avec initiales de secours

💳 Gestion des Tontines

• Création et gestion de plusieurs tontines avec opérations CRUD complètes
• Vue détaillée des tontines avec informations exhaustives
• Recherche et pagination pour les listes
• Suivi des calendriers et montants de cotisation
• Inscription et suivi de participation des membres
• Badges de statut (actif/terminé)
• Persistance via Supabase

💵 Système de Crédit

• Soumission et approbation de demandes de crédit
• Calcul automatique des taux d'intérêt
• Suivi des remboursements avec échéancier
• Historique de crédit par membre
• Indicateurs de statut (approuvé, en attente, rejeté)
• Contrôle de la contrainte : montant perçu ≤ montant cotisé

📅 Suivi des Séances

• Gestion du calendrier des réunions
• Suivi des présences avec pénalités automatiques
• Notes et procès-verbaux de séance
• Collecte des cotisations pendant les séances
• Historique complet des séances
• Clôture de séance avec validation

🏗️ Gestion de Projets

• Propositions de projets communautaires (FIAC)
• Allocation et suivi budgétaire
• Suivi de l'état d'avancement
• Vote des membres sur les projets
• Rapports de progression

🎨 Interface Moderne

• Barre latérale rétractable avec thème vert émeraude
• Animations fluides avec Framer Motion
• Support mode sombre/clair
• Design responsive mobile-first
• Composants d'état vide pour meilleure UX
• Validation de formulaires en temps réel

🛠️ Stack Technologique

Frontend

Catégorie	Technologie	Version	Objectif
Framework	React	18.3.1	Bibliothèque UI
Langage	TypeScript	5.5.3	Sécurité des types
Build Tool	Vite	5.4.8	Développement & Build rapide
Styling	TailwindCSS	3.4.13	CSS utilitaire
Composants UI	ShadCN/UI	Latest	Composants pré-construits
State Management	Zustand	5.0.0-rc.2	État global
Forms	React Hook Form	7.53.2	Gestion de formulaires
Validation	Zod	3.23.8	Validation de schéma
Charts	Recharts	2.15.0	Visualisation de données
Animations	Framer Motion	11.15.0	Animations fluides
Icons	Lucide React	Latest	Bibliothèque d'icônes
i18n	i18next	23.16.8	Internationalisation
Routing	React Router	7.1.1	Navigation
Notifications	Custom Toast	-	Notifications utilisateur

Backend

Catégorie	Technologie	Version	Objectif
BaaS	Supabase	Latest	Backend as a Service
Base de données	PostgreSQL	15+	Persistance des données
Auth	Supabase Auth	Latest	Authentification
Storage	Supabase Storage	Latest	Stockage de fichiers
Real-time	Supabase Realtime	Latest	Synchronisation temps réel

🚀 Démarrage Rapide

Prérequis

• Node.js 18+
• npm, yarn ou pnpm
• Git
• Compte Supabase (gratuit sur supabase.com)

---

📦 Installation en 5 Minutes

Étape 1 : Cloner le Projet

git clone https://github.com/DimitriTedom/Systeme-de-Gestion-de-Tontine.git
cd Systeme-de-Gestion-de-Tontine

Étape 2 : Installer les Dépendances

npm install

Étape 3 : Configurer Supabase

1. Créer un projet Supabase :

   • Allez sur supabase.com et créez un compte gratuit
   • Créez un nouveau projet
   • Notez l'URL et la clé anonyme (ANON KEY)

2. Exécuter le script SQL :

   • Dans votre tableau de bord Supabase, allez dans SQL Editor
   • Cliquez sur "+ New query"
   • Copiez-collez le contenu du fichier supabase/migrations/001_init_schema.sql
   • Cliquez sur "Run" pour exécuter le script
   • ✅ Vérifiez qu'il n'y a pas d'erreur (vous devriez voir "Success. No rows returned")

3. Configurer les variables d'environnement :

# Créer le fichier .env
cp .env.example .env

Éditez le fichier .env et remplacez par vos valeurs :

VITE_SUPABASE_URL=https://votre-projet.supabase.co
VITE_SUPABASE_ANON_KEY=votre_cle_anonyme_ici

Étape 4 : Lancer l'Application

npm run dev

🎉 L'application est maintenant disponible sur http://localhost:5173

---

🔐 Première Connexion

L'application utilise Supabase Auth. Pour créer votre premier compte :

1. Sur la page de connexion, cliquez sur "S'inscrire"
2. Entrez un email et mot de passe
3. Vérifiez votre email (Supabase envoie un lien de confirmation)
4. Connectez-vous avec vos identifiants

Ou créez un utilisateur directement dans Supabase :

1. Allez dans Authentication > Users dans votre tableau de bord Supabase
2. Cliquez sur "Add user" → "Create new user"
3. Entrez email et mot de passe
4. Utilisez ces identifiants pour vous connecter

---

🚀 Build pour Production

# Construire l'application
npm run build

# Prévisualiser le build
npm run preview

# Le build est dans le dossier dist/

---

🐳 Déploiement Docker (Optionnel)

Si vous préférez utiliser Docker :

# Lancer avec Docker Compose
docker-compose up -d

# L'application sera sur http://localhost

📖 Voir DOCKER.md pour plus de détails

---

📚 Documentation Complète

• 📖 manual.txt - Manuel d'utilisation complet (en français)
• 🔒 BUSINESS_RULES.md - Règles métier et validations
• 🔧 MIGRATION_GUIDE.txt - Guide de migration de la base de données

---

⚠️ Problèmes Courants

1. Erreur "Invalid API key"

• Vérifiez que votre .env contient les bonnes valeurs
• Assurez-vous d'avoir copié la clé ANON (pas la clé SERVICE)

2. Erreur "relation does not exist"

• Le script SQL n'a pas été exécuté correctement
• Retournez dans SQL Editor et exécutez 001_init_schema.sql

3. Page blanche après connexion

• Ouvrez la console (F12) pour voir les erreurs
• Vérifiez que toutes les migrations SQL ont été exécutées

📁 Structure du Projet

Systeme-de-Gestion-de-Tontine/
├── 📁 public/                     # Ressources statiques
│   └── logo.jpeg                 # Logo de l'application
├── 📁 supabase/                  # Configuration Supabase
│   └── 📁 migrations/            # Scripts SQL de migration
├── 📁 src/                       # Code source frontend
│   ├── 📁 components/            # Composants React
│   │   ├── AppSidebar.tsx       # Barre latérale principale
│   │   ├── Navbar.tsx           # Barre de navigation
│   │   ├── EmptyState.tsx       # Composant état vide
│   │   ├── 📁 auth/             # Composants d'authentification
│   │   ├── 📁 credits/          # Gestion des crédits
│   │   ├── 📁 members/          # Gestion des membres
│   │   ├── 📁 projects/         # Gestion des projets
│   │   ├── 📁 sessions/         # Suivi des séances
│   │   ├── 📁 tontines/         # Gestion des tontines
│   │   └── 📁 ui/               # Composants UI ShadCN
│   ├── 📁 hooks/                # Hooks React personnalisés
│   ├── 📁 i18n/                 # Internationalisation (FR/EN)
│   ├── 📁 lib/                  # Fonctions utilitaires
│   ├── 📁 pages/                # Composants de pages
│   │   ├── Dashboard.tsx        # Tableau de bord
│   │   ├── Members.tsx          # Gestion membres
│   │   ├── Tontines.tsx         # Gestion tontines
│   │   ├── Credits.tsx          # Gestion crédits
│   │   ├── Sessions.tsx         # Suivi séances
│   │   ├── Projects.tsx         # Gestion projets
│   │   ├── Penalties.tsx        # Gestion pénalités
│   │   ├── Tours.tsx            # Gestion tours
│   │   └── Login.tsx            # Page de connexion
│   ├── 📁 stores/               # Stores Zustand
│   │   ├── authStore.ts         # État authentification
│   │   ├── memberStore.ts       # État membres
│   │   ├── tontineStore.ts      # État tontines
│   │   ├── creditStore.ts       # État crédits
│   │   ├── sessionStore.ts      # État séances
│   │   └── ...
│   ├── 📁 types/                # Définitions TypeScript
│   ├── App.tsx                  # Composant principal
│   ├── index.css                # Styles globaux + Tailwind
│   └── main.tsx                 # Point d'entrée
├── 📄 .env                      # Variables d'environnement
├── 📄 .env.example              # Template variables
├── 📄 components.json           # Config ShadCN
├── 📄 package.json              # Dépendances & scripts
├── 📄 tailwind.config.js        # Config TailwindCSS
├── 📄 tsconfig.json             # Config TypeScript
├── 📄 vite.config.ts            # Config Vite
├── 📄 LICENSE                   # Licence MIT
└── 📄 README.md                 # Documentation

🎨 Interface Utilisateur

🌈 Palette de Couleurs

• Primaire : Vert Émeraude (emerald-500, emerald-600)
• Accent : Nuances de Teal
• Arrière-plans : Mode clair/sombre dynamique
• Dégradés : Transitions douces émeraude vers teal sur les graphiques

✨ Animations

• Transitions de page avec Framer Motion
• Barre latérale rétractable fluide
• Effets de survol sur éléments interactifs
• États de chargement et squelettes
• Animations d'entrée pour les modales

📱 Design Responsive

• Approche mobile-first
• Barre latérale rétractable sur petits écrans
• Tables responsives avec défilement horizontal
• Disposition adaptative des cartes
• Interface tactile conviviale

🧩 Composants Clés

• Badges de Statut : Indicateurs colorés pour différents états
• États Vides : Illustrations conviviales quand pas de données
• Tables de Données : Tables triables, recherchables avec pagination (10 éléments/page)
• Graphiques : Graphiques interactifs avec info-bulles
• Formulaires : Formulaires validés avec messages d'erreur en temps réel
• Cartes : Cartes surélevées avec dégradés et ombres
• Panneaux de Détails : Panneaux coulissants pour informations détaillées
• Notifications Toast : Retour utilisateur pour toutes opérations

👥 Équipe de Développement

Projet réalisé par le Groupe INF2212 - Janvier 2026

Chef de Projet

TEDOM TAFOTSI DIMITRI WILFRIED (Matricule: 23V2180)

Membres de l'Équipe

#	Nom	Matricule
2	NBIAH NJOMI ALAN KHALED	24H2037
3	DJOTASSA WAMBA ADRIEN DJERY	24F2992
4	TEKENG KAMWÉLÉ JUNIOR CAMBELL	23U2686
5	ELOUNDOU EMMANUEL RICHARD	22T2958
6	MAMBOUNE NCHOURUPOUO BASMA	24F2976
7	ABDEL ADY TCHALLA .N	23V2538
8	BAKWO NKEN BERNARDIN ULRICH	23V2277
9	KUEPOUO FOKAM ARIOL IDRISS	23U2815
10	MDUTU YOUGOUM MARC SAMUEL	24G2779
11	SARMBOYE PAULINE FIDÈLE	18S2467
12	AMOUGOU MINKOULOU JOSEPH NEIL	23V2226
13	PETANG DANIEL	23V2121
14	DIMITRI DJINKEU DURAND	23V2285
15	TCHEUTCHOUA LENCHE RAISSA	24F2440

Encadrement Académique

Professeur : Etienne Kouokam
Cours : INF2212 - Implémentation des Bases de Données
Institution : Université de Yaoundé I - Faculté des Sciences - Département d'Informatique

📄 Licence

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.

---

Développé avec ❤️ par l'équipe INF2212

Université de Yaoundé I - Faculté des Sciences
Département d'Informatique - Janvier 2026