PayGap Quest

Type
  • Hackathon
Rôle
  • Porteuse de projet
  • Front-End
  • Rédaction
Tech
  • HTML / CSS
  • JavaScript
  • PHP / JSON
Code Source
Demo

⚠️ Cette version est une démonstration interactive Frontend uniquement. L'architecture complète est consultable sur GitHub.

PayGap Quest est un simulateur interactif conçu pour lever le voile sur les données liées à l'égalité salariale et transformer la négociation de carrière en un exercice accessible et structuré. En traduisant des données macro-économiques complexes en une expérience utilisateur fluide et pédagogique, cet outil permet aux utilisatrices de simuler leurs trajectoires, de calculer leur évolution potentielle et d'aborder les discussions salariales avec des arguments chiffrés et fiables.

Mock-up

Objectif du projet

L'écart salarial est parfois perçu comme une donnée complexe ou abstraite. L'objectif de PayGap Quest était de dépasser la simple consultation de données pour offrir un véritable outil d'aide à la décision. Sachant que l'absence de négociation peut avoir un impact significatif sur l'ensemble d'une carrière, nous voulions concevoir une interface capable d'accompagner les utilisatrices avec des éléments tangibles et personnalisés pour faciliter les échanges liés à la rémunération en entreprise.

Fonctionnalités clés :

    • Calculateur salarial : Comparatif dynamique basé sur le secteur, l’ancienneté et le genre.
    • Feuille de route : Guide de préparation structuré et téléchargeable en PDF.
    • Boîte à outils : Annuaire de ressources professionnelles pour s'informer.
    • API Sectorielle : Structuration des données réelles du rapport 2024 de l'Institut pour l'égalité des femmes et des hommes (IEFH).

Réalisations

Front : Le compte à rebours dynamique

Visualiser la donnée temporelle

Pour capter immédiatement l'attention des utilisateur·ices, j'ai développé un compteur pour créer un point d'accroche dès la page d'accueil. Mon objectif était de traduire une statistique "froide" en une réalité tangible. Le compte à rebours est initialisé à partir du 20 octobre, qui correspond à la journée symbolique de l’UnEqual Pay Day (date à partir de laquelle, statistiquement, s'illustre l'écart de revenus annuel). J’ai conçu une logique hybride qui détecte la date du jour. Avant le 20 octobre, le script affiche un compte à rebours ; dès la date passée, il bascule automatiquement en compteur de temps écoulé. Ainsi, le message reste pertinent toute l’année.

Démonstration du compte à rebours dynamique hybride.
// Date de référence : Unequal Pay Day
const unequalPayDay = new Date('2025-10-20T00:00:00');
const counterElement = document.getElementById('counter');

function updateCounter() {
  const today = new Date();
  let diff = today - unequalPayDay;

  // Utilisation de Math.abs pour garantir des valeurs positives
  const absoluteDiff = Math.abs(diff);

  const diffDays = Math.floor(absoluteDiff / (1000 * 60 * 60 * 24));
  const diffHours = Math.floor((absoluteDiff / (1000 * 60 * 60)) % 24);
  const diffMinutes = Math.floor((absoluteDiff / (1000 * 60)) % 60);

  // Logique hybride d'affichage
  if (diff < 0) {
    // AVANT le 20 octobre : Compte à rebours
    counterElement.innerHTML = `Dans <strong>${diffDays} jours</strong>, <strong>${diffHours} heures</strong> et <strong>${diffMinutes} minutes</strong>, les femmes travailleront gratuitement.`;
  } else {
    // APRÈS le 20 octobre : Temps écoulé
    counterElement.innerHTML = `Depuis <strong>${diffDays} jours</strong>, <strong>${diffHours} heures</strong> et <strong>${diffMinutes} minutes</strong>, les femmes travaillent gratuitement.`;
  }
}

// Mise à jour de l'affichage chaque minute
setInterval(updateCounter, 1000 * 60);
updateCounter();

Back : Le calculateur d’écart salarial

Comparatif basé sur le secteur, l’ancienneté et le genre.

Pour rendre les données de l’IEFH concrètes, notre équipe a mis en place un simulateur dynamique. Le fonctionnement repose sur une architecture découplée où le Front-end interroge une API REST développée en PHP

Démonstration du simulateur : saisie des données et affichage dynamique de l’écart salarial.

Le processus technique s’articule en trois étapes :

  • Communication asynchrone (AJAX/Fetch) : Lorsqu’une utilisatrice saisit son secteur, son métier et son salaire, le Front-end envoie une requête GET paramétrée au serveur sans recharger la page.
  • Logique métier côté Serveur : Le backend utilise la Programmation Orientée Objet (via la classe SalaryCalculator) pour traiter la demande. Le script parse un fichier JSON source servant de base de données, puis applique des algorithmes d’ajustement selon le profil (ex: pondération de -10% pour un profil Junior ou +15% pour un profil Senior).
  • Traitement et Formatage : Le serveur calcule l’écart personnel et l’écart de genre du secteur, puis renvoie une réponse structurée en JSON. Le Front-end récupère ces objets pour mettre à jour dynamiquement l’interface utilisateur.
Diagramme de l'architecture
Schéma de l’architecture logicielle (cliquer pour agrandir).
″Santé″ : {
   ″ecartHF″ : 0.17 ,
   ″metier″ : {
      ″Infirmier Hospitalier″ : {
        ″CP″ : ″330″ ,
        ″base″ : 2800 ,
        ″femme″ : 2700 ,
        ″homme″ : 2900
     },
      ″Aide-Soignante″ : {
        ″CP″ : ″330″ ,
        ″base″ : 2500 ,
        ″femme″ : 2450 ,
        ″homme″ : 2600
      },
           ″Kinesitherapeute″ : {
        ″CP″ : ″330″ ,
        ″base″ : 3100 ,
        ″femme″ : 3000 ,
        ″homme″ : 3200
      }, etc.
   }
}

Le défi majeur a été l’harmonisation entre le traitement des données en PHP et leur affichage côté Front-end. Nous avons travaillé sur la gestion des CORS (Cross-Origin Resource Sharing) pour autoriser les requêtes entre les différents environnements et assurer un flux de données sécurisé et rapide.

Ce que ce projet m'a appris

  • Coordination Front/Back sous pression : Participer à un Hackathon de 72h m’a appris à gérer l’intégration du Front avec une logique backend complexe en PHP. J’ai dû assurer la fluidité du flux de données (JSON) et résoudre les problématiques de CORS pour permettre une communication sécurisée entre les environnements.
  • Git Flow et collaboration intensive : Travailler en équipe multidisciplinaire sur un sprint aussi court a nécessité une gestion rigoureuse des branches. J’ai consolidé ma maîtrise de Git pour éviter les conflits de fusion et maintenir une base de code stable malgré l’urgence.
  • Design d’impact et UX temporelle : Ce projet m’a fait découvrir comment transformer une donnée macro-économique abstraite en une expérience utilisateur percutante. Le développement du compteur hybride (rebours/temps écoulé) m’a appris à utiliser le code comme un outil de data visualisation au service de l'expérience utilisateur.
  • Vulgarisation technique et structuration : En tant que porteuse de projet, j’ai appris à traduire des enjeux financiers complexes en fonctionnalités techniques claires, tout en veillant à ce que l’interface reste pédagogique et accessible à toutes.

Réflexion sur l’agilité

L’expérience du Hackathon a été un véritable catalyseur pour mon autonomie technique. J’ai appris à prioriser les fonctionnalités pour livrer un MVP (Produit Minimum Viable) fonctionnel, tout en documentant précisément l’architecture pour permettre de futures évolutions hors mode "sprint".

Crédits 💖

Ce projet est le fruit d'une collaboration avec :

Ce projet vous a plu ?

Je suis actuellement à la recherche de nouvelles opportunités. Discutons ensemble de vos besoins en développement web et accessibilité.

Me contacter