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

```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! 🎉**