Decathlon Profiler

Conception et développement d'un outil de profilage sportif en moins de 2h.

Ce projet a été réalisé lors de la Nuit de l'Info, un défi national étudiant de développement web du coucher au lever du soleil.
Voir le code sur GitHub

Mon Rôle

Développeur Unique & Designer UI

L'Équipe

1 Développeur (Moi), 1 Chef de projet, 2 Créateurs de contenu

Stack Technique

HTML5, CSS3, JS Vanilla, Bootstrap 5

Le Défi : CTO de votre Santé

Le sujet de cette édition nous invitait à connecter l'informatique au sport pour prévenir les blessures.

L'objectif était de créer une interface permettant aux utilisateurs d'analyser leur pratique et d'obtenir des conseils posturaux adaptés. En tant que seul développeur de l'équipe, j'avais la charge de transformer les idées et contenus de mes camarades en un produit fonctionnel avant l'aube.

Objectifs atteints (Niveaux)

Niveau 1 : Profilage Sportif
Mise en place d'un algorithme de QCM pour déterminer le profil (A, B, C, D).

Niveau 2 : Instructions Personnalisées
Génération dynamique de conseils basés sur le résultat du test.

Niveau 3 : Visualisation
Intégration de schémas visuels pour illustrer les bonnes postures.

Design & Expérience Utilisateur

L'enjeu n'était pas seulement technique, mais aussi visuel. Il fallait respecter l'identité forte de Decathlon tout en guidant l'utilisateur de manière fluide.

Identité Visuelle

J'ai intégré les codes graphiques de la marque (le bleu iconique, la typographie Roboto Condensed) pour créer une expérience immersive. L'utilisation de Bootstrap 5 m'a permis de construire une grille responsive solide en un temps record.

Une UX sans friction

Le questionnaire a été conçu comme une "Single Page Application" simulée : les questions défilent sans rechargement de page pour garder l'utilisateur engagé, avant de le rediriger vers ses résultats personnalisés.

Architecture & Code

Contrainte de temps oblige, j'ai opté pour une architecture 100% statique (pas de base de données). Tout le "cerveau" de l'application réside dans le navigateur client via JavaScript.

Logique de Profilage (JS)

Plutôt que d'envoyer les réponses à un serveur, j'ai développé un algorithme en JS Vanilla qui stocke les points (A, B, C, D) en mémoire.

À la fin du quiz, le script calcule le profil dominant et génère une redirection avec ancre (ex: conseils.html#profil-c). La page de destination lit cette ancre pour n'afficher que le contenu pertinent pour l'utilisateur.

Cette approche "Low-Tech" garantit un site ultra-rapide et hébergeable n'importe où.

                    // Exemple simplifié de la logique de résultat
                    function showResult() {
                    // Calcul du profil majoritaire
                    let maxScore = 0;
                    let finalProfile = '';

                    for (const [profile, score] of Object.entries(scores)) {
                    if (score > maxScore) {
                    maxScore = score;
                    finalProfile = profile;
                    }
                    }

                    // Redirection vers la page conseils avec ancre
                    // L'ancre #profil-X permet d'activer le CSS :target
                    window.location.href =
                    `conseils.html#profil-${finalProfile}`;
                    }
                

Bilan de la Nuit

Ce projet a été une excellente épreuve de gestion du stress et de priorisation. En tant que seul développeur pour trois créatifs, j'ai dû :

Trancher rapidement sur les choix techniques (Pas de React/Vue, rester sur du JS pur pour aller vite).
Coordonner l'intégration des assets (textes et images) produits en temps réel par l'équipe.
Livrer un produit fini et sans bug critique avant la deadline.

Durée Dev

Niveaux Validés

100%

Autonomie Tech