Aide à la Décision - Bilan de Compétences

Application web React pour identifier et visualiser vos intérêts professionnels et motivations clés sous forme de graphique Treemap interactif.

🚀 Fonctionnalités

• ✅ Gestion multi-professions : Créer et gérer jusqu'à 5 professions différentes
• ✅ Gestion des intérêts professionnels : Création, modification, suppression avec couleurs personnalisées (max 10)
• ✅ Gestion des motivations clés : Ajout, modification, suppression avec importance (1-30) et type (Avantage/Désavantage/NSP)
• ✅ Visualisation graphique : Treemap interactif où la taille dépend de l'importance
• ✅ Modes de visualisation : Basculer entre couleurs par catégorie ou par type de motivation
• ✅ Modification en temps réel : Slider pour ajuster l'importance avec mise à jour instantanée
• ✅ Interface responsive : Adaptée aux différentes tailles d'écran
• ✅ Accessibilité : Conforme aux standards WCAG AA
• ✅ Persistance locale : Données sauvegardées dans le navigateur (localStorage)
• ✅ Tests complets : Tests unitaires avec couverture maximale

📋 Prérequis

• Node.js >= 20.x et npm

🛠️ Installation

1. Installer les dépendances

npm install

🎯 Lancement de l'application

Mode développement

npm run dev

L'application sera accessible sur http://localhost:3000 et s'ouvrira automatiquement dans votre navigateur.

Build pour production

npm run build

Les fichiers compilés seront dans le dossier dist/.

Prévisualiser le build

npm run preview

🌐 Déploiement sur GitHub Pages

L'application est configurée pour être déployée automatiquement sur GitHub Pages.

Configuration automatique

1. Activer GitHub Pages dans votre repository :

   • Allez dans Settings > Pages
   • Source : GitHub Actions

2. Le déploiement se fait automatiquement :

   • À chaque push sur main ou master
   • Via le workflow GitHub Actions (.github/workflows/deploy.yml)

3. Votre application sera accessible à :

   • https://[votre-username].github.io/[nom-du-repo]/

Déploiement manuel

Si vous préférez déployer manuellement :

# Build avec la base path pour GitHub Pages
GITHUB_PAGES=true GITHUB_REPOSITORY_NAME=votre-nom-de-repo npm run build

# Puis poussez le dossier dist/ sur la branche gh-pages
# ou utilisez gh-pages npm package

Notes importantes

• Le workflow exécute les tests avant de déployer
• Seuls les builds qui passent les tests sont déployés
• Les données sont stockées dans le localStorage du navigateur (pas de serveur requis)

📁 Structure du projet

bulle_chart/
├── src/
│   ├── components/        # Composants React
│   │   ├── ui/           # Composants UI réutilisables
│   │   ├── forms/        # Formulaires
│   │   ├── charts/       # Composants graphiques
│   │   └── *.test.jsx    # Tests des composants
│   ├── hooks/            # Hooks personnalisés
│   │   └── *.test.js     # Tests des hooks
│   ├── utils/            # Utilitaires et constantes
│   │   └── *.test.js     # Tests des utilitaires
│   ├── services/         # Services (stockage local)
│   │   └── *.test.js     # Tests des services
│   ├── types/            # Définitions de types (JSDoc)
│   ├── styles/           # Styles CSS
│   │   ├── variables.css # Variables CSS
│   │   └── app.css       # Styles principaux
│   ├── test/             # Configuration des tests
│   │   ├── setup.js
│   │   └── templates/   # Templates de tests
│   ├── App.jsx           # Composant principal
│   └── main.jsx          # Point d'entrée
├── index.html
├── vite.config.js
├── package.json
├── TESTING.md            # Guide de tests
├── CONTRIBUTING.md       # Guide de contribution
└── README.md

🧪 Tests

L'application utilise Vitest et React Testing Library pour les tests.

# Lancer les tests
npm test

# Lancer les tests avec couverture
npm test:coverage

# Lancer les tests en mode CI (optimisé pour CI/CD)
npm test:ci

# Interface graphique pour les tests
npm test:ui

# Mode watch (développement)
npm test:watch

# Vérifier package-lock.json est synchronisé
npm run verify-lock

# Vérifier tout avant push (lock + tests)
npm run check

Important : Toute nouvelle fonctionnalité ou modification doit inclure les tests correspondants. Voir TESTING.md pour les guidelines de tests.

Vérifications avant push

Avant de pousser du code, il est recommandé d'exécuter :

npm run check

Ce script vérifie :

• ✅ Que package-lock.json est synchronisé avec package.json
• ✅ Que tous les tests passent

Ces vérifications sont également exécutées automatiquement dans le workflow GitHub Actions.

Couverture actuelle

• 285 tests passent avec succès
• Couverture globale : ~65%
• Services : ~97% de couverture
• Composants UI : ~100% de couverture

🎨 Technologies utilisées

• React 18 : Bibliothèque UI
• Vite : Build tool et serveur de développement
• Vitest : Framework de tests
• React Testing Library : Tests de composants React
• Material-UI : Composants UI (Slider, Icons)
• Recharts : Graphiques (Treemap)

💾 Stockage des données

Les données sont stockées dans le localStorage du navigateur. Cela signifie que :

• Les données sont persistantes entre les sessions
• Les données sont spécifiques à chaque navigateur
• Les données sont stockées localement (pas de serveur requis)

Pour exporter/importer les données

Vous pouvez utiliser la console du navigateur :

// Exporter les données
JSON.stringify(localStorage.getItem('bulle_chart_categories'))

// Importer les données
localStorage.setItem('bulle_chart_categories', '[votre JSON]')

🐛 Dépannage

L'application ne se lance pas

• Vérifiez que Node.js >= 20 est installé : node --version
• Supprimez node_modules/ et relancez npm install
• Vérifiez que le port 3000 n'est pas déjà utilisé

Les données ne persistent pas

• Vérifiez que les cookies/localStorage ne sont pas désactivés dans votre navigateur
• Vérifiez la console du navigateur pour les erreurs
• Consultez RESET_LOCALSTORAGE.md pour réinitialiser les données

Les tests échouent

• Vérifiez que toutes les dépendances sont installées : npm install
• Vérifiez que les imports sont corrects après un refactoring
• Consultez TESTING.md pour les guidelines de tests

Problèmes de déploiement GitHub Pages

• Vérifiez que GitHub Actions est activé dans les paramètres du repository
• Vérifiez que le workflow .github/workflows/deploy.yml s'exécute correctement
• Attendez quelques minutes pour la propagation DNS après le déploiement

📚 Documentation

• TESTING.md - Guide complet pour écrire et maintenir les tests
• CONTRIBUTING.md - Guide de contribution au projet
• RESET_LOCALSTORAGE.md - Guide pour réinitialiser les données
• ACCESSIBILITY.md - Rapport de conformité d'accessibilité WCAG AA

📄 Licence

MIT

👤 Auteur

Développé pour l'aide à la décision dans le cadre d'un bilan de compétences.