💻 IoT Dashboard Weather Station

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 💻 Youtube tutorial
5. 🤸 Quick Start
6. 🚀 Deploy

🤖 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 here

🤸 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:

• Git
• Node.js
• npm (Node Package Manager)

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