CIA/e-voting-system/.backups/frontend-old/README_FRONTEND.md

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

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

cd frontend
npm install

Développement

npm start

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

Build pour la production

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.