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 15 avec TypeScript et App Router
• UI/UX: Tailwind CSS 4 + Shadcn/ui + Lucide React
• Base de données: PostgreSQL via Supabase
• Authentification: Supabase Auth
• Email: Nodemailer avec support SMTP
• 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

📧 Système d'email

• Configuration SMTP : Interface d'administration pour configurer les paramètres email
• Envoi d'emails : Notifications aux participants
• Test d'envoi : Fonctionnalité de test des paramètres SMTP
• Templates personnalisables : Messages d'email configurables

🎨 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

Table settings

• key: Clé de configuration
• value: Valeur de configuration
• category: Catégorie (email, general, etc.)
• description: Description de la configuration

🎨 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
• Paramètres : Configuration SMTP et autres paramètres

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
│   │   ├── settings/            # Paramètres SMTP
│   │   └── campaigns/[id]/      # Pages de gestion par campagne
│   ├── api/                     # API Routes
│   │   ├── send-participant-email/
│   │   ├── test-email/
│   │   └── test-smtp/
│   └── 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
│   ├── SmtpSettingsForm.tsx    # Configuration SMTP
│   └── [Modals]               # Modales de gestion
├── lib/                         # Services et configuration
│   ├── supabase.ts            # Configuration Supabase
│   ├── services.ts            # Services de données
│   ├── email.ts               # Service d'envoi d'emails
│   ├── encryption.ts          # Chiffrement des données sensibles
│   └── 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
• settingsService : Gestion des paramètres de configuration

Authentification

• AuthGuard : Composant de protection des routes
• Supabase Auth : Authentification sécurisée
• Session management : Gestion des sessions utilisateur

Système d'email

• Configuration SMTP : Interface d'administration
• Envoi d'emails : Service Nodemailer
• Chiffrement : Protection des mots de passe SMTP
• Templates : Messages personnalisables

🚀 Déploiement

Vercel (recommandé)

Configuration automatique

1. Connectez votre repo GitHub à Vercel
2. Configurez les variables d'environnement dans Vercel
3. Déployez automatiquement

Configuration manuelle

Le projet est configuré pour un déploiement sans problème sur Vercel :

1. Configuration ESLint : Les erreurs ESLint sont traitées comme des avertissements et n'empêchent pas le déploiement
2. Variables d'environnement : Assurez-vous d'avoir configuré :

   NEXT_PUBLIC_SUPABASE_URL=votre_url_supabase_production
   NEXT_PUBLIC_SUPABASE_ANON_KEY=votre_cle_anon_supabase_production
   

Correction des erreurs avant déploiement (optionnel)

# Corriger les erreurs ESLint automatiquement
npm run lint:fix

# Vérifier les erreurs restantes
npm run lint

# Tester le build localement
npm run build

Résolution des problèmes courants

Erreurs ESLint lors du déploiement :

• Les erreurs sont automatiquement traitées comme des avertissements
• Le build continuera même avec des avertissements ESLint
• Utilisez npm run lint:fix pour corriger automatiquement les erreurs corrigibles

Erreurs de build :

• Vérifiez que toutes les variables d'environnement sont configurées
• Assurez-vous que la base de données Supabase est accessible
• Consultez les logs de build dans Vercel pour plus de détails

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

Données sensibles

• Chiffrement SMTP : Mots de passe SMTP chiffrés en base
• Variables d'environnement : Configuration sécurisée
• Validation des entrées : Protection contre les injections

🎯 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. Configurer les paramètres SMTP (optionnel)
5. 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. Envoyer des rappels par email (optionnel)

5. Résultats

1. Consulter les statistiques de vote
2. Analyser les résultats
3. Clôturer la campagne

📚 Documentation supplémentaire

• SETUP.md : Guide de configuration détaillé
• SETTINGS.md : Documentation des paramètres et configurations

🤝 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, système d'email et toutes les fonctionnalités de gestion de budgets participatifs.