# Guide de Configuration - Mes Budgets Participatifs

## 🚀 Configuration Rapide

### 1. Installation des dépendances
```bash
npm install
```

### 2. Configuration Supabase

#### Étape 1 : 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 dans les paramètres du projet

#### Étape 2 : Configurer la base de données
1. Dans votre projet Supabase, allez dans **SQL Editor**
2. Copiez et exécutez le contenu du fichier `supabase-schema.sql`
3. Vérifiez que les tables sont créées dans **Table Editor**

#### Étape 3 : Configurer les variables d'environnement
1. Copiez le fichier `env.example` vers `.env.local`
2. Remplacez les valeurs par vos vraies informations Supabase :

```env
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
```

### 3. Lancer l'application
```bash
npm run dev
```

L'application sera accessible sur `http://localhost:3000`

## 📊 Structure de la Base de Données

### Tables créées automatiquement :

#### `campaigns`
- **id** : Identifiant unique (UUID)
- **title** : Titre de la campagne
- **description** : Description détaillée
- **status** : État (`deposit`, `voting`, `closed`)
- **budget_per_user** : Budget par participant (€)
- **spending_tiers** : Paliers de dépenses (ex: "10,25,50,100")
- **created_at** : Date de création
- **updated_at** : Date de modification

#### `propositions`
- **id** : Identifiant unique (UUID)
- **campaign_id** : Référence vers la campagne
- **title** : Titre de la proposition
- **description** : Description détaillée
- **created_at** : Date de création

#### `participants`
- **id** : Identifiant unique (UUID)
- **campaign_id** : Référence vers la campagne
- **first_name** : Prénom
- **last_name** : Nom
- **email** : Adresse email
- **created_at** : Date de création

## 🔧 Fonctionnalités Disponibles

### Page d'accueil (`/`)
- Présentation de l'application
- Bouton d'accès à l'administration
- Design moderne et responsive

### Page d'administration (`/admin`)
- **Liste des campagnes** : Affichage de toutes les campagnes avec leur statut
- **Créer une campagne** : Formulaire complet avec validation
- **Ajouter des propositions** : Par campagne
- **Ajouter des participants** : Par campagne
- **Indicateurs visuels** : Statuts colorés pour chaque campagne

### Modals interactifs
- **Création de campagne** : Titre, description, budget, paliers, statut
- **Ajout de proposition** : Titre et description
- **Ajout de participant** : Prénom, nom, email

## 🎨 Interface Utilisateur

### Design System
- **Framework CSS** : Tailwind CSS
- **Composants** : Headless UI pour les modals
- **Icônes** : Heroicons
- **Couleurs** : Palette moderne avec indigo comme couleur principale

### Responsive Design
- Mobile-first approach
- Adaptation automatique sur tous les écrans
- Navigation intuitive

## 🚀 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 pour la production
```env
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```

## 🔍 Dépannage

### Erreurs courantes

#### "supabaseUrl is required"
- Vérifiez que vos variables d'environnement sont correctement définies
- Redémarrez le serveur de développement

#### Erreurs de build
- Vérifiez que tous les composants sont correctement importés
- Assurez-vous que les types TypeScript sont corrects

#### Problèmes de base de données
- Vérifiez que le script SQL a été exécuté correctement
- Contrôlez les politiques RLS dans Supabase

### Logs de développement
```bash
# Voir les logs en temps réel
npm run dev

# Build de production
npm run build

# Lancer en production
npm run start
```

## 📈 Prochaines Étapes

### Fonctionnalités prévues
- [ ] Authentification des utilisateurs
- [ ] Interface de vote pour les participants
- [ ] Résultats et statistiques
- [ ] Notifications par email
- [ ] Gestion des permissions

### Améliorations techniques
- [ ] Types TypeScript stricts pour Supabase
- [ ] Tests unitaires et d'intégration
- [ ] Optimisation des performances
- [ ] PWA (Progressive Web App)

## 🤝 Support

Pour toute question ou problème :
1. Vérifiez ce guide de configuration
2. Consultez la documentation Supabase
3. Vérifiez les logs de développement
4. Créez une issue sur GitHub si nécessaire

---

**Application prête à l'emploi pour la démocratie participative ! 🗳️**