yannick.leduc/mes-budgets-participatifs
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

mise à jour README + enlève signup

Browse Source
This commit is contained in:
Yannick Le Duc
2025-08-25 16:27:03 +02:00
parent ec681cfd13
commit f6e8e4753f
3 changed files with 180 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
README.md
View File

@@ -5,28 +5,68 @@ Une application web moderne pour gérer des campagnes de budgets participatifs,
## 🚀 Technologies utilisées
- **Frontend**: Next.js 14 avec TypeScript et App Router
- **Styling**: Tailwind CSS + Headless UI
- **UI/UX**: Tailwind CSS + Shadcn/ui + Lucide React
- **Base de données**: PostgreSQL via Supabase
- **Authentification**: Supabase Auth (prévu pour les futures versions)
- **Icons**: Heroicons
- **Authentification**: Supabase Auth (implémenté)
- **Déploiement**: Compatible Vercel, Netlify, etc.
## 📋 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
#### 🏠 **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
@@ -57,6 +97,11 @@ npm install
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 :
@@ -89,6 +134,9 @@ L'application sera accessible sur `http://localhost:3000`
- `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`
@@ -99,49 +147,72 @@ L'application sera accessible sur `http://localhost:3000`
- `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
- Présentation de l'application
- Bouton d'accès à l'administration
- Design moderne avec gradient et cartes informatives
- **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
### 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
### 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
### Modals
- **Création de campagne** : Formulaire complet avec validation
- **Ajout de proposition** : Titre et description
- **Ajout de participant** : Informations personnelles
### 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é)
## 🔧 Développement
### 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
├── 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
├── 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
```
### 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
```
### 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
@@ -150,6 +221,12 @@ npm run lint # Vérifier le code avec ESLint
2. Configurez les variables d'environnement dans Vercel
3. Déployez automatiquement
### Variables d'environnement de production
```env
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
@@ -157,6 +234,48 @@ L'application peut être déployée sur n'importe quelle plateforme supportant N
- 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
@@ -179,3 +298,5 @@ Pour toute question ou problème :
---
**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.*

4
src/app/admin/page.tsx
View File

@@ -263,7 +263,7 @@ function AdminPageContent() {
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
{/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<div className="text-center p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
<p className="text-sm text-slate-600 dark:text-slate-300">Propositions</p>
<p className="text-lg font-semibold text-slate-900 dark:text-slate-100">{campaign.stats.propositions}</p>
@@ -280,7 +280,7 @@ function AdminPageContent() {
<p className="text-sm text-slate-600 dark:text-slate-300">Paliers</p>
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">{getSpendingTiersDisplay(campaign.spending_tiers)}</p>
</div>
</div>
</div> */}
{/* Public URL for deposit campaigns */}
{campaign.status === 'deposit' && (

43
src/components/AuthGuard.tsx
View File

@@ -16,7 +16,7 @@ interface AuthGuardProps {
export default function AuthGuard({ children }: AuthGuardProps) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [authMode, setAuthMode] = useState<'signin' | 'signup'>('signin');
const [authMode] = useState<'signin'>('signin');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [authLoading, setAuthLoading] = useState(false);
@@ -52,20 +52,11 @@ export default function AuthGuard({ children }: AuthGuardProps) {
setMessage('');
try {
if (authMode === 'signin') {
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) throw error;
} else {
const { error } = await supabase.auth.signUp({
email,
password,
});
if (error) throw error;
setMessage('Vérifiez votre email pour confirmer votre inscription.');
}
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) throw error;
} catch (error: any) {
setError(error.message);
} finally {
@@ -96,10 +87,7 @@ export default function AuthGuard({ children }: AuthGuardProps) {
<CardHeader className="text-center">
<CardTitle className="text-2xl">Administration</CardTitle>
<CardDescription>
{authMode === 'signin'
? 'Connectez-vous pour accéder à l\'administration'
: 'Créez un compte pour accéder à l\'administration'
}
Connectez-vous pour accéder à l'administration
</CardDescription>
</CardHeader>
<CardContent>
@@ -153,26 +141,15 @@ export default function AuthGuard({ children }: AuthGuardProps) {
{authLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
{authMode === 'signin' ? 'Connexion...' : 'Inscription...'}
Connexion...
</>
) : (
authMode === 'signin' ? 'Se connecter' : 'S\'inscrire'
'Se connecter'
)}
</Button>
</form>
<div className="mt-4 text-center">
<Button
variant="link"
onClick={() => setAuthMode(authMode === 'signin' ? 'signup' : 'signin')}
className="text-sm"
>
{authMode === 'signin'
? 'Pas de compte ? S\'inscrire'
: 'Déjà un compte ? Se connecter'
}
</Button>
</div>
<div className="mt-4 text-center">
<Button variant="ghost" asChild className="text-sm">