⚡ IoT Dashboard

Real-time IoT device monitoring, telemetry visualization, and remote hardware control — built with React & TypeScript.

🔴 Live Demo

Resource	URL
Dashboard	io-t-dashboard-development-using-re.vercel.app
Simulator	Hosted on Render (background service)
Auth Provider	Supabase (managed)
IoT Platform	Anedya Cloud — AP-IN-1 Region

Register an account on the live site to explore the full dashboard. The simulator on Render continuously pushes temperature & humidity data so charts are always populated.

📸 Preview

Dashboard — Real-time telemetry cards, relay control, and historical sensor trends.

┌──────────────────────────────────────────────────────────────────┐
│  ⚡ IoT Admin         │  IoT Device Overview                    │
│                        │                                         │
│  ▸ Overview            │  ┌─────────────┐  ┌─────────────┐      │
│  ▸ User Management     │  │ 🌡 26.4°C   │  │ 💧 58.2%    │      │
│                        │  │ Temperature  │  │ Humidity     │      │
│  ───────────           │  └─────────────┘  └─────────────┘      │
│  User: admin@...       │                                         │
│  ● admin               │  ┌─────────────────────────────────┐   │
│                        │  │ ⚡ Remote Relay Control          │   │
│  [Sign Out]            │  │  ○ ────── ON                    │   │
│                        │  └─────────────────────────────────┘   │
│                        │                                         │
│                        │  ┌─────────────────────────────────┐   │
│                        │  │ 📈 Historical Telemetry          │   │
│                        │  │  ╱╲  ╱╲  ╱╲                    │   │
│                        │  │ ╱  ╲╱  ╲╱  ╲  Temperature     │   │
│                        │  │ ─── Humidity                    │   │
│                        │  └─────────────────────────────────┘   │
└──────────────────────────────────────────────────────────────────┘

⚡ Quick Start

# 1. Clone the repository
git clone https://github.com/Ayush-Kumar0207/IoT-Dashboard-Development-using-React.git
cd IoT-Dashboard-Development-using-React

# 2. Install dependencies
npm install

# 3. Create your environment file
cp .env.example .env.local
# → Fill in your Supabase & Anedya credentials (see Environment Variables below)

# 4. Run the Supabase SQL setup
# → Execute supabase_setup.sql in your Supabase SQL Editor

# 5. Start the development server
npm run dev
# → Open http://localhost:5173

🧠 About the Project

Modern IoT deployments demand dashboards that are more than static data tables. IoT Dashboard bridges the gap between raw sensor telemetry and actionable insight by providing:

Live sensor feeds — Temperature and humidity values streamed every 5 seconds from hardware via the Anedya IoT Cloud platform.
Remote hardware control — Toggle physical relays directly from the browser with role-based permission gates.
Historical trend analysis — Interactive time-series charts powered by Recharts, auto-refreshing every 15 seconds.
Enterprise-grade access control — Three-tier RBAC (Admin → Operator → Viewer) backed by Supabase Row Level Security, with real-time role sync across sessions.

Whether you're building a smart home prototype, an industrial monitoring console, or a classroom IoT lab, this project provides a production-ready foundation with clean architecture and modern tooling.

✨ Features

Real-Time Monitoring

🌡️ Live Temperature & Humidity — Polled every 5 seconds from the Anedya Cloud API
🟢 Device Online/Offline Detection — Heartbeat + fallback telemetry timestamp check (3-minute window)
📊 Historical Trend Charts — Last 1 hour of sensor data rendered as interactive line charts (Recharts)
🔄 Auto-Refresh — Dashboard data refreshes automatically with configurable intervals

Device Control

⚡ Remote Relay Toggle — Send ON/OFF commands to physical hardware from the browser
🔐 Permission-Gated Controls — Only Admins and Operators can toggle the relay; Viewers see a clear access-restricted notice
⏱️ Command Expiry — Relay commands auto-expire after 30 seconds for safety

Authentication & Authorization

🔑 Email/Password Authentication — Powered by Supabase Auth
🛡️ Three-Tier RBAC — ADMIN · OPERATOR · VIEWER roles enforced at UI and database levels
📡 Real-Time Role Sync — Role changes by an Admin are instantly reflected in all user sessions via Supabase Realtime channels
🗄️ Row Level Security — PostgreSQL RLS policies ensure data integrity at the database layer

Admin Panel

👥 User Management Table — View all registered users with role badges and join dates
🔄 Instant Role Updates — Optimistic UI updates with automatic rollback on failure
🚫 Self-Protection — Admins cannot modify their own role from the management panel

User Experience

📱 Fully Responsive — Desktop sidebar + mobile sheet navigation
⚡ Skeleton Loading States — Smooth loading indicators across all data-driven components
🔔 Toast Notifications — Success/error feedback for every user action
🎨 Dark Mode Ready — CSS variables configured for light and dark themes

🏗 Tech Stack

Layer	Technology	Purpose
Frontend	React 19, TypeScript 5.9	Component architecture & type safety
Build Tool	Vite 8	Lightning-fast HMR & optimized builds
Styling	TailwindCSS 3.4, Radix UI	Utility-first CSS + accessible primitives
State Management	Zustand 5	Lightweight global auth state
Data Fetching	TanStack React Query 5	Server state, caching, polling
Charts	Recharts 3	Responsive, interactive data visualizations
Routing	React Router 7	SPA navigation with route guards
Auth & Database	Supabase (PostgreSQL)	Authentication, RLS, Realtime subscriptions
IoT Platform	Anedya Cloud (AP-IN-1)	Device telemetry, commands, health status
Deployment	Vercel (Dashboard), Render (Simulator)	Edge-optimized frontend + always-on backend
Icons	Lucide React	Consistent, lightweight icon set

🏛 Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         BROWSER                                 │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  React App (Vite + TypeScript)                            │  │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────────────────┐    │  │
│  │  │ Zustand   │  │ TanStack │  │ React Router         │    │  │
│  │  │ AuthStore │  │ Query    │  │ ProtectedRoute       │    │  │
│  │  │           │  │ Hooks    │  │ RoleRoute             │    │  │
│  │  └─────┬─────┘  └─────┬────┘  └──────────────────────┘    │  │
│  │        │              │                                    │  │
│  └────────┼──────────────┼────────────────────────────────────┘  │
│           │              │                                       │
└───────────┼──────────────┼───────────────────────────────────────┘
            │              │
            ▼              ▼
  ┌──────────────┐   ┌─────────────────┐
  │  Supabase    │   │  Anedya Cloud   │
  │  ──────────  │   │  ─────────────  │
  │  • Auth      │   │  • /data/latest │
  │  • Profiles  │   │  • /data/getData│
  │  • RLS       │   │  • /commands    │
  │  • Realtime  │   │  • /health      │
  └──────────────┘   └────────┬────────┘
                              │
                     ┌────────▼────────┐
                     │  IoT Hardware   │
                     │  (or Simulator  │
                     │   on Render)    │
                     └─────────────────┘

Data Flow:

The Simulator (hosted on Render) pushes temperature & humidity data to the Anedya Cloud via its REST API.
The React dashboard polls the Anedya Cloud API at configurable intervals (5s telemetry, 10s status, 15s charts).
Supabase handles user authentication and stores profile/role data with RLS enforcement.
Supabase Realtime channels ensure role changes propagate instantly to all connected browser sessions.

📂 Project Structure

IoT-Dashboard-Development-using-React/
├── public/                          # Static assets
├── src/
│   ├── components/
│   │   ├── auth/
│   │   │   ├── ProtectedRoute.tsx   # Auth guard — redirects unauthenticated users
│   │   │   └── RoleRoute.tsx        # RBAC guard — restricts by user role
│   │   ├── dashboard/
│   │   │   ├── HistoricalChart.tsx   # Recharts line chart (temperature + humidity)
│   │   │   ├── RelayControl.tsx     # ON/OFF toggle with permission gating
│   │   │   └── TelemetryCards.tsx   # Live temperature & humidity cards
│   │   ├── layout/
│   │   │   └── DashboardLayout.tsx  # Sidebar + mobile sheet + outlet
│   │   └── ui/                      # Radix-based design system (14 components)
│   ├── hooks/
│   │   ├── useIoTData.ts            # TanStack Query hooks for Anedya API
│   │   ├── useAdminUsers.ts         # User management hooks with optimistic updates
│   │   └── use-toast.ts             # Toast notification hook
│   ├── lib/
│   │   ├── supabase.ts              # Supabase client initialization
│   │   └── utils.ts                 # Utility functions (cn helper)
│   ├── pages/
│   │   ├── Dashboard.tsx            # Main monitoring view
│   │   ├── Admin.tsx                # User management panel (Admin only)
│   │   ├── Login.tsx                # Email/password login
│   │   └── Register.tsx             # Account registration
│   ├── services/
│   │   ├── anedya.ts                # Anedya Cloud API client (telemetry, commands, health)
│   │   └── admin.ts                 # Supabase admin operations (fetch users, update roles)
│   ├── store/
│   │   └── useAuthStore.ts          # Zustand auth + realtime profile sync
│   ├── types/
│   │   └── auth.ts                  # TypeScript types (UserRole, UserProfile)
│   ├── App.tsx                      # Root component with routing
│   ├── main.tsx                     # Entry point
│   ├── index.css                    # Tailwind directives + CSS variables
│   └── App.css                      # Additional styles
├── supabase_setup.sql               # Database schema, RLS policies, triggers
├── vite.config.ts                   # Vite configuration with path aliases
├── tailwind.config.cjs              # Tailwind theme extension
├── vercel.json                      # SPA rewrite rules for Vercel
├── tsconfig.json                    # TypeScript configuration
└── package.json                     # Dependencies & scripts

⚙️ Environment Variables

Create a .env.local file in the project root:

# ── Supabase ──────────────────────────────────────────
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

# ── Anedya IoT Cloud ──────────────────────────────────
VITE_ANEDYA_API_KEY=your-anedya-project-access-token
VITE_ANEDYA_NODE_ID=your-device-node-id

Variable	Description
`VITE_SUPABASE_URL`	Your Supabase project URL (found in Project Settings → API)
`VITE_SUPABASE_ANON_KEY`	Supabase anonymous/public key for client-side access
`VITE_ANEDYA_API_KEY`	Anedya project access token (Bearer auth for API calls)
`VITE_ANEDYA_NODE_ID`	UUID of the IoT device node registered in your Anedya project

🧪 Usage

Dashboard View

Once logged in, the dashboard displays:

Device Status — Green pulsing indicator when the device (or simulator) is online
Telemetry Cards — Temperature (°C) and Humidity (%) with color-coded thresholds
Relay Control — Toggle switch to send ON/OFF commands (requires Operator or Admin role)
Historical Chart — Line chart showing the last hour of sensor data with auto-refresh

Admin Panel

Navigate to /admin (visible only to Admin users):

View all registered users in a sortable table
Change any user's role between ADMIN, OPERATOR, and VIEWER via dropdown
Role changes take effect immediately across all sessions (Supabase Realtime)

Role Permissions

Capability	Admin	Operator	Viewer
View Dashboard	✅	✅	✅
View Telemetry	✅	✅	✅
Control Relay	✅	✅	❌
Manage Users	✅	❌	❌

🚀 Deployment

Vercel (Frontend)

The dashboard is deployed on Vercel with SPA rewrites configured in vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Steps:

Push your repository to GitHub
Import the project in Vercel
Add environment variables (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, VITE_ANEDYA_API_KEY, VITE_ANEDYA_NODE_ID)
Vercel auto-detects Vite and deploys

Render (Simulator)

The simulator.js background service runs on Render as a Background Worker that continuously pushes telemetry data to the Anedya Cloud API — keeping the dashboard populated with live data 24/7.

Supabase (Database)

Create a new Supabase project
Navigate to the SQL Editor
Paste and execute supabase_setup.sql — this creates the profiles table, RLS policies, triggers, and backfills existing users
Enable Realtime on the profiles table (Database → Replication → Enable for profiles)

🔒 Security

Row Level Security (RLS) — All database access is governed by PostgreSQL RLS policies. Users can only read their own profile; only Admins can update other users' roles.
SECURITY DEFINER Functions — The handle_new_user() trigger function runs with elevated privileges to auto-create profiles on signup.
Environment Variables — All secrets are stored in .env.local and never committed to version control.
Bearer Token Auth — Anedya API calls use project access tokens transmitted via Authorization headers.
Command Expiry — Relay commands expire after 30 seconds, preventing stale commands from executing on devices.

🗺 Roadmap

🌙 Dark mode toggle in the UI
📊 Multi-device support (manage multiple nodes from one dashboard)
📈 Customizable time range selectors for historical charts
🔔 Alert thresholds with email/push notifications
📱 PWA support for mobile installation
🧪 Unit & integration tests (Vitest + Testing Library)
📋 Audit log for admin actions
🌐 Multi-language (i18n) support

🤝 Contributing

Contributions make the open-source community thrive. Any contributions you make are greatly appreciated.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Please follow Conventional Commits for commit messages.

❓ FAQ

How does the dashboard get data without a real IoT device?

A simulator.js service runs on Render and pushes randomized temperature & humidity values to the Anedya Cloud at regular intervals. The dashboard polls this data exactly like it would from real hardware.

Can I connect a real sensor instead of the simulator?

Yes. Any device (ESP32, Arduino, Raspberry Pi) that can send HTTP POST requests to the Anedya API with the correct NODE_ID and API_KEY will work seamlessly. The dashboard is hardware-agnostic.

Why do I see "OFFLINE" even though the simulator is running?

The dashboard considers a device online if telemetry data was received in the last 3 minutes. If the Render service is sleeping (free tier cold start), it may take a moment to wake up and push data.

How do I become an Admin?

The first user registers as a VIEWER by default. To promote yourself to Admin, run the following in the Supabase SQL Editor:

UPDATE public.profiles SET role = 'ADMIN' WHERE email = 'your@email.com';

📜 License

Distributed under the MIT License. See LICENSE for more information.

👨‍💻 Author

_{Ayush Kumar}
📧 Email · 🐙 GitHub

🌟 Support

If this project helped you or you found it interesting:

⭐ Star this repository — it helps others discover the project
🐛 Report bugs via Issues
💡 Suggest features via Discussions
🔀 Fork & contribute — PRs are always welcome

Built with ❤️ using React, Supabase & Anedya IoT Cloud

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
supabase_setup.sql		supabase_setup.sql
tailwind.config.cjs		tailwind.config.cjs
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

⚡ IoT Dashboard

🔴 Live Demo

📸 Preview

⚡ Quick Start

📖 Table of Contents

🧠 About the Project

✨ Features

Real-Time Monitoring

Device Control

Authentication & Authorization

Admin Panel

User Experience

🏗 Tech Stack

🏛 Architecture

📂 Project Structure

⚙️ Environment Variables

🧪 Usage

Dashboard View

Admin Panel

Role Permissions

🚀 Deployment

Vercel (Frontend)

Render (Simulator)

Supabase (Database)

🔒 Security

🗺 Roadmap

🤝 Contributing

❓ FAQ

📜 License

👨‍💻 Author

🌟 Support

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages