Ce projet est une interface de tableau de bord pour le suivi de plusieurs valeurs de capteurs (température en Celsius, qualité de l'air, nombre de personnes). Ces valeurs sont fournies par un backend Python via le protocole MQTT. L'interface utilisateur est construite avec le framework Next.js.
- Écoute des données de capteurs à partir des sujets MQTT
- Affichage en temps réel des valeurs de capteur dans le tableau de bord
- Connexion persistante à un broker MQTT HiveMQ à travers l'application
- Graphique des données venant du broker MQTT
Ce projet utilise les bibliothèques suivantes :
- Next.js
- MQTT.js
- React 18.2.0
- Recharts
- react-use
- lucide-react
- Tailwind Merge
- Clsx
- @radix-ui/react-slot
- @radix-ui/react-tabs
- @radix-ui/react-toast
- Sharp
- next-themes
- Clonez ce dépôt :
git clone https://github.com/synnksou/next-mqtt-dashboard- Naviguez vers le dossier du projet :
cd next-mqtt-dashboard- Installez les dépendances :
yarn- Lancez le serveur de développement :
yarn devNaviguez vers localhost:3000 dans votre navigateur pour voir l'application en action.
Les pull requests sont les bienvenues. Pour les changements majeurs, veuillez ouvrir une issue pour discuter de ce que vous aimeriez changer.