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

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 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 :

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
• 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

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.