Test candidat - Développeur front

Dashboard UI – Pilotage visuel (JSON → Interface)

Objectif du test

Évaluer la capacité à :

• structurer un frontend propre et modulaire,

• transformer une source JSON en interface lisible,

• gérer des états visuels (UI state),

• concevoir une UX claire et maintenable,

• produire un code lisible, organisé et évolutif.

⚠️ Aucune logique métier n’est attendue.
Le backend est considéré comme source de vérité.

Temps recommandé

• 1h30 à 2h

• Aucun environnement spécifique requis

• Test réalisable localement

Sujet : Tableau de supervision de pièces

Contexte

Une plateforme de supervision affiche l’état de plusieurs pièces d’un bâtiment.

Les états sont calculés côté backend et transmis au frontend via un JSON.

Le rôle du frontend est uniquement :

• afficher les informations,

• traduire les états en codes visuels cohérents,

• proposer une navigation claire.

Données fournies

Fichier rooms.json :

[
  {
    "id": "room_1",
    "name": "Salle de réunion",
    "temperature": 19.5,
    "setpoint": 21,
    "mode": "comfort",
    "heating": "on",
    "status": "warning"
  },
  {
    "id": "room_2",
    "name": "Bureau direction",
    "temperature": 22.1,
    "setpoint": 20,
    "mode": "eco",
    "heating": "off",
    "status": "ok"
  },
  {
    "id": "room_3",
    "name": "Open space",
    "temperature": 18.2,
    "setpoint": 19,
    "mode": "off",
    "heating": "off",
    "status": "error"
  }
]

Règles UI / UX (aucun calcul métier)

Le frontend doit uniquement interpréter visuellement les champs :

status

heating

mode

Affichage sous forme de badge :

• comfort

• eco

• off

Fonctionnalités attendues

Chargement des données

• Chargement du fichier rooms.json

• Aucune API distante

• Le JSON est immuable (pas de modification persistée)

Affichage UI

Afficher une liste ou grille de cartes, une par pièce, contenant :

• Nom de la pièce

• Température

• Consigne

• Mode

• État chauffage

• Statut global (via couleur / indicateur)

Interactions UI (sans logique métier)

Pour chaque carte :

• Possibilité de plier / déplier les détails

• Bouton “Focus” (mise en avant visuelle)

• Filtrage global :

  • par statut (ok / warning / error)

  • par mode

  
  

Ces actions sont 100 % UI state.

Expérience utilisateur

• États clairs

• Feedback visuel immédiat

• Pas de rechargement de page

• Code UI réutilisable

Contraintes techniques obligatoires

• JavaScript ES6+

• HTML / CSS

• Aucun framework (Vanilla JS)

• Aucun calcul métier

• Aucun backend

Recommandées

• Séparation :

  • data loading

  • rendering

  • interactions

  
  

• Fonctions pures pour :

  • mapping état → classe CSS

  
  

• Composants UI réutilisables

Interdit

• Logique métier déguisée

• Manipulation directe du JSON source

• Code non structuré

Bonus (facultatif)

• Thème clair / sombre

• Animation légère (transition, hover)

• Responsive mobile

• Design system minimal (variables CSS)

• Accessibilité (ARIA, contrastes)

Pourquoi ce test chez Ecologik Solutions

Ce test reflète :

• nos dashboards de supervision,

• notre logique backend → frontend,

• notre exigence de code maintenable,

• notre besoin de clarté visuelle.

Ce test nous permet : 

• d'évaluer l'approche, 
• de déclencher des questionnements
• de mieux comprendre l'enjeu du poste.