182 lines
5.1 KiB
Markdown
182 lines
5.1 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
|
|
- **Styling**: Tailwind CSS + Headless UI
|
|
- **Base de données**: PostgreSQL via Supabase
|
|
- **Authentification**: Supabase Auth (prévu pour les futures versions)
|
|
- **Icons**: Heroicons
|
|
|
|
## 📋 Fonctionnalités
|
|
|
|
### ✅ Implémentées
|
|
- Page d'accueil avec présentation de l'application
|
|
- Interface d'administration pour gérer les campagnes
|
|
- Création de nouvelles campagnes avec tous les paramètres
|
|
- Ajout de propositions à une campagne
|
|
- Ajout de participants à une campagne
|
|
- Gestion des états de campagne (dépôt, vote, fermé)
|
|
- Interface moderne et responsive
|
|
|
|
### 🔄 À venir
|
|
- Authentification des utilisateurs
|
|
- Interface de vote pour les participants
|
|
- Résultats et statistiques des votes
|
|
- Notifications par email
|
|
- Gestion des permissions
|
|
|
|
## 🛠️ 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 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
|
|
- `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
|
|
|
|
## 🎨 Interface utilisateur
|
|
|
|
### Page d'accueil
|
|
- Présentation de l'application
|
|
- Bouton d'accès à l'administration
|
|
- Design moderne avec gradient et cartes informatives
|
|
|
|
### Page d'administration
|
|
- Liste des campagnes existantes
|
|
- Bouton pour créer une nouvelle campagne
|
|
- Actions rapides pour chaque campagne :
|
|
- Ajouter une proposition
|
|
- Ajouter un participant
|
|
- Indicateurs visuels pour les états des campagnes
|
|
|
|
### Modals
|
|
- **Création de campagne** : Formulaire complet avec validation
|
|
- **Ajout de proposition** : Titre et description
|
|
- **Ajout de participant** : Informations personnelles
|
|
|
|
## 🔧 Développement
|
|
|
|
### Structure des fichiers
|
|
```
|
|
src/
|
|
├── app/ # Pages Next.js (App Router)
|
|
│ ├── page.tsx # Page d'accueil
|
|
│ └── admin/ # Pages d'administration
|
|
├── components/ # Composants React réutilisables
|
|
├── lib/ # Services et configuration
|
|
│ ├── supabase.ts # Configuration Supabase
|
|
│ └── services.ts # Services de données
|
|
└── types/ # Types TypeScript
|
|
└── index.ts # Définitions des types
|
|
```
|
|
|
|
### Scripts disponibles
|
|
```bash
|
|
npm run dev # Lancer en mode développement
|
|
npm run build # Construire pour la production
|
|
npm run start # Lancer en mode production
|
|
npm run lint # Vérifier le code avec ESLint
|
|
```
|
|
|
|
## 🚀 Déploiement
|
|
|
|
### Vercel (recommandé)
|
|
1. Connectez votre repo GitHub à Vercel
|
|
2. Configurez les variables d'environnement dans Vercel
|
|
3. Déployez automatiquement
|
|
|
|
### Autres plateformes
|
|
L'application peut être déployée sur n'importe quelle plateforme supportant Next.js :
|
|
- Netlify
|
|
- Railway
|
|
- DigitalOcean App Platform
|
|
- AWS Amplify
|
|
|
|
## 🤝 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**
|