3efdabdbbd
- Created `/frontend/app/api/votes/check/route.ts` to handle GET requests for checking if a user has voted in a specific election. - Added error handling for unauthorized access and missing election ID. - Forwarded requests to the backend API and returned appropriate responses. - Updated `/frontend/app/api/votes/history/route.ts` to fetch user's voting history with error handling. - Ensured both endpoints utilize the authorization token for secure access.
335 lines
6.9 KiB
Markdown
335 lines
6.9 KiB
Markdown
# 🚀 Guide de Démarrage - Frontend E-Voting
|
|
|
|
## 📋 Prérequis
|
|
|
|
- Node.js 14+ installé
|
|
- npm ou yarn
|
|
- Backend E-Voting en cours d'exécution sur `http://localhost:8000`
|
|
- Git (optionnel)
|
|
|
|
## 🎯 Installation Rapide
|
|
|
|
### 1. Installation des dépendances
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
```
|
|
|
|
### 2. Configuration de l'environnement
|
|
|
|
Créez un fichier `.env` basé sur `.env.example`:
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
Modifiez `.env` si nécessaire:
|
|
|
|
```
|
|
REACT_APP_API_URL=http://localhost:8000
|
|
REACT_APP_ENV=development
|
|
REACT_APP_DEBUG_MODE=true
|
|
```
|
|
|
|
### 3. Démarrage du serveur
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
L'application s'ouvrira automatiquement sur `http://localhost:3000`
|
|
|
|
## 📁 Structure du Projet
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── components/ # Composants réutilisables
|
|
│ ├── pages/ # Pages de l'application
|
|
│ ├── styles/ # Styles globaux
|
|
│ ├── config/ # Configuration (thème, etc.)
|
|
│ ├── utils/ # Utilitaires (API, etc.)
|
|
│ ├── hooks/ # Hooks personnalisés
|
|
│ ├── App.js # Application principale
|
|
│ └── index.js # Point d'entrée
|
|
├── public/ # Fichiers statiques
|
|
├── package.json # Dépendances
|
|
└── .env # Variables d'environnement
|
|
```
|
|
|
|
## 🎨 Personnalisation du Design
|
|
|
|
### Couleurs
|
|
|
|
Les couleurs sont définies dans `src/styles/globals.css`:
|
|
|
|
```css
|
|
:root {
|
|
--primary-dark: #1e3a5f;
|
|
--primary-blue: #2563eb;
|
|
--success-green: #10b981;
|
|
--warning-orange: #f97316;
|
|
--danger-red: #ef4444;
|
|
/* ... */
|
|
}
|
|
```
|
|
|
|
Pour modifier:
|
|
1. Ouvrez `src/styles/globals.css`
|
|
2. Changez les valeurs des variables CSS
|
|
|
|
### Fonts
|
|
|
|
Modifiez dans `src/styles/globals.css`:
|
|
|
|
```css
|
|
--font-primary: "Inter", "Segoe UI", "Roboto", sans-serif;
|
|
```
|
|
|
|
### Espacements et Radius
|
|
|
|
Ils sont aussi en variables CSS. Modifiez-les globalement pour changer tout le design.
|
|
|
|
## 🔄 Navigation
|
|
|
|
### Pages Publiques
|
|
- **`/`** - Accueil
|
|
- **`/login`** - Connexion
|
|
- **`/register`** - Inscription
|
|
- **`/archives`** - Votes terminés
|
|
|
|
### Pages Privées (après connexion)
|
|
- **`/dashboard`** - Tableau de bord
|
|
- **`/vote/:id`** - Page de vote
|
|
- **`/profile`** - Profil utilisateur
|
|
|
|
## 🔌 Intégration Backend
|
|
|
|
### Configuration de l'API
|
|
|
|
Modifiez l'URL de l'API dans `src/utils/api.js`:
|
|
|
|
```javascript
|
|
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000';
|
|
```
|
|
|
|
### Exemples d'Appels API
|
|
|
|
```javascript
|
|
import { APIClient } from './utils/api';
|
|
|
|
// Connexion
|
|
const data = await APIClient.login('user@example.com', 'password');
|
|
|
|
// Récupérer les votes
|
|
const votes = await APIClient.getElections();
|
|
|
|
// Voter
|
|
const result = await APIClient.submitVote(electionId, 'Oui');
|
|
```
|
|
|
|
## 🧪 Tests
|
|
|
|
```bash
|
|
# Lancer les tests
|
|
npm test
|
|
|
|
# Tests avec couverture
|
|
npm test -- --coverage
|
|
|
|
# Tests en mode watch
|
|
npm test -- --watch
|
|
```
|
|
|
|
## 🏗️ Build pour Production
|
|
|
|
```bash
|
|
# Créer un build optimisé
|
|
npm run build
|
|
|
|
# Le build sera créé dans le dossier `build/`
|
|
```
|
|
|
|
## 🐛 Debugging
|
|
|
|
### Console du Navigateur
|
|
|
|
1. Ouvrez DevTools: `F12` ou `Ctrl+Shift+I` (Windows/Linux) / `Cmd+Option+I` (Mac)
|
|
2. Allez à l'onglet "Console"
|
|
3. Vérifiez les erreurs
|
|
|
|
### React DevTools
|
|
|
|
Installez l'extension [React DevTools](https://react-devtools-tutorial.vercel.app/) pour votre navigateur.
|
|
|
|
### Redux DevTools (optionnel)
|
|
|
|
Si vous utilisez Redux, installez [Redux DevTools](https://github.com/reduxjs/redux-devtools).
|
|
|
|
## 📱 Responsive Design
|
|
|
|
Le design est optimisé pour:
|
|
- **Desktop**: 1024px+
|
|
- **Tablet**: 768px - 1024px
|
|
- **Mobile**: < 768px
|
|
|
|
Testez sur mobile:
|
|
1. Ouvrez DevTools (`F12`)
|
|
2. Cliquez sur l'icône "Toggle device toolbar"
|
|
3. Sélectionnez un appareil mobile
|
|
|
|
## ⚡ Performance
|
|
|
|
### Optimisation des Images
|
|
|
|
Utilisez des images compressées. Outils recommandés:
|
|
- TinyPNG
|
|
- ImageOptim
|
|
- GIMP
|
|
|
|
### Code Splitting
|
|
|
|
Déjà implémenté avec `React.lazy()` et `Suspense`.
|
|
|
|
### Caching
|
|
|
|
Le navigateur cache automatiquement les fichiers statiques. Pour forcer un refresh:
|
|
`Ctrl+Shift+R` (Windows/Linux) / `Cmd+Shift+R` (Mac)
|
|
|
|
## 🔒 Sécurité
|
|
|
|
### Authentification
|
|
|
|
- Le token JWT est stocké dans localStorage
|
|
- À inclure dans le header `Authorization` pour les requêtes privées
|
|
- Stocké automatiquement après la connexion
|
|
|
|
### Validation des Données
|
|
|
|
Tous les formulaires sont validés côté client:
|
|
- Email valide
|
|
- Mot de passe minimum 8 caractères
|
|
- Confirmation de mot de passe
|
|
|
|
### HTTPS en Production
|
|
|
|
Assurez-vous d'utiliser HTTPS en production pour sécuriser les données.
|
|
|
|
## 🌍 Internationalisation (i18n)
|
|
|
|
Pour ajouter plusieurs langues:
|
|
|
|
1. Installez `i18next`:
|
|
```bash
|
|
npm install i18next i18next-react-backend i18next-browser-languagedetector
|
|
```
|
|
|
|
2. Créez des fichiers de traduction dans `src/locales/`
|
|
|
|
3. Configurez i18next dans `src/i18n.js`
|
|
|
|
## 📦 Déploiement
|
|
|
|
### GitHub Pages
|
|
|
|
```bash
|
|
# Ajouter dans package.json:
|
|
"homepage": "https://yourusername.github.io/e-voting-system",
|
|
|
|
# Build et déployer
|
|
npm run build
|
|
npm install gh-pages
|
|
npm run deploy
|
|
```
|
|
|
|
### Vercel
|
|
|
|
```bash
|
|
# Installez Vercel CLI
|
|
npm i -g vercel
|
|
|
|
# Déployez
|
|
vercel
|
|
```
|
|
|
|
### AWS S3 + CloudFront
|
|
|
|
1. Build: `npm run build`
|
|
2. Upload le dossier `build/` vers S3
|
|
3. Configurez CloudFront pour servir le contenu
|
|
|
|
### Docker
|
|
|
|
```bash
|
|
# Créez un Dockerfile
|
|
FROM node:16
|
|
WORKDIR /app
|
|
COPY package*.json ./
|
|
RUN npm install
|
|
COPY . .
|
|
RUN npm run build
|
|
EXPOSE 3000
|
|
CMD ["npm", "start"]
|
|
|
|
# Build et run
|
|
docker build -t evoting-frontend .
|
|
docker run -p 3000:3000 evoting-frontend
|
|
```
|
|
|
|
## 🆘 Dépannage Commun
|
|
|
|
### "Cannot find module"
|
|
```bash
|
|
# Supprimez node_modules et réinstallez
|
|
rm -rf node_modules package-lock.json
|
|
npm install
|
|
```
|
|
|
|
### Port 3000 déjà utilisé
|
|
```bash
|
|
# Utilisez un autre port
|
|
PORT=3001 npm start
|
|
```
|
|
|
|
### Erreur CORS avec le backend
|
|
Assurez-vous que le backend a CORS activé pour `http://localhost:3000`
|
|
|
|
### Connexion refusée au backend
|
|
Vérifiez que le backend fonctionne sur `http://localhost:8000`:
|
|
```bash
|
|
curl http://localhost:8000/health
|
|
```
|
|
|
|
## 📚 Ressources Supplémentaires
|
|
|
|
- [Documentation React](https://react.dev)
|
|
- [React Router](https://reactrouter.com)
|
|
- [JavaScript Moderne (ES6+)](https://es6.io)
|
|
- [CSS Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
|
- [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
|
|
|
## 📞 Support
|
|
|
|
Pour des questions ou des problèmes:
|
|
1. Consultez la [documentation](./README_FRONTEND.md)
|
|
2. Vérifiez les logs de la console
|
|
3. Ouvrez une issue sur GitHub
|
|
|
|
## ✅ Checklist de Déploiement
|
|
|
|
- [ ] Vérifier les variables d'environnement
|
|
- [ ] Tester toutes les pages
|
|
- [ ] Tester sur mobile
|
|
- [ ] Vérifier les performances (npm run build)
|
|
- [ ] Vérifier la sécurité (pas de données sensibles dans le code)
|
|
- [ ] Tester l'authentification
|
|
- [ ] Tester tous les formulaires
|
|
- [ ] Vérifier les logs d'erreur
|
|
- [ ] Mettre à jour le domaine dans la config
|
|
- [ ] Déployer sur le serveur
|
|
|
|
---
|
|
|
|
**Bonne chance! 🎉**
|