logo Mirutec

Published

- 1 min read

- 563

Build a IoT Dashboard with Next js

shadcn thingsboard supabase nextjs dashboard
img of Build a IoT Dashboard with Next js

💻 IoT Dashboard Weather Station

🤖 Introduction

This project aims to develop a versatile IoT dashboard capable of handling sensor data in real-time. Using technologies like Next.js, TypeScript, Tailwind CSS, Shadcn, Supabase, and Thingsboard, we’re building a robust platform for monitoring and managing IoT devices.

⚙️ Tech Stack

  • 💎 Next.js
  • 💎 Supabase
  • 💎 Typescript
  • 💎 Tailwind
  • 💎 Shadcn
  • 💎 Thingsboard.
  • 💎 Spline

🔋 Features

  • 👉 User authentication using Supabase for secure access control.
  • 👉 Real-time display of sensor values on the homepage.
  • 👉 3D visualization of device operations for enhanced user experience.
  • 👉 Configuration section for managing device connections.
  • 👉 Fully responsive design for seamless access across devices.
  • 👉 Integration of Wokwi for simulating IoT ESP32 sensors.
  • 👉 Deployment on Vercel for easy accessibility.

💻 Youtube tutorial

See tutorial video:

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Cloning the Repository

   git clone https://github.com/rch-goldsnaker/weather-app
cd weather - app

Installation

Install the project dependencies using npm:

   npm install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

   # THINGSBOARD
TB_API_URL =
  TB_USERNAME =
  TB_PASSWORD =
  NEXT_PUBLIC_TB_WS_URL =

# SUPABASE
NEXT_PUBLIC_SUPABASE_URL =
  NEXT_PUBLIC_SUPABASE_ANON_KEY =

Running the Project

   npm run dev

Open http://localhost:3000 in your browser to view the project.

🚀 Deploy

See Online here

⌨️ Repository

See repository