Du matériel au tableau de bord
Je voulais explorer tout le parcours d’un projet IoT : de l’acquisition des données de capteurs à leur visualisation dans le navigateur.
Ce projet a été ma première immersion complète dans l’IoT, en travaillant avec des cartes ESP32 et divers capteurs (température, humidité, luminosité, etc.).
Côté matériel, j’ai appris à gérer les modes basse consommation pour prolonger l’autonomie de la batterie et à envoyer les données périodiquement via Wi-Fi.
Côté logiciel, j’ai construit un tableau de bord responsive pour afficher ces données de manière attrayante et interactive.
Bien que mon parcours soit davantage orienté web, j’ai saisi cette opportunité pour relier matériel, API et interface utilisateur dans un système cohérent.
Pourquoi ce projet ?
Je voulais quelque chose de pratique et visuellement engageant pour mon portfolio, tout en étant suffisamment technique pour explorer :
- Les contraintes bas niveau (batterie, connectivité)
- La conception d’API backend pour données IoT
- La gestion d’état et le routage front-end modernes
- La visualisation de données en temps réel et historiques
Aspects clés
- Communication des dispositifs : Les appareils ESP32 envoient des mesures périodiques à l’API backend.
- Optimisation de la batterie : Cycles de veille et utilisation optimisée du Wi-Fi pour prolonger l’autonomie.
- Stockage et accès aux données : Logique côté serveur pour stocker et récupérer efficacement les données temporelles.
- Interface du tableau de bord : Plusieurs types de graphiques pour différentes mesures (courbes, jauges de batterie, histogrammes pour la luminosité, etc.).
Fonctionnalités
- Graphiques en temps réel et historiques pour température, humidité, niveaux de luminosité, etc.
- Indicateurs de niveau de batterie pour chaque appareil.
- Interface de tableau de bord entièrement responsive construite avec Tailwind + DaisyUI.
Bibliothèques / technologies utilisées
- Frontend : React 19, TanStack Router/Query/Form, ApexCharts, Tailwind CSS, DaisyUI, i18next, Zod
- Backend : API NestJS pour la communication des appareils et le stockage des données
- CI/CD & hébergement : GitHub Actions, Coolify
- Matériel : Microcontrôleurs ESP32 + divers capteurs environnementaux