303 lines
10 KiB
Markdown
303 lines
10 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 14 avec TypeScript et App Router
|
|
- **UI/UX**: Tailwind CSS + Shadcn/ui + Lucide React
|
|
- **Base de données**: PostgreSQL via Supabase
|
|
- **Authentification**: Supabase Auth (implémenté)
|
|
- **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**
|
|
- **Connexion sécurisée** : Authentification Supabase avec email/mot de passe
|
|
- **Protection des routes admin** : Toutes les pages d'administration sont protégées
|
|
- **Session persistante** : Maintien de la connexion entre les pages
|
|
- **Interface moderne** : Formulaire de connexion avec Shadcn/ui
|
|
|
|
#### 🛠️ **Administration complète**
|
|
- **Gestion des campagnes** : Création, modification, suppression
|
|
- **É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
|
|
- **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
|
|
- Informations d'auteur obligatoires
|
|
- **Vote public** : Interface de vote pour les participants
|
|
- Slider interactif pour les choix de budget
|
|
- Validation du budget total
|
|
- Sauvegarde des votes
|
|
|
|
#### 🎨 **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
|
|
- **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 `supabase-schema.sql`
|
|
|
|
#### Configurer l'authentification
|
|
1. Dans Supabase Dashboard > Authentication > Settings
|
|
2. Activez l'authentification par email
|
|
3. Créez un utilisateur admin via l'interface Supabase ou l'API
|
|
|
|
#### 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
|
|
```
|
|
|
|
### 4. 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
|
|
|
|
## 🎨 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
|
|
|
|
### 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
|
|
│ │ └── campaigns/[id]/ # Pages de gestion par campagne
|
|
│ └── 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
|
|
│ └── [Modals] # Modales de gestion
|
|
├── lib/ # Services et configuration
|
|
│ ├── supabase.ts # Configuration Supabase
|
|
│ ├── services.ts # Services de données
|
|
│ └── 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
|
|
|
|
### Authentification
|
|
- **AuthGuard** : Composant de protection des routes
|
|
- **Supabase Auth** : Authentification sécurisée
|
|
- **Session management** : Gestion des sessions utilisateur
|
|
|
|
## 🚀 Déploiement
|
|
|
|
### Vercel (recommandé)
|
|
1. Connectez votre repo GitHub à Vercel
|
|
2. Configurez les variables d'environnement dans Vercel
|
|
3. Déployez automatiquement
|
|
|
|
### 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
|
|
|
|
## 🎯 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. 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. Résultats
|
|
1. Consulter les statistiques de vote
|
|
2. Analyser les résultats
|
|
3. Clôturer la campagne
|
|
|
|
## 🤝 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 GitHub
|
|
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 et toutes les fonctionnalités de gestion de budgets participatifs.*
|