https://github.com/viniciuscestarii/mqtt-demo
Full stack app for temperature sensor data visualization using MQTT, PostgreSQL, and Next.js.
https://github.com/viniciuscestarii/mqtt-demo
echarts mqtt nextjs postgresql react tawilwindcss
Last synced: about 2 months ago
JSON representation
Full stack app for temperature sensor data visualization using MQTT, PostgreSQL, and Next.js.
- Host: GitHub
- URL: https://github.com/viniciuscestarii/mqtt-demo
- Owner: ViniciusCestarii
- License: mit
- Created: 2025-06-19T23:14:26.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-19T23:43:49.000Z (12 months ago)
- Last Synced: 2025-06-20T00:31:37.529Z (12 months ago)
- Topics: echarts, mqtt, nextjs, postgresql, react, tawilwindcss
- Language: TypeScript
- Homepage:
- Size: 77.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MQTT Temperature Demo
This project demonstrates a full-stack application for collecting, storing, and visualizing temperature sensor data using MQTT, PostgreSQL, and Next.js.
## Project Structure
```
mqtt-demo/
├── mqtt-client/ # Node.js MQTT client that ingests sensor data and stores it in PostgreSQL
└── web/ # Next.js web dashboard for live temperature visualization
```
---
## 1. MQTT Client
Located in [`mqtt-client/`](mqtt-client/):
- Connects to an MQTT broker
- Listens for messages on the `temperature-sensor/#` topic
- Parses temperature readings and inserts them into a PostgreSQL database
### Setup
1. Copy `.env.example` to `.env` and configure your environment variables:
```
cp mqtt-client/.env.example mqtt-client/.env
```
2. Install dependencies:
```
cd mqtt-client
npm install
```
3. Start the client:
```
npm start
```
---
## 2. Web Dashboard
Located in [`web/`](web/):
- Built with [Next.js](https://nextjs.org/)
- Fetches recent temperature readings from the database via an API route
- Displays a live-updating line chart
### Setup
1. Copy `.env.example` to `.env.local` and configure your PostgreSQL connection:
```
cp web/.env.example web/.env.local
```
2. Install dependencies:
```
cd web
npm install
```
3. Run the development server:
```
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
---
## Database
Both the client and web dashboard use PostgreSQL. The client will automatically create the `sensor_readings` table if it does not exist.
Table schema:
```sql
CREATE TABLE IF NOT EXISTS sensor_readings (
id SERIAL PRIMARY KEY,
temperature REAL NOT NULL,
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
);
```
---
## Environment Variables
See [`mqtt-client/.env.example`](mqtt-client/.env.example) and [`web/.env.example`](web/.env.example) for required variables.
---
## License
MIT