CIA/e-voting-system/FRONTEND_GUIDE.md

🚀 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

cd frontend
npm install

2. Configuration de l'environnement

Créez un fichier .env basé sur .env.example:

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

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:

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

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

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000';

Exemples d'Appels API

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

# Lancer les tests
npm test

# Tests avec couverture
npm test -- --coverage

# Tests en mode watch
npm test -- --watch

🏗️ Build pour Production

# 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 pour votre navigateur.

Redux DevTools (optionnel)

Si vous utilisez Redux, installez 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:

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

# 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

# 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

# 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"

# Supprimez node_modules et réinstallez
rm -rf node_modules package-lock.json
npm install

Port 3000 déjà utilisé

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

curl http://localhost:8000/health

📚 Ressources Supplémentaires

• Documentation React
• React Router
• JavaScript Moderne (ES6+)
• CSS Flexbox Guide
• CSS Grid Guide

📞 Support

Pour des questions ou des problèmes:

1. Consultez la documentation
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! 🎉