Go to file
2026-06-21 18:03:31 +02:00
dist chore: configure environment variables, update gitignore, and update build assets 2026-06-21 18:03:31 +02:00
docs/superpowers docs: add redesign spec and implementation plan 2026-06-21 16:38:56 +02:00
node_modules chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00
src chore: configure environment variables, update gitignore, and update build assets 2026-06-21 18:03:31 +02:00
.env.ocal chore: configure environment variables, update gitignore, and update build assets 2026-06-21 18:03:31 +02:00
.gitignore chore: configure environment variables, update gitignore, and update build assets 2026-06-21 18:03:31 +02:00
index.html chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00
package-lock.json chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00
package.json chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00
read.me chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00
README.md chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00
vite.config.js chore: restore missing dependency and build files in node_modules 2026-06-21 11:01:17 +02:00

Bilans de compétences - Standalone

Cette application web est un outil interactif destiné aux formateurs pour évaluer les compétences professionnelles (CP1 à CP9) des apprenants dans les domaines du design graphique, de la communication, du webmarketing et du développement web.

Elle permet d'évaluer les acquis, de générer automatiquement des synthèses avec des recommandations personnalisées, de faire appel à l'IA pour rédiger une appréciation et d'exporter le bilan final au format PDF.


🚀 Fonctionnalités

  • Évaluation par Compétence Professionnelle (CP1 à CP9) :
    • CP1 : Réaliser des illustrations
    • CP2 : Concevoir des interfaces graphiques et des prototypes
    • CP3 : Réaliser une animation pour différents supports de diffusion
    • CP4 : Créer des supports de communication
    • CP5 : Mettre en œuvre une stratégie webmarketing
    • CP6 : Assurer une veille pro et développer les compétences collectives
    • CP7 : Intégrer des pages web
    • CP8 : Adapter des systèmes de gestion de contenus
    • CP9 : Optimiser en continu un site web ou une interface
  • Gestion dynamique des critères :
    • Notation par niveau : Non acquis (NA), En cours (EC), Acquis (AC), Maîtrisé (MA).
    • Classement automatique par type : Critères de Performance, Critères de Compétence, Critères de Connaissance.
    • Glisser-déposer (Drag & Drop) pour reclasser facilement un critère d'une catégorie à une autre.
    • Possibilité d'ajouter des critères personnalisés en temps réel.
  • Synthèse automatique :
    • Calcul automatique des statistiques de réussite globales et par catégorie (taux de validation).
    • Génération automatique d'un rapport structuré avec les points forts, les axes de progression et des recommandations pédagogiques adaptées.
  • Assistant IA (OpenAI) :
    • Rédaction automatisée de résumés d'évaluation de manière bienveillante et professionnelle.
    • Choix du ton (neutre, encourageant, etc.), saisie de notes formateur complémentaires et choix du modèle OpenAI (ex. gpt-4o-mini).
  • Export PDF :
    • Génération d'un document PDF prêt à imprimer ou à partager, incluant l'en-tête de l'organisme, la synthèse formatée et la pagination automatique.

🛠️ Technologies utilisées

  • Framework : React 18
  • Build Tool : Vite avec le plugin React SWC
  • Génération PDF : pdf-lib pour la création et le formatage de documents PDF à la volée dans le navigateur
  • Intégration IA : API Chat Completions de OpenAI
  • Styles : CSS Vanilla (pour un contrôle total de la mise en page responsive)

⚙️ Installation et Démarrage

Prérequis

Assurez-vous d'avoir installé Node.js (version 18 ou supérieure recommandée) et npm sur votre machine.

1. Installation des dépendances

Dans le dossier du projet, installez les modules nécessaires :

npm install

2. Démarrer le serveur de développement

Lancez le projet en local avec Vite :

npm run dev

Une fois démarré, ouvrez votre navigateur à l'adresse indiquée (généralement http://localhost:5173).

3. Build pour la production

Pour générer les fichiers optimisés pour la mise en production (dans le dossier dist) :

npm run build

4. Prévisualiser le build de production

Pour tester le build de production localement :

npm run preview

💡 Utilisation

  1. Saisir les informations : Indiquez le prénom et le nom de l'apprenant dans l'en-tête.
  2. Sélectionner un module (CP) : Choisissez le CP à évaluer dans la liste déroulante ou le menu de gauche.
  3. Évaluer : Cochez les critères à inclure dans l'évaluation et sélectionnez le niveau (NA, EC, AC, MA).
  4. Organiser et Personnaliser :
    • Ajoutez des critères spécifiques si nécessaire.
    • Glissez-déposez les critères si vous souhaitez modifier leur classification.
  5. Générer l'observation : Cliquez sur le bouton de génération pour prévisualiser la synthèse.
  6. Utiliser l'IA (Optionnel) : Saisissez votre clé API OpenAI, vos éventuelles notes de formateur additionnelles, puis cliquez sur générer pour enrichir l'appréciation.
  7. Télécharger le PDF : Cliquez sur le bouton de téléchargement pour exporter le bilan final au format PDF.