- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 💻 Youtube tutorial
- 🤸 Quick Start
- 🚀 Deploy
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.
💎 Next.js
💎 Supabase
💎 Typescript
💎 Tailwind
💎 Shadcn
💎 Thingsboard.
💎 Spline
👉 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.
See tutorial video here
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.
See Online here