chore: add initial project setup with Docker and React configuration

2025-10-01 00:48:33 +02:00
commit 251b0afac2
33 changed files with 7772 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,165 @@
+# TP Écoconception Web - Site React
+
+Site web React présentant les résultats complets du TP sur l'écoconception et l'accessibilité web.
+
+## 📋 Contenu du TP
+
+Ce site présente de manière structurée et interactive tous les éléments suivants :
+
+### 🔍 Audit Initial
+- **Comparaison d'outils** : Analyse comparative de 5 outils d'écoconception (Website Carbon, EcoIndex, Lighthouse, GreenIT-Analysis, Scaphandre) avec graphique radar
+- **Website Carbon Calculator** : Décryptage technique et pédagogique complet
+- **Audit Environnemental** : Diagnostic et recommandations pour un site fictif
+- **RGESN** : Application du Référentiel Général d'Écoconception des Services Numériques
+
+### ♿ Accessibilité
+- **Principes de l'accessibilité** : Les 4 principes POUR (Perceptible, Utilisable, Compréhensible, Robuste)
+- **Audit WAVE** : Découverte et utilisation de l'outil WAVE avec exemples de corrections
+- **RGAA** : Conformité au Référentiel Général d'Amélioration de l'Accessibilité
+
+### 🗺️ Guide Pratique
+- **Guide d'écoconception** : Méthodologie complète pour intégrer l'écoconception dans un projet SAE
+- **Planning type** : Organisation sur 4 semaines avec checklists détaillées
+- **Outils recommandés** : Liste complète des outils pour chaque besoin
+
+### 🎯 Conclusion
+- Bilan des compétences acquises
+- Bénéfices multiples (environnementaux, sociaux, économiques, juridiques)
+- Ressources pour aller plus loin
+
+## 🚀 Installation et Lancement
+
+### Prérequis
+- Node.js (version 16 ou supérieure)
+- npm ou yarn
+
+### Étapes d'installation
+
+1. **Installer les dépendances**
+```bash
+npm install
+```
+
+2. **Lancer le serveur de développement**
+```bash
+npm run dev
+```
+
+3. **Ouvrir dans le navigateur**
+Le site sera accessible à l'adresse : `http://localhost:5173`
+
+### Commandes disponibles
+
+- `npm run dev` : Lance le serveur de développement
+- `npm run build` : Crée une version de production optimisée
+- `npm run preview` : Prévisualise la version de production
+
+## 🛠️ Technologies Utilisées
+
+- **React** 18.2 : Framework JavaScript
+- **React Router** 6.20 : Navigation entre les pages
+- **Recharts** 2.10 : Graphiques interactifs (radar)
+- **Vite** 5.0 : Build tool ultra-rapide
+- **Font Awesome** 6.5 : Icônes
+
+## 📁 Structure du Projet
+
+```
+Web_eco/
+├── src/
+│   ├── components/         # Composants réutilisables
+│   │   ├── Header.jsx
+│   │   ├── Sidebar.jsx
+│   │   └── Footer.jsx
+│   ├── pages/             # Pages du site
+│   │   ├── Home.jsx
+│   │   ├── ToolsComparison.jsx
+│   │   ├── WebsiteCarbon.jsx
+│   │   ├── EnvironmentalAudit.jsx
+│   │   ├── RGESN.jsx
+│   │   ├── Accessibility.jsx
+│   │   ├── WAVE.jsx
+│   │   ├── RGAA.jsx
+│   │   ├── EcoGuide.jsx
+│   │   └── Conclusion.jsx
+│   ├── App.jsx            # Composant principal
+│   ├── main.jsx          # Point d'entrée
+│   └── index.css         # Styles globaux
+├── index.html            # Template HTML
+├── package.json          # Dépendances
+└── vite.config.js       # Configuration Vite
+```
+
+## 🎨 Fonctionnalités
+
+### Navigation
+- **Menu latéral responsive** avec sections organisées
+- **Navigation fluide** entre les différentes sections
+- **Design moderne** avec palette de couleurs verte (écoresponsable)
+
+### Contenu Interactif
+- **Graphique radar** pour comparer les outils d'écoconception
+- **Tableaux comparatifs** détaillés
+- **Cartes d'information** visuelles
+- **Checklists** prêtes à l'emploi
+- **Exemples de code** avec syntaxe highlight
+
+### Design Responsive
+- **Adapté mobile, tablette et desktop**
+- **Sidebar repliable** sur mobile
+- **Grids flexibles** qui s'adaptent à la taille d'écran
+
+## 🌱 Bonnes Pratiques Écoconception Appliquées
+
+Ce site pratique ce qu'il enseigne :
+
+✅ **Images optimisées** : Utilisation d'icônes Font Awesome (vectoriel)
+✅ **CSS léger** : Pas de framework CSS lourd, styles custom optimisés
+✅ **Code minifié** : Build Vite optimise automatiquement
+✅ **Lazy loading** : React Router charge les pages à la demande
+✅ **Polices système** : Utilisation des polices natives du système
+✅ **Palette sobre** : Couleurs limitées et cohérentes
+
+## 📊 Résultats Attendus
+
+Après avoir suivi ce TP, vous serez capable de :
+- ✅ Mesurer l'empreinte environnementale d'un site web
+- ✅ Auditer l'accessibilité avec des outils professionnels
+- ✅ Appliquer les référentiels RGESN et RGAA
+- ✅ Proposer des recommandations techniques priorisées
+- ✅ Documenter et justifier vos choix d'écoconception
+- ✅ Intégrer ces pratiques dans vos projets futurs
+
+## 📚 Ressources Complémentaires
+
+### Référentiels
+- [RGESN](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/)
+- [RGAA](https://accessibilite.numerique.gouv.fr/)
+- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)
+
+### Outils
+- [Website Carbon Calculator](https://www.websitecarbon.com/)
+- [EcoIndex](https://www.ecoindex.fr/)
+- [WAVE](https://wave.webaim.org/)
+- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
+
+### Communautés
+- [Collectif Conception Numérique Responsable](https://collectif.greenit.fr/)
+- [Institut du Numérique Responsable](https://institutnr.org/)
+- [WebAIM](https://webaim.org/)
+
+## 👨‍🏫 Auteur du TP
+
+**Vincent Courboulay**
+
+## 📄 Licence
+
+Ce projet est à usage éducatif dans le cadre du TP d'écoconception web.
+
+## 🤝 Contribution
+
+Si vous trouvez des améliorations ou des corrections à apporter, n'hésitez pas à proposer vos modifications.
+
+---
+
+**Bon travail et n'oubliez pas : chaque ligne de code compte pour un numérique plus durable et inclusif ! 🌍**