Projet GreenScore (plugin + application web)
(temps de lecture estimé : 7min)
Objectifs et contexte du projet
GreenScore est un projet à vocation éco-responsable réalisé en équipe dans le cadre de ma troisième année de BUT Informatique. Le projet nous a été confié par un commanditaire, Philippe Roose, ce qui nous a permis de travailler dans des conditions proches du monde professionnel, avec un suivi régulier, des attentes précises et des retours concrets à intégrer.
Il se compose de deux outils :
- Un plugin Firefox qui estime l’empreinte carbone des pages web visitées, fournit des équivalents concrets, une note (A à G) et des conseils. Il peut envoyer les données vers l’application web.
- Une application web avec des dashboards personnalisés (utilisateur/organisation) affichant l’empreinte carbone totale, les sites les plus énergivores, des comparaisons et des conseils.
L’objectif de ce projet est de sensibiliser les utilisateurs à l’impact environnemental de leur navigation sur internet, en leur donnant des estimations concrètes de l’empreinte carbone des sites qu’ils visitent.
Ma contribution dans le projet
1. Conception des maquettes des dashboards avec Figma
J’ai été chargé de concevoir les interfaces utilisateurs (UI) des différents dashboards à l’aide de Figma, un outil de design d’interface collaboratif.
- Réalisation des maquettes des dashboards : utilisateur, organisation, et analyse d’une page web.
- Respect de la charte graphique et des attentes transmises par le commanditaire.
- Ajustements réguliers des contenus en fonction de ses retours pour répondre à ses besoins spécifiques.
- Les interfaces ont été pensées pour être simples à comprendre, épurées, et cohérentes avec l’identité écoresponsable du projet.
2. Développement des dashboards
Après validation des maquettes, j’ai développé les trois tableaux de bord, en découvrant de nouvelles technologies : Symfony (PHP), Twig, et Tailwind CSS.
J’ai structuré cette partie de manière claire en développant les éléments nécessaires à son bon fonctionnement : gestion des données, logique métier et affichage. J’ai aussi utilisé des APIs externes, conçu des éléments réutilisables (widgets dans des fichiers séparés) et organisé le code pour qu’il soit facile à maintenir.
Ce projet m’a permis de progresser rapidement dans un environnement technique nouveau.
3. Participation aux tests unitaires
J’ai également participé à la mise en place des tests unitaires pour vérifier automatiquement que le code se comporte comme attendu.
Pour cela j'ai utilisé la méthode Given / When / Then :
- Given (Étant donné) : on définit une situation de départ.
- When (Quand) : on exécute une action.
- Then (Alors) : on vérifie que le résultat est bien celui attendu.
Ainsi que des mocks (données simulées) pour reproduire des scénarios sans dépendre de la base de données réelle. Cela permet de s'assurer que chaque "brique" de l'application fonctionne de manière fiable, même lorsque d’autres parties du code changent.
Ce travail m’a permis de comprendre l’importance des tests dans un projet de qualité, et d’adopter une logique rigoureuse pour prévenir les bugs avant qu’ils n’apparaissent.
4. Création du logo GreenScore
En parallèle du développement, j’ai aussi créé le logo du projet GreenScore, en partant d’une idée personnelle que j’ai ensuite retravaillée avec les retours de mes coéquipiers.
- Format final : PNG, utilisable sur tous supports (plugin, application web, présentation…).
- Le logo devait refléter à la fois l’aspect écologique (green) et l’analyse technique (score).
- Il a été simplifié et équilibré graphiquement pour être facilement reconnaissable, même en petite taille.
Ce travail m’a permis d’allier créativité et communication visuelle, en traduisant un concept technique en un symbole accessible et évocateur.
5. Stack technique utilisée
Voici un aperçu des outils et langages que j’ai utilisés ou découverts pendant ce projet :
- Figma → création d’interfaces utilisateurs.
- Symfony (PHP) → structure du site, gestion des routes, sécurité.
- Twig → moteur de templates pour générer les pages dynamiques.
- Tailwind CSS → design rapide et responsive.
- JavaScript → interactions côté plugin et sur certaines parties de l’UI.
- PHPUnit → tests unitaires automatisés.
- Git / GitHub / GitHub Actions → versionnage du code, collaboration et intégration continue.
- AlwaysData → hébergement du site et de la base de données.
Cette expérience m’a appris à mener un projet de bout en bout, en conciliant créativité, rigueur et sens du compromis pour aboutir à une solution à la fois esthétique, qualitative et budgétairement viable.
6. Compétences développées
Ce projet m’a permis de progresser techniquement mais aussi personnellement. J’ai appris à travailler sur un projet complet, en équipe, avec des contraintes de temps et des exigences client.
Compétences techniques
- Conception d’interfaces (UI).
- Développement front-end responsive et clair.
- Développement back-end.
- Écriture de code propre, structuré et maintenable.
- Mise en place de tests automatisés.
- Familiarisation avec de nouveaux outils : Symfony, Twig, Tailwind, PHPUnit, GitHub Actions.
Compétences humaines
- Organisation et rigueur : gestion des tâches, respect des deadlines.
- Collaboration : échanges réguliers avec les membres du groupe, écoute des suggestions.
- Créativité : conception de maquettes et d’un logo cohérent avec la thématique.
- Capacité d’adaptation : apprentissage rapide de technologies inconnues en autonomie.
- Réactivité face aux retours : ajustements en fonction des retours du commanditaire.
