839ca5461c
- Fixed LoginPage.js to use correct API endpoint (localhost:8000) - Fixed prop naming (onLoginSuccess → onLogin) - Fixed data structure mapping (voter.email → email, etc) - Removed duplicate src/ folder structure - Updated DashboardPage.js with proper API endpoints - Added lucide-react dependency - Fixed docker-compose and Dockerfile.backend for proper execution - Cleaned up console logs - System fully working with Docker deployment
330 lines
7.7 KiB
Markdown
330 lines
7.7 KiB
Markdown
# 📚 Documentation Complète E-Voting Frontend
|
|
|
|
## 📖 Guides Disponibles
|
|
|
|
### 1. **Frontend README** (`frontend/README_FRONTEND.md`)
|
|
- Structure du projet
|
|
- Palette de couleurs
|
|
- Pages disponibles
|
|
- Routage
|
|
- Fonctionnalités principales
|
|
- Dépendances
|
|
|
|
### 2. **Guide de Démarrage** (`FRONTEND_GUIDE.md`)
|
|
- Installation rapide
|
|
- Configuration
|
|
- Navigation
|
|
- Intégration Backend
|
|
- Tests et debugging
|
|
- Déploiement
|
|
- Dépannage
|
|
|
|
### 3. **Documentation des Composants** (`COMPONENTS_DOC.md`)
|
|
- Documentation de chaque composant
|
|
- Props et utilisation
|
|
- Patterns de composants
|
|
- Styling
|
|
- Accessibilité
|
|
- Performance
|
|
|
|
---
|
|
|
|
## 🚀 Démarrage Rapide
|
|
|
|
```bash
|
|
# 1. Aller dans le dossier frontend
|
|
cd frontend
|
|
|
|
# 2. Installer les dépendances
|
|
npm install
|
|
|
|
# 3. Démarrer l'application
|
|
npm start
|
|
```
|
|
|
|
L'application s'ouvre sur `http://localhost:3000`
|
|
|
|
---
|
|
|
|
## 📁 Structure Complète
|
|
|
|
```
|
|
e-voting-system/
|
|
├── frontend/
|
|
│ ├── src/
|
|
│ │ ├── components/ # 6 composants réutilisables
|
|
│ │ │ ├── Header.jsx # Barre de navigation
|
|
│ │ │ ├── Footer.jsx # Pied de page
|
|
│ │ │ ├── VoteCard.jsx # Carte de vote
|
|
│ │ │ ├── Alert.jsx # Notifications
|
|
│ │ │ ├── Modal.jsx # Modales
|
|
│ │ │ ├── LoadingSpinner.jsx # Indicateur de chargement
|
|
│ │ │ └── index.js # Export des composants
|
|
│ │ │
|
|
│ │ ├── pages/ # 7 pages principales
|
|
│ │ │ ├── HomePage.jsx # Accueil publique
|
|
│ │ │ ├── LoginPage.jsx # Connexion
|
|
│ │ │ ├── RegisterPage.jsx # Inscription
|
|
│ │ │ ├── DashboardPage.jsx # Tableau de bord
|
|
│ │ │ ├── VotingPage.jsx # Page de vote
|
|
│ │ │ ├── ArchivesPage.jsx # Archives publiques
|
|
│ │ │ ├── ProfilePage.jsx # Profil utilisateur
|
|
│ │ │ └── index.js # Export des pages
|
|
│ │ │
|
|
│ │ ├── styles/ # Styles globaux
|
|
│ │ │ ├── globals.css # Variables et styles globaux
|
|
│ │ │ └── components.css # Styles des composants de base
|
|
│ │ │
|
|
│ │ ├── config/ # Configuration
|
|
│ │ │ └── theme.js # Thème et variables design
|
|
│ │ │
|
|
│ │ ├── utils/ # Utilitaires
|
|
│ │ │ └── api.js # Client API
|
|
│ │ │
|
|
│ │ ├── hooks/ # Hooks personnalisés
|
|
│ │ │ └── useApi.js # Hooks pour API et formulaires
|
|
│ │ │
|
|
│ │ ├── App.js # Application principale
|
|
│ │ ├── App.css # Styles de l'app
|
|
│ │ ├── index.js # Point d'entrée
|
|
│ │ └── index.css # Styles de base
|
|
│ │
|
|
│ ├── public/
|
|
│ │ ├── index.html
|
|
│ │ └── manifest.json
|
|
│ │
|
|
│ ├── package.json
|
|
│ ├── .env.example
|
|
│ ├── start.sh # Script de démarrage
|
|
│ └── README_FRONTEND.md # Documentation du frontend
|
|
│
|
|
├── FRONTEND_GUIDE.md # Guide complet de démarrage
|
|
├── COMPONENTS_DOC.md # Documentation des composants
|
|
└── ...
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Pages et Routes
|
|
|
|
### Routes Publiques (accessible sans connexion)
|
|
|
|
| Route | Composant | Description |
|
|
|-------|-----------|-------------|
|
|
| `/` | HomePage | Accueil avec CTA |
|
|
| `/register` | RegisterPage | Créer un compte |
|
|
| `/login` | LoginPage | Se connecter |
|
|
| `/archives` | ArchivesPage | Votes terminés |
|
|
|
|
### Routes Privées (accessible après connexion)
|
|
|
|
| Route | Composant | Description |
|
|
|-------|-----------|-------------|
|
|
| `/dashboard` | DashboardPage | Tableau de bord principal |
|
|
| `/dashboard/actifs` | DashboardPage | Votes en cours |
|
|
| `/dashboard/futurs` | DashboardPage | Votes à venir |
|
|
| `/dashboard/historique` | DashboardPage | Mon historique |
|
|
| `/vote/:id` | VotingPage | Page de vote détaillée |
|
|
| `/profile` | ProfilePage | Gestion du profil |
|
|
|
|
---
|
|
|
|
## 🎨 Design System
|
|
|
|
### Couleurs Principales
|
|
|
|
```
|
|
Bleu Foncé: #1e3a5f (Confiance, titres)
|
|
Bleu Primaire: #2563eb (Actions, liens)
|
|
Bleu Clair: #3b82f6 (Dégradés)
|
|
Vert: #10b981 (Succès)
|
|
Orange: #f97316 (Alertes)
|
|
Rouge: #ef4444 (Erreurs)
|
|
Gris Clair: #f3f4f6 (Fond)
|
|
Blanc: #ffffff (Cartes)
|
|
```
|
|
|
|
### Espacements
|
|
|
|
```
|
|
XS: 0.25rem MD: 1rem 2XL: 3rem
|
|
SM: 0.5rem LG: 1.5rem
|
|
```
|
|
|
|
### Typographie
|
|
|
|
Font: Inter, Segoe UI, Roboto (sans-serif)
|
|
|
|
---
|
|
|
|
## 🔄 Flux d'Authentification
|
|
|
|
```
|
|
[Utilisateur non connecté]
|
|
↓
|
|
Page d'Accueil
|
|
↓
|
|
Inscription/Connexion
|
|
↓
|
|
Token + Voter en localStorage
|
|
↓
|
|
Redirection Dashboard
|
|
↓
|
|
Accès aux pages privées
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Composants Utilisés
|
|
|
|
### Composants React
|
|
- **Header**: Navigation responsive
|
|
- **Footer**: Pied de page
|
|
- **VoteCard**: Affichage des votes
|
|
- **Alert**: Notifications
|
|
- **Modal**: Confirmations
|
|
- **LoadingSpinner**: Indicateurs
|
|
|
|
### Icônes
|
|
- Lucide React (38+ icônes incluses)
|
|
|
|
### Librairies
|
|
- React Router v6 (routage)
|
|
- Axios (requêtes HTTP)
|
|
|
|
---
|
|
|
|
## 🚀 Fonctionnalités Principales
|
|
|
|
✅ **Authentification**
|
|
- Inscription sécurisée
|
|
- Connexion avec JWT
|
|
- Gestion de session
|
|
|
|
✅ **Gestion des Votes**
|
|
- Affichage des votes par statut
|
|
- Vote avec confirmation
|
|
- Visualisation des résultats
|
|
|
|
✅ **Responsive Design**
|
|
- Desktop, Tablet, Mobile
|
|
- Navigation adaptée
|
|
- Performance optimale
|
|
|
|
✅ **Accessibilité**
|
|
- Navigation au clavier
|
|
- Contraste élevé
|
|
- Sémantique HTML
|
|
|
|
---
|
|
|
|
## 🔧 Développement
|
|
|
|
### Commandes Disponibles
|
|
|
|
```bash
|
|
# Démarrer le serveur de développement
|
|
npm start
|
|
|
|
# Créer un build de production
|
|
npm run build
|
|
|
|
# Lancer les tests
|
|
npm test
|
|
|
|
# Éjecter la configuration (⚠️ irréversible)
|
|
npm eject
|
|
```
|
|
|
|
### Variables d'Environnement
|
|
|
|
```
|
|
REACT_APP_API_URL # URL du backend (défaut: http://localhost:8000)
|
|
REACT_APP_ENV # Environnement (development, production)
|
|
REACT_APP_DEBUG_MODE # Activer le mode debug
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 Responsive Breakpoints
|
|
|
|
```
|
|
Mobile: < 480px
|
|
Tablet: 480px - 768px
|
|
Laptop: 768px - 1024px
|
|
Desktop: 1024px+
|
|
```
|
|
|
|
---
|
|
|
|
## 🔒 Sécurité
|
|
|
|
✅ Authentification JWT
|
|
✅ Tokens dans localStorage
|
|
✅ Validation côté client
|
|
✅ Protection des routes
|
|
✅ En-têtes de sécurité
|
|
✅ HTTPS en production
|
|
|
|
---
|
|
|
|
## 📈 Performance
|
|
|
|
- Code splitting avec React.lazy()
|
|
- Lazy loading des images
|
|
- Optimisation des requêtes API
|
|
- Caching navigateur
|
|
- Bundle optimisé
|
|
|
|
---
|
|
|
|
## 🌐 Déploiement
|
|
|
|
### Options
|
|
|
|
1. **Vercel** - Déploiement simple et rapide
|
|
2. **GitHub Pages** - Gratuit, hébergement GitHub
|
|
3. **AWS S3 + CloudFront** - Scalable, production
|
|
4. **Docker** - Conteneurisation
|
|
|
|
Voir [FRONTEND_GUIDE.md](./FRONTEND_GUIDE.md) pour les détails.
|
|
|
|
---
|
|
|
|
## 📚 Ressources
|
|
|
|
- 📖 [Documentation React](https://react.dev)
|
|
- 🛣️ [React Router](https://reactrouter.com)
|
|
- 🎨 [Lucide Icons](https://lucide.dev)
|
|
- 📱 [CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries)
|
|
|
|
---
|
|
|
|
## 📞 Support et Contact
|
|
|
|
Pour toute question:
|
|
1. Consultez la documentation
|
|
2. Vérifiez les logs console
|
|
3. Ouvrez une issue GitHub
|
|
|
|
---
|
|
|
|
## ✅ Checklist
|
|
|
|
- [ ] Installation complète
|
|
- [ ] Backend en cours d'exécution
|
|
- [ ] `npm start` lance l'app
|
|
- [ ] Accueil chargée correctement
|
|
- [ ] Inscription fonctionne
|
|
- [ ] Connexion fonctionne
|
|
- [ ] Dashboard visible après connexion
|
|
- [ ] Profil accessible
|
|
- [ ] Archives publiques visible
|
|
- [ ] Tests unitaires passent
|
|
|
|
---
|
|
|
|
**Bienvenue dans E-Voting! 🗳️**
|
|
|
|
Pour commencer: `npm start`
|