Dashboard IoT - Surveillance de capteurs connectes en temps reel
Application web full-stack avec globe 3D interactif pour monitorer un reseau mondial de capteurs IoT, incluant alertes intelligentes, graphiques dynamiques et panneau d'administration complet.
Description
P.E.IoT Dashboard est une application web full-stack concue pour surveiller en temps reel un reseau de capteurs connectes repartis dans des maisons intelligentes a travers le monde. Le projet repond au besoin de centraliser et visualiser les donnees de capteurs IoT (temperature, humidite, pollution) dans une interface intuitive et visuellement riche.
Developpe dans le cadre du cours CREaTE 2025 en equipe de deux, ce dashboard se distingue par son globe 3D interactif qui permet de naviguer geographiquement dans le reseau de capteurs. L'utilisateur peut survoler un pays pour voir ses statistiques, cliquer pour filtrer toutes les donnees, et explorer les mesures en profondeur.
L'application combine un backend RESTful robuste avec une interface React moderne, offrant a la fois un tableau de bord analytique riche en widgets et un panneau d'administration complet avec CRUD, filtres et export CSV.
Fonctionnalites principales
- Globe 3D interactif avec navigation geographique, tooltips par pays et filtrage par clic
- 9 widgets specialises : KPIs, graphiques d'evolution, alertes, meteo, sante du parc, repartition par piece
- Systeme d'alertes intelligentes avec 3 niveaux de severite et seuils configurables (temperature, humidite, pollution)
- Panneau d'administration complet avec CRUD sur les utilisateurs, capteurs et mesures
- Export CSV en un clic pour toutes les entites
- Widget meteo en temps reel via l'API OpenMeteo
- Design responsive adapte desktop, tablette et mobile
Stack technique
| Categorie | Technologies |
|---|---|
| Frontend | React 19, Vite 7, React Router, Recharts, react-globe.gl, Three.js |
| Backend | Node.js, Express 5, Mongoose 9 |
| Base de donnees | MongoDB Atlas |
| Documentation | Storybook 10 |
| API externes | OpenMeteo (meteo), REST Countries, Electricity Maps |
| Outils | Axios, Nodemon, dotenv |
Architecture
Client (React + Vite) Serveur (Express) Base de donnees
+---------------------+ +-------------------+ +-----------+
| | | | | |
| Pages | | Routes API | | MongoDB |
| - Dashboard | <---> | /api/users | <--> | Atlas |
| - Admin | HTTP | /api/sensors | | |
| | | /api/measures | | Users |
| Widgets (9+) | | /api/export/* | | Sensors |
| - HeroGlobe (3D) | | | | Measures |
| - StatsCard | | Modeles Mongoose | | |
| - Charts (Recharts)| | - User | | |
| - AlertsWidget | | - Sensor | | |
| - WeatherWidget | | - Measure | | |
| | | | | |
| Context | +-------------------+ +-----------+
| - CountryFilter |
| | +-------------------+
| Services | | APIs externes |
| - api.js (Axios) | ----> | OpenMeteo |
+---------------------+ +-------------------+
Defis et apprentissages
- Integration du globe 3D avec react-globe.gl et Three.js : gestion du responsive, ajustement dynamique de l'altitude de la camera selon la taille de l'ecran, et optimisation des performances de rendu WebGL
- Mise en place d'un systeme de filtrage global par pays via React Context, permettant a tous les widgets de reagir simultanement a la selection geographique sur le globe
- Conception d'un systeme d'alertes intelligentes avec calcul de seuils multi-capteurs et classification automatique en 3 niveaux de severite
- Structuration d'une API RESTful avec Express 5 et Mongoose 9, incluant des pipelines d'aggregation MongoDB pour les statistiques et le seeding de donnees depuis des fichiers JSON