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

git clone <votre-repo>
cd mes-budgets-participatifs

2. Installer les dépendances

npm install

3. Configuration Supabase

Créer un projet Supabase

1. Allez sur 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 :

NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase

4. Lancer l'application

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

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