Develop a dashboard that receives sensor data through the MQTT protocol, stores the data in a cloud database (Supabase / Firebase), retrieves the stored records using a web application, and displays the sensor readings on a web dashboard.

MQTT_IOT_Project/
│
├── sensor.py
├── subscriber.py
├── dashboard.py
└── requirements.txt

pip install paho-mqtt requests streamlit pandas
pip install streamlit-autorefresh

Open Supabase Dashboard.
Open your project.
Go to SQL Editor → New Query.
Execute the following SQL:

CREATE TABLE sensor_data (
    id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
    temperature FLOAT,
    humidity FLOAT,
    created_at TIMESTAMPTZ DEFAULT NOW()
);

sensor.py


import paho.mqtt.client as mqtt
import random
import time
import json

# MQTT Broker details
broker = "broker.hivemq.com"
port = 1883
topic = "mca/iot/demo/temp_humidity_2026"

# Create MQTT client
client = mqtt.Client(
    mqtt.CallbackAPIVersion.VERSION2
)

# Connect to broker
client.connect(broker, port, 60)

print("MQTT Sensor Started")

while True:

    # Generate sensor readings
    temperature = round(random.uniform(25, 35), 2)
    humidity = round(random.uniform(50, 80), 2)

    # Prepare data
    data = {
        "temperature": temperature,
        "humidity": humidity
    }

    # Convert dictionary into JSON
    message = json.dumps(data)

    # Publish message
    client.publish(topic, message)

    print("Published:", message)

    # Wait for 5 seconds
    time.sleep(5)


subscriber.py


import paho.mqtt.client as mqtt
import requests
import json

# MQTT details
broker = "broker.hivemq.com"
port = 1883
topic = "mca/iot/demo/temp_humidity_2026"

# Supabase details
URL = "YOUR_SUPABASE_URL/rest/v1/sensor_data"
API_KEY = "YOUR_SUPABASE_PUBLISHABLE_KEY"

headers = {
    "apikey": API_KEY,
    "Authorization": "Bearer " + API_KEY,
    "Content-Type": "application/json",
    "Prefer": "return=minimal"
}

# When connected to broker
def on_connect(client, userdata, flags, reason_code, properties):
    print("Connected to MQTT Broker")
    client.subscribe(topic)

# When message is received
def on_message(client, userdata, msg):

    # Convert received JSON into Python dictionary
    data = json.loads(msg.payload.decode())

    print("Received:", data)

    # Store data in Supabase
    response = requests.post(
        URL,
        headers=headers,
        json=data,
        timeout=10
    )

    if response.status_code in [200, 201]:
        print("Data stored in Supabase")
    else:
        print("Database Error:", response.text)

# Create MQTT client
client = mqtt.Client(
    mqtt.CallbackAPIVersion.VERSION2
)

client.on_connect = on_connect
client.on_message = on_message

# Connect to broker
client.connect(broker, port, 60)

print("Waiting for sensor data...")

# Continuously receive messages
client.loop_forever()


dashboard.py



import streamlit as st
import pandas as pd
import requests
from streamlit_autorefresh import st_autorefresh

# Dashboard title
st.title("IoT MQTT Sensor Dashboard")

# Automatic refresh every 5 seconds
st_autorefresh(
    interval=5000,
    key="sensor_refresh"
)

# Supabase details
URL = "YOUR_SUPABASE_URL/rest/v1/sensor_data"
API_KEY = "YOUR_SUPABASE_PUBLISHABLE_KEY"

headers = {
    "apikey": API_KEY,
    "Authorization": "Bearer " + API_KEY
}

# Retrieve data from Supabase
response = requests.get(
    URL,
    headers=headers,
    params={
        "select": "*",
        "order": "created_at.desc",
        "limit": "100"
    }
)

if response.status_code == 200:

    df = pd.DataFrame(response.json())

    if not df.empty:

        # Latest sensor readings
        latest = df.iloc[0]

        st.subheader("Current Sensor Readings")

        col1, col2 = st.columns(2)

        col1.metric(
            "Temperature",
            str(latest["temperature"]) + " °C"
        )

        col2.metric(
            "Humidity",
            str(latest["humidity"]) + " %"
        )

        # Display records
        st.subheader("Sensor Data History")
        st.dataframe(df)

        # Temperature graph
        st.subheader("Temperature Graph")

        st.line_chart(
            df.sort_values("created_at").set_index("created_at")[
                ["temperature"]
            ]
        )

        # Humidity graph
        st.subheader("Humidity Graph")

        st.line_chart(
            df.sort_values("created_at").set_index("created_at")[
                ["humidity"]
            ]
        )

    else:
        st.warning("No sensor data available.")

else:
    st.error("Unable to retrieve data from Supabase.")

