414 lines
15 KiB
Markdown
414 lines
15 KiB
Markdown
# Mes Budgets Participatifs
|
|
|
|
Une application web moderne pour gérer des campagnes de budgets participatifs, permettant aux collectifs de décider collectivement de leurs dépenses budgétaires.
|
|
|
|
|
|
|
|
## 🚀 Technologies utilisées
|
|
|
|
- **Frontend**: Next.js 15 avec TypeScript et App Router
|
|
- **UI/UX**: Tailwind CSS 4 + Shadcn/ui + Lucide React
|
|
- **Base de données**: PostgreSQL via Supabase avec RLS sécurisé
|
|
- **Authentification**: Supabase Auth avec système de rôles admin/super_admin
|
|
- **Sécurité**: Row Level Security (RLS) avec politiques granulaires
|
|
- **Email**: Nodemailer avec support SMTP
|
|
- **Déploiement**: Compatible Vercel, Netlify, etc.
|
|
|
|
## 📋 Fonctionnalités
|
|
|
|
### ✅ Implémentées
|
|
|
|
#### 🏠 **Page d'accueil**
|
|
- Présentation moderne de l'application
|
|
- Design responsive avec sections Hero, Features et CTA
|
|
- Navigation vers l'espace administration sécurisé
|
|
|
|
#### 🔐 **Authentification et Sécurité**
|
|
- **Système de rôles** : Administrateurs et Super Administrateurs
|
|
- **Authentification robuste** : Supabase Auth avec validation côté serveur
|
|
- **Politiques RLS sécurisées** : Row Level Security avec permissions granulaires
|
|
- **Protection des routes admin** : Toutes les pages d'administration sont protégées
|
|
- **Clé de service sécurisée** : Opérations sensibles côté serveur uniquement
|
|
- **Session persistante** : Maintien de la connexion entre les pages
|
|
- **Interface moderne** : Formulaires de connexion avec validation
|
|
|
|
#### 🛠️ **Administration complète**
|
|
- **Gestion des campagnes** : Création, modification, suppression
|
|
- **Support Markdown** : Éditeur avec prévisualisation pour les descriptions de campagnes
|
|
- **États de campagne** : Dépôt de propositions, vote, terminé
|
|
- **Statistiques en temps réel** : Nombre de propositions, participants, taux de participation
|
|
- **Recherche** : Filtrage des campagnes par titre ou description
|
|
- **Interface moderne** : Design Shadcn/ui avec cartes et badges
|
|
|
|
#### 📝 **Gestion des propositions**
|
|
- **Page dédiée** : Interface complète pour gérer les propositions par campagne
|
|
- **CRUD complet** : Création, lecture, modification, suppression
|
|
- **Support Markdown** : Éditeur avec prévisualisation pour les descriptions
|
|
- **Informations détaillées** : Auteur, email, date de création
|
|
- **Interface moderne** : Cartes avec avatars et badges
|
|
|
|
#### 👥 **Gestion des participants**
|
|
- **Page dédiée** : Interface complète pour gérer les participants par campagne
|
|
- **Statuts de vote** : Indication visuelle des participants ayant voté
|
|
- **Liens de vote personnels** : URLs uniques pour chaque participant
|
|
- **Statistiques** : Taux de participation et budget total voté
|
|
|
|
#### 🌐 **Pages publiques**
|
|
- **Dépôt de propositions** : Interface publique pour soumettre des propositions
|
|
- URL unique et partageable
|
|
- Formulaire avec validation
|
|
- Support Markdown pour les descriptions
|
|
- Informations d'auteur obligatoires
|
|
- **Vote public** : Interface de vote pour les participants
|
|
- Slider interactif pour les choix de budget
|
|
- Validation du budget total
|
|
- Affichage des descriptions avec support Markdown
|
|
- Sauvegarde des votes
|
|
|
|
#### 📧 **Système d'email**
|
|
- **Configuration SMTP** : Interface d'administration pour configurer les paramètres email
|
|
- **Envoi d'emails** : Notifications aux participants
|
|
- **Test d'envoi** : Fonctionnalité de test des paramètres SMTP
|
|
- **Templates personnalisables** : Messages d'email configurables
|
|
|
|
#### 🎨 **Interface moderne**
|
|
- **Shadcn/ui** : Composants modernes et accessibles
|
|
- **Design responsive** : Adaptation mobile/desktop
|
|
- **Thème sombre** : Support du mode sombre
|
|
- **Animations** : Transitions fluides
|
|
- **Icônes Lucide** : Icônes modernes et cohérentes
|
|
|
|
### 🔄 Fonctionnalités avancées
|
|
- **Support Markdown** : Éditeur avec prévisualisation pour les descriptions
|
|
- **Formatage de texte** : Gras, italique, souligné, barré
|
|
- **Titres** : H1, H2, H3 pour structurer le contenu
|
|
- **Listes** : Listes à puces et numérotées
|
|
- **Liens** : URLs externes avec validation de sécurité
|
|
- **Validation** : Contrôle de la longueur et des contenus dangereux
|
|
- **URLs publiques** : Liens partageables pour le dépôt et le vote
|
|
- **Copie de liens** : Boutons pour copier les URLs dans le presse-papiers
|
|
- **Validation en temps réel** : Vérification des budgets lors du vote
|
|
- **Gestion d'erreurs** : Messages d'erreur informatifs
|
|
- **États de chargement** : Feedback visuel pendant les opérations
|
|
|
|
## 🛠️ Installation
|
|
|
|
### Prérequis
|
|
- Node.js 18+
|
|
- npm ou yarn
|
|
- Compte Supabase
|
|
|
|
### 1. Cloner le projet
|
|
```bash
|
|
git clone <votre-repo>
|
|
cd mes-budgets-participatifs
|
|
```
|
|
|
|
### 2. Installer les dépendances
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 3. Configuration Supabase
|
|
|
|
#### Créer un projet Supabase
|
|
1. Allez sur [supabase.com](https://supabase.com)
|
|
2. Créez un nouveau projet
|
|
3. Notez votre URL et votre clé anon
|
|
|
|
#### Configurer la base de données
|
|
1. Dans votre projet Supabase, allez dans l'éditeur SQL
|
|
2. Copiez et exécutez le contenu du fichier `database/supabase-schema.sql`
|
|
|
|
#### Configurer l'authentification
|
|
1. Dans Supabase Dashboard > Authentication > Settings
|
|
2. Activez l'authentification par email
|
|
3. Désactivez "Enable email confirmations" pour les administrateurs
|
|
4. Créez les utilisateurs dans Authentication > Users
|
|
5. Ajoutez les administrateurs dans la table `admin_users` via l'éditeur SQL
|
|
|
|
#### Configurer les variables d'environnement
|
|
Créez un fichier `.env.local` à la racine du projet :
|
|
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase
|
|
SUPABASE_SERVICE_ROLE_KEY=votre_cle_service_supabase
|
|
```
|
|
|
|
### 4. Configuration des administrateurs
|
|
1. **Créez les utilisateurs** dans Supabase Dashboard > Authentication > Users
|
|
2. **Ajoutez les administrateurs** dans la table `admin_users` via l'éditeur SQL
|
|
3. **Connectez-vous** avec les identifiants créés
|
|
|
|
### 5. Lancer l'application
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
L'application sera accessible sur `http://localhost:3000`
|
|
|
|
## 📊 Structure de la base de données
|
|
|
|
### Table `campaigns`
|
|
- `id`: Identifiant unique (UUID)
|
|
- `title`: Titre de la campagne
|
|
- `description`: Description détaillée
|
|
- `status`: État de la campagne (`deposit`, `voting`, `closed`)
|
|
- `budget_per_user`: Budget alloué par participant (en euros)
|
|
- `spending_tiers`: Paliers de dépenses disponibles (séparés par des virgules)
|
|
- `created_at`: Date de création
|
|
- `updated_at`: Date de dernière modification
|
|
|
|
### Table `propositions`
|
|
- `id`: Identifiant unique (UUID)
|
|
- `campaign_id`: Référence vers la campagne
|
|
- `title`: Titre de la proposition
|
|
- `description`: Description détaillée
|
|
- `author_first_name`: Prénom de l'auteur
|
|
- `author_last_name`: Nom de l'auteur
|
|
- `author_email`: Email de l'auteur
|
|
- `created_at`: Date de création
|
|
|
|
### Table `participants`
|
|
- `id`: Identifiant unique (UUID)
|
|
- `campaign_id`: Référence vers la campagne
|
|
- `first_name`: Prénom du participant
|
|
- `last_name`: Nom du participant
|
|
- `email`: Adresse email
|
|
- `created_at`: Date de création
|
|
|
|
### Table `votes`
|
|
- `id`: Identifiant unique (UUID)
|
|
- `participant_id`: Référence vers le participant
|
|
- `proposition_id`: Référence vers la proposition
|
|
- `amount`: Montant voté (en euros)
|
|
- `created_at`: Date de création
|
|
- `updated_at`: Date de dernière modification
|
|
|
|
### Table `settings`
|
|
- `key`: Clé de configuration
|
|
- `value`: Valeur de configuration
|
|
- `category`: Catégorie (email, general, etc.)
|
|
- `description`: Description de la configuration
|
|
|
|
## 📚 Documentation
|
|
|
|
Pour une documentation complète, consultez le dossier [docs/](docs/) :
|
|
|
|
- **[Guide de démarrage](docs/README.md)** - Vue d'ensemble de la documentation
|
|
- **[Configuration](docs/SETUP.md)** - Installation et configuration
|
|
|
|
- **[Sécurité](docs/SECURITY-SUMMARY.md)** - Résumé de la sécurisation
|
|
- **[Paramètres](docs/SETTINGS.md)** - Configuration avancée
|
|
|
|
## 🎨 Interface utilisateur
|
|
|
|
### Page d'accueil
|
|
- **Design moderne** : Hero section avec gradient et call-to-action
|
|
- **Présentation claire** : Fonctionnalités principales expliquées
|
|
- **Navigation intuitive** : Accès à l'administration sécurisée
|
|
|
|
### Espace d'administration (protégé)
|
|
- **Dashboard complet** : Vue d'ensemble avec statistiques
|
|
- **Gestion des campagnes** : CRUD complet avec interface moderne
|
|
- **Navigation fluide** : Liens vers les pages de gestion détaillées
|
|
- **Recherche** : Filtrage en temps réel des campagnes
|
|
- **Paramètres** : Configuration SMTP et autres paramètres
|
|
|
|
### Pages de gestion détaillées
|
|
- **Propositions** : Interface complète avec avatars et informations détaillées
|
|
- **Participants** : Gestion avec statuts de vote et liens personnels
|
|
- **Statistiques** : Métriques en temps réel (participation, budget voté)
|
|
|
|
### Pages publiques
|
|
- **Dépôt de propositions** : Interface épurée et accessible
|
|
- **Vote** : Interface intuitive avec slider et validation
|
|
|
|
## 🔧 Architecture technique
|
|
|
|
### Structure des fichiers
|
|
```
|
|
src/
|
|
├── app/ # Pages Next.js (App Router)
|
|
│ ├── page.tsx # Page d'accueil
|
|
│ ├── admin/ # Pages d'administration (protégées)
|
|
│ │ ├── page.tsx # Dashboard principal
|
|
│ │ ├── settings/ # Paramètres SMTP
|
|
│ │ └── campaigns/[id]/ # Pages de gestion par campagne
|
|
│ ├── api/ # API Routes
|
|
│ │ ├── send-participant-email/
|
|
│ │ ├── test-email/
|
|
│ │ └── test-smtp/
|
|
│ └── campaigns/[id]/ # Pages publiques
|
|
│ ├── propose/ # Dépôt de propositions
|
|
│ └── vote/[participantId] # Vote public
|
|
├── components/ # Composants React
|
|
│ ├── ui/ # Composants Shadcn/ui
|
|
│ ├── AuthGuard.tsx # Protection des routes
|
|
│ ├── Navigation.tsx # Navigation principale
|
|
│ ├── SmtpSettingsForm.tsx # Configuration SMTP
|
|
│ └── [Modals] # Modales de gestion
|
|
├── lib/ # Services et configuration
|
|
│ ├── supabase.ts # Configuration Supabase
|
|
│ ├── services.ts # Services de données
|
|
│ ├── email.ts # Service d'envoi d'emails
|
|
│ ├── encryption.ts # Chiffrement des données sensibles
|
|
│ └── utils.ts # Utilitaires
|
|
└── types/ # Types TypeScript
|
|
└── index.ts # Définitions des types
|
|
```
|
|
|
|
### Services de données
|
|
- **campaignService** : Gestion des campagnes et statistiques
|
|
- **propositionService** : CRUD des propositions
|
|
- **participantService** : CRUD des participants
|
|
- **voteService** : Gestion des votes et statuts
|
|
- **settingsService** : Gestion des paramètres de configuration
|
|
|
|
### Authentification
|
|
- **AuthGuard** : Composant de protection des routes
|
|
- **Supabase Auth** : Authentification sécurisée
|
|
- **Session management** : Gestion des sessions utilisateur
|
|
|
|
### Système d'email
|
|
- **Configuration SMTP** : Interface d'administration
|
|
- **Envoi d'emails** : Service Nodemailer
|
|
- **Chiffrement** : Protection des mots de passe SMTP
|
|
- **Templates** : Messages personnalisables
|
|
|
|
## 🚀 Déploiement
|
|
|
|
### Vercel (recommandé)
|
|
|
|
#### Configuration automatique
|
|
1. Connectez votre repo Git à Vercel
|
|
2. Configurez les variables d'environnement dans Vercel
|
|
3. Déployez automatiquement
|
|
|
|
#### Configuration manuelle
|
|
Le projet est configuré pour un déploiement sans problème sur Vercel :
|
|
|
|
1. **Configuration ESLint** : Les erreurs ESLint sont traitées comme des avertissements et n'empêchent pas le déploiement
|
|
2. **Variables d'environnement** : Assurez-vous d'avoir configuré :
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase_production
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase_production
|
|
```
|
|
|
|
#### Correction des erreurs avant déploiement (optionnel)
|
|
```bash
|
|
# Corriger les erreurs ESLint automatiquement
|
|
npm run lint:fix
|
|
|
|
# Vérifier les erreurs restantes
|
|
npm run lint
|
|
|
|
# Tester le build localement
|
|
npm run build
|
|
```
|
|
|
|
#### Résolution des problèmes courants
|
|
|
|
**Erreurs ESLint lors du déploiement** :
|
|
- Les erreurs sont automatiquement traitées comme des avertissements
|
|
- Le build continuera même avec des avertissements ESLint
|
|
- Utilisez `npm run lint:fix` pour corriger automatiquement les erreurs corrigibles
|
|
|
|
**Erreurs de build** :
|
|
- Vérifiez que toutes les variables d'environnement sont configurées
|
|
- Assurez-vous que la base de données Supabase est accessible
|
|
- Consultez les logs de build dans Vercel pour plus de détails
|
|
|
|
### Variables d'environnement de production
|
|
```env
|
|
NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase_production
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase_production
|
|
```
|
|
|
|
### Autres plateformes
|
|
L'application peut être déployée sur n'importe quelle plateforme supportant Next.js :
|
|
- Netlify
|
|
- Railway
|
|
- DigitalOcean App Platform
|
|
- AWS Amplify
|
|
|
|
## 🔒 Sécurité
|
|
|
|
### Authentification
|
|
- **Routes protégées** : Toutes les pages admin nécessitent une authentification
|
|
- **Session sécurisée** : Gestion des sessions via Supabase
|
|
- **Pas d'inscription publique** : Seuls les comptes pré-autorisés peuvent accéder
|
|
|
|
### Base de données
|
|
- **Row Level Security (RLS)** : Protection des données au niveau de la base
|
|
- **Validation côté serveur** : Vérification des données avant sauvegarde
|
|
- **URLs sécurisées** : Liens publics avec identifiants uniques
|
|
|
|
### Données sensibles
|
|
- **Chiffrement SMTP** : Mots de passe SMTP chiffrés en base
|
|
- **Variables d'environnement** : Configuration sécurisée
|
|
- **Validation des entrées** : Protection contre les injections
|
|
|
|
## 🎯 Workflow d'utilisation
|
|
|
|
### 1. Configuration initiale
|
|
1. Créer un compte Supabase
|
|
2. Configurer la base de données
|
|
3. Créer un utilisateur admin
|
|
4. Configurer les paramètres SMTP (optionnel)
|
|
5. Déployer l'application
|
|
|
|
### 2. Création d'une campagne
|
|
1. Se connecter à l'administration
|
|
2. Créer une nouvelle campagne
|
|
3. Définir le budget et les paliers
|
|
4. Passer en mode "Dépôt de propositions"
|
|
|
|
### 3. Collecte des propositions
|
|
1. Partager le lien public de dépôt
|
|
2. Les participants soumettent leurs propositions
|
|
3. Gérer les propositions via l'interface admin
|
|
|
|
### 4. Phase de vote
|
|
1. Ajouter les participants
|
|
2. Passer en mode "En cours de vote"
|
|
3. Partager les liens de vote personnels
|
|
4. Suivre la participation en temps réel
|
|
5. Envoyer des rappels par email (optionnel)
|
|
|
|
### 5. Résultats
|
|
1. Consulter les statistiques de vote
|
|
2. Analyser les résultats
|
|
3. Clôturer la campagne
|
|
|
|
## 📚 Documentation supplémentaire
|
|
|
|
- **SETUP.md** : Guide de configuration détaillé
|
|
- **SETTINGS.md** : Documentation des paramètres et configurations
|
|
|
|
## 🤝 Contribution
|
|
|
|
1. Fork le projet
|
|
2. Créez une branche pour votre fonctionnalité
|
|
3. Committez vos changements
|
|
4. Poussez vers la branche
|
|
5. Ouvrez une Pull Request
|
|
|
|
## 📝 Licence
|
|
|
|
Ce projet est sous licence MIT. Voir le fichier `LICENSE` pour plus de détails.
|
|
|
|
## 🆘 Support
|
|
|
|
Pour toute question ou problème :
|
|
1. Vérifiez la documentation Supabase
|
|
2. Consultez les issues Git
|
|
3. Créez une nouvelle issue si nécessaire
|
|
|
|
---
|
|
|
|
**Développé avec ❤️ pour faciliter la démocratie participative**
|
|
|
|
*Application complète et prête pour la production avec authentification, interface moderne, système d'email et toutes les fonctionnalités de gestion de budgets participatifs.*
|