# Frontend E-Voting System

Un frontend complet et moderne pour le système de vote électronique, construit avec React et un design professionnalresponsive.

## 🏗️ Structure du Projet

```
frontend/
├── src/
│   ├── components/           # Composants réutilisables
│   │   ├── Header.jsx       # Barre de navigation
│   │   ├── Footer.jsx       # Pied de page
│   │   ├── VoteCard.jsx     # Carte de vote
│   │   ├── Alert.jsx        # Notifications
│   │   ├── Modal.jsx        # Boîte de dialogue
│   │   ├── LoadingSpinner.jsx # Indicateur de chargement
│   │   ├── index.js         # Export des composants
│   │   └── *.css            # Styles des composants
│   │
│   ├── pages/               # Pages principales
│   │   ├── HomePage.jsx             # Page d'accueil publique
│   │   ├── LoginPage.jsx            # Connexion
│   │   ├── RegisterPage.jsx         # Inscription
│   │   ├── DashboardPage.jsx        # Tableau de bord (connecté)
│   │   ├── VotingPage.jsx           # Page de vote
│   │   ├── ArchivesPage.jsx         # Archives publiques
│   │   ├── ProfilePage.jsx          # Profil utilisateur
│   │   ├── index.js                 # Export des pages
│   │   └── *.css                    # Styles des pages
│   │
│   ├── styles/              # Styles globaux
│   │   ├── globals.css      # Thème et variables CSS
│   │   └── components.css   # Styles des composants de base
│   │
│   ├── App.js              # Application principale avec routage
│   ├── App.css             # Styles de l'application
│   ├── index.js            # Point d'entrée
│   └── index.css           # Styles de base
│
└── package.json            # Dépendances du projet
```

## 🎨 Palette de Couleurs

| Classe | Couleur | Utilisation |
|--------|---------|-------------|
| `--primary-dark` | #1e3a5f | Bleu foncé - Confiance, titres |
| `--primary-blue` | #2563eb | Bleu principal - Actions, liens |
| `--primary-light` | #3b82f6 | Bleu clair - Dégradés |
| `--success-green` | #10b981 | Vert - Succès, confirmations |
| `--warning-orange` | #f97316 | Orange - Alertes, actions urgentes |
| `--danger-red` | #ef4444 | Rouge - Erreurs, suppression |
| `--light-gray` | #f3f4f6 | Gris clair - Fond |
| `--white` | #ffffff | Blanc - Cartes, formulaires |

## 📱 Pages Disponibles

### Pages Publiques (accessibles sans connexion)

- **`/`** - Page d'accueil
  - Section héros avec CTA
  - "Comment ça marche" (3 étapes)
  - Présentation des garanties
  - Aperçu des votes récents

- **`/register`** - Inscription
  - Formulaire de création de compte
  - Validation des données
  - Acceptation des CGU

- **`/login`** - Connexion
  - Formulaire d'authentification
  - Lien "Mot de passe oublié"

- **`/archives`** - Archives Publiques
  - Liste de tous les votes terminés
  - Recherche et filtrage
  - Affichage des résultats

### Pages Privées (accessibles après connexion)

- **`/dashboard`** - Tableau de Bord
  - Statistiques personnalisées (votes actifs, futurs, historique)
  - Section "Action Requise" pour les votes urgents
  - Filtrage par statut (all, actifs, futurs, historique)

- **`/vote/:id`** - Page de Vote
  - Détails complets du vote
  - Description et contexte
  - Formulaire de sélection d'option
  - Modal de confirmation
  - Écran de succès après vote

- **`/profile`** - Profil Utilisateur
  - Modification du nom et email
  - Changement de mot de passe
  - Déconnexion

## 🔄 Routage

```javascript
/ - Public
├── HomePage
├── /register - RegisterPage
├── /login - LoginPage
├── /archives - ArchivesPage
│
└── (Privé) Nécessite connexion
    ├── /dashboard - DashboardPage
    ├── /dashboard/actifs - DashboardPage (filtré)
    ├── /dashboard/futurs - DashboardPage (filtré)
    ├── /dashboard/historique - DashboardPage (filtré)
    ├── /vote/:id - VotingPage
    └── /profile - ProfilePage
```

## 🚀 Démarrage Rapide

### Installation

```bash
cd frontend
npm install
```

### Développement

```bash
npm start
```

L'application s'ouvrira sur `http://localhost:3000`

### Build pour la production

```bash
npm run build
```

## 🧩 Composants Réutilisables

### Header
Barre de navigation avec logo, liens de navigation et profil utilisateur.
- Menu responsive sur mobile
- Navigation différente selon la connexion

### Footer
Pied de page avec liens, infos de contact et copyright.

### VoteCard
Affichage d'un vote sous forme de carte.
- Titre, description, statut
- Countdown (temps restant)
- Résultats (si terminé)
- Bouton d'action approprié

### Alert
Notifications avec types: success, error, warning, info.
- Icônes automatiques
- Fermeture possible

### Modal
Boîte de dialogue modale.
- Titre, contenu, actions
- Confirmation/Annulation

### LoadingSpinner
Indicateur de chargement.
- Version inline ou fullscreen

## 🎯 Fonctionnalités

✅ **Authentification**
- Inscription et connexion sécurisées
- Stockage du token JWT
- Vérification de session

✅ **Gestion des Votes**
- Affichage des votes par statut
- Participation au vote avec confirmation
- Visualisation des résultats

✅ **Profil Utilisateur**
- Modification des informations
- Changement de mot de passe
- Déconnexion sécurisée

✅ **Responsive Design**
- Mobile-first approach
- Grille fluide
- Media queries pour tous les appareils

✅ **Accessibilité**
- Contraste élevé
- Navigation au clavier
- Textes alternatifs
- Sémantique HTML

✅ **Performance**
- Code splitting
- Lazy loading des pages
- Optimisation des requêtes API

## 🎨 Design System

### Espacements
- `--spacing-xs`: 0.25rem
- `--spacing-sm`: 0.5rem
- `--spacing-md`: 1rem
- `--spacing-lg`: 1.5rem
- `--spacing-xl`: 2rem
- `--spacing-2xl`: 3rem

### Radius
- `--radius-sm`: 0.375rem
- `--radius-md`: 0.5rem
- `--radius-lg`: 0.75rem
- `--radius-xl`: 1rem

### Shadows
- `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`

## 📞 API Integration

L'application communique avec le backend sur `http://localhost:8000`:

- `POST /auth/register` - Inscription
- `POST /auth/login` - Connexion
- `GET /elections/` - Lister les votes
- `GET /elections/{id}` - Détails d'un vote
- `POST /votes/submit` - Soumettre un vote
- `GET /votes/my-votes` - Mes votes
- `PUT /auth/profile` - Mise à jour profil
- `POST /auth/change-password` - Changer le mot de passe

## 🔐 Sécurité

- Tokens JWT stockés en localStorage
- Authentification requise pour les pages privées
- Redirection automatique vers login si non connecté
- Validation des formulaires côté client
- Protection des routes

## 📱 Responsive Breakpoints

- **Desktop**: > 1024px
- **Tablet**: 768px - 1024px
- **Mobile**: < 768px

## 🔄 État Global

État géré avec React Context et localStorage:
- Utilisateur connecté
- Token d'authentification
- Informations du voter

## 📦 Dépendances

- `react` - Framework
- `react-dom` - Rendu DOM
- `react-router-dom` - Routage
- `axios` - Requêtes HTTP
- `lucide-react` - Icônes

## 🛠️ Outils de Développement

- `react-scripts` - Configuration webpack
- Linter ESLint
- Formatage automatique (Prettier)

## 📄 License

Ce projet est sous licence MIT.