# 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.*