Projet Dev.(io) >>

Développeur web & mobile

Projet : Karroad

Création de site extranet avec React

Objectif : faciliter la visualisation des données récoltées.

Karroad est une start-up qui vise à aider les collectivités et groupes privés à analyser efficacement leurs flux de circulation. Cela peut aller du nombre de véhicules sur une entrée d'autoroute au nombre de passants. Pour ce faire, ils utilisent l'IA (intelligence artificielle) couplée à une caméra.


Cahier des charges :


  • Utilisation de D3JS pour la datavisualisation,

  • Création au minimum d'un heatmap et d'un barchart,

  • Possibilité de filtrer les données,

  • Géolocalisation des périphériques avec Open Street Map,

  • Sélection du dashboard via un menu déroulant dynamique,

  • Format des données reçues : .csv,

  • Accès différencié : Administrateur / Client.


L'environnement de travail

Stack MERN

Front-End : Le framework D3JS nous étant imposé, nous avons choisi de réaliser cette interface avec le framework ReactJS afin de profiter de la souplesse de Javascript, la réactivité du DOM virtuel et la gestion du cycle de vie. Nous avons utilisé Semantic UI pour une ergonomie responsive et accès UX.

Back-End : Grâce au serveur NodeJS et au framework ExpressJS, nous nous assurons de profiter des qualités de Javascript de bout en bout. La couche Passport JS nous permettra de gérer l'authentification des utilisateurs. Enfin, MongoDB sera le parfait allié sur la partie "base de données".

Dashboard client

Ergonomie & UX


Pour faciliter la prise en main de l'interface, seules les informations essentielles sont affichées :

  • Header : Accès rapide au support, règlages et logout,

  • BreadCrumb : Identifie le compte client et sa position,

  • Sidebar : Un seul élément du menu est accessible et actif,

  • Statistiques générales : Affichage du nombre de périphériques et de la date de fin de contrat (ces données sont issues de la base de données),

  • Localisation des périphériques du client (affichage dynamique fonction de la base de données),

  • Menu déroulant : Sélection du périphérique dont on veut voir les données.

A savoir :

Toutes les données liées au client et à ses périphériques sont récupérées et affichées de façon dynamique. Cela signifie qu'elles proviennent de la base de données. Ainsi, il suffit d'ajouter ou de modifier un périphérique une seule fois pour que l'ajout ou le changement se répercute sur tous les dashboards.


Datavisualisation avec D3JS

Dashboard périphérique


Les données liées au périphérique sont issues d'un fichier CSV uploadé automatiquement toutes les dix minutes. La sidebar s'est enrichie afin de permettre l'accès au téléchargement du fichier CSV complet, aux photos du périphérique en situation, aux alertes et graphiques personnalisés.

Espace administrateur


Interface permettant aux administrateurs de créer des comptes clients, de créer des périphériques et de les rattacher à un client, de visualiser les données générales telles que les dates de fin de fin de contrat...

Attention : Les noms et données réelles des clients de cette start-up étant confidentielles, les informations affichées sur ces captures écran (nom des clients, localisaitons, données...) sont fictives.