# iot-ahmad/iot-saas-dashboard architecture

> Architecture diagram of the GitHub repository iot-ahmad/iot-saas-dashboard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/iot-ahmad/iot-saas-dashboard
- Repository: https://github.com/iot-ahmad/iot-saas-dashboard
- Video tour (about a minute): https://gitdiagram.com/iot-ahmad/iot-saas-dashboard/video

## Overview

IOT365 is a cloud IoT dashboard and developer community. Users authenticate, configure workspaces and a customizable device-control grid, then exchange commands and sensor updates with hardware over MQTT; cloud storage holds identity and configuration rather than the live message stream. The product also includes automation and monitoring views, circuit-design/project-publishing tools, and developer messaging. The workflow and integrations follow the README and sampled files; several feature modules were not sampled, so their internal wiring is left unspecified.

Main entry points: [`src/App.jsx`](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/App.jsx) (Application Router), [`src/hooks/useAuth.js`](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/hooks/useAuth.js) (Authentication), [`src/hooks/useMqtt.js`](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/hooks/useMqtt.js) (MQTT Connection), [`src/components/ProjectPublisher.jsx`](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectPublisher.jsx) (Project Publisher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dashboard["Dashboard & Control"]
  node_app["Application Router<br/>[App.jsx]"]
  node_authview["Sign-in Page<br/>[AuthPage.jsx]"]
  node_controller["Universal Controller"]
  node_mqtt["MQTT Connection<br/>[useMqtt.js]"]
  node_toolviews["Device &amp; Ops Views<br/>[ToolViews.jsx]"]
  node_simulator["Device Simulator<br/>[SimulatorView.jsx]"]
  node_automation["Automation Rules<br/>[ToolViews.jsx]"]
end

subgraph group_cloud["Cloud Services"]
  node_authhook["Authentication<br/>[useAuth.js]"]
  node_firebaseauth(("Firebase Auth"))
  node_firestore[("Cloud Firestore")]
  node_broker(("HiveMQ Broker"))
  node_firebase["Firebase Client<br/>[firebase.js]"]
end

subgraph group_community["Community Hub"]
  node_hubfeed["Project Feed<br/>[ProjectFeed.jsx]"]
  node_publisher["Project Publisher"]
  node_projectdetail["Project Details<br/>[ProjectDetail.jsx]"]
  node_messaging["Direct Messaging"]
  node_upload["Image Upload"]
end

subgraph group_tools["Design &amp; Guidance"]
  node_wiring["Circuit Builder<br/>[WiringBuilder.jsx]"]
  node_parts["Hardware Catalog"]
  node_guide["Developer Guide<br/>[DeveloperGuide.jsx]"]
end

node_user(("Developer"))
node_hardware["ESP32 Devices"]
node_cloudinary(("Cloudinary"))

node_user -->|"uses"| node_app
node_app -->|"routes"| node_authview
node_app -->|"manages identity"| node_authhook
node_authview -->|"requests sign-in"| node_authhook
node_authhook -->|"authenticates"| node_firebaseauth
node_authhook -->|"reads/writes profile"| node_firestore
node_app -->|"stores workspaces"| node_firestore
node_app -->|"opens workspace"| node_controller
node_controller -->|"syncs layout"| node_firestore
node_app -->|"connects device state"| node_mqtt
node_mqtt -->|"publishes/subscribes"| node_broker
node_hardware -->|"publishes/subscribes"| node_broker
node_mqtt -->|"updates state"| node_app
node_app -->|"routes operations"| node_toolviews
node_app -->|"routes simulation"| node_simulator
node_app -->|"runs automations"| node_automation
node_user -->|"browses"| node_hubfeed
node_app -->|"routes hub"| node_hubfeed
node_hubfeed -->|"opens project"| node_projectdetail
node_app -->|"routes publishing"| node_publisher
node_publisher -->|"uploads images"| node_upload
node_upload -.->|"stores media"| node_cloudinary
node_user -->|"messages developers"| node_messaging
node_messaging -->|"syncs conversations"| node_firestore
node_publisher -->|"stores projects"| node_firestore
node_user -->|"designs circuit"| node_wiring
node_wiring -->|"uses catalog"| node_parts
node_user -->|"reads guidance"| node_guide
node_guide -.->|"explains device setup"| node_controller
node_app -->|"uses client"| node_firebase

click node_app "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/App.jsx"
click node_authview "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/AuthPage.jsx"
click node_authhook "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/hooks/useAuth.js"
click node_controller "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/UniversalController.jsx"
click node_mqtt "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/hooks/useMqtt.js"
click node_toolviews "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ToolViews.jsx"
click node_simulator "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/SimulatorView.jsx"
click node_hubfeed "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectFeed.jsx"
click node_publisher "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectPublisher.jsx"
click node_projectdetail "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectDetail.jsx"
click node_messaging "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/context/MessagingContext.jsx"
click node_firebase "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/firebase.js"
click node_wiring "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ui/WiringBuilder.jsx"
click node_parts "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/data/componentDatabase.js"
click node_guide "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/DeveloperGuide.jsx"
click node_automation "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ToolViews.jsx"
click node_upload "https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/lib/cloudinaryUpload.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_authview,node_controller,node_mqtt,node_toolviews,node_simulator,node_automation toneBlue
class node_authhook,node_firebaseauth,node_firestore,node_broker,node_firebase toneAmber
class node_hubfeed,node_publisher,node_projectdetail,node_messaging,node_upload toneMint
class node_wiring,node_parts,node_guide toneRose
class node_user,node_hardware,node_cloudinary toneIndigo
```

## Components

### Dashboard & Control

- [Application Router](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/App.jsx): `src/App.jsx`
- [Sign-in Page](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/AuthPage.jsx): `src/components/AuthPage.jsx`
- [Universal Controller](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/UniversalController.jsx): `src/components/UniversalController.jsx`
- [MQTT Connection](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/hooks/useMqtt.js): `src/hooks/useMqtt.js`
- [Device & Ops Views](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ToolViews.jsx): `src/components/ToolViews.jsx`
- [Device Simulator](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/SimulatorView.jsx): `src/components/SimulatorView.jsx`
- [Automation Rules](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ToolViews.jsx): `src/components/ToolViews.jsx`

### Cloud Services

- [Authentication](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/hooks/useAuth.js): `src/hooks/useAuth.js`
- **Firebase Auth**
- **Cloud Firestore**
- **HiveMQ Broker**
- [Firebase Client](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/firebase.js): `src/firebase.js`

### Community Hub

- [Project Feed](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectFeed.jsx): `src/components/ProjectFeed.jsx`
- [Project Publisher](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectPublisher.jsx): `src/components/ProjectPublisher.jsx`
- [Project Details](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ProjectDetail.jsx): `src/components/ProjectDetail.jsx`
- [Direct Messaging](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/context/MessagingContext.jsx): `src/context/MessagingContext.jsx`
- [Image Upload](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/lib/cloudinaryUpload.js): `src/lib/cloudinaryUpload.js`

### Design & Guidance

- [Circuit Builder](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/ui/WiringBuilder.jsx): `src/components/ui/WiringBuilder.jsx`
- [Hardware Catalog](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/data/componentDatabase.js): `src/data/componentDatabase.js`
- [Developer Guide](https://github.com/iot-ahmad/iot-saas-dashboard/blob/main/src/components/DeveloperGuide.jsx): `src/components/DeveloperGuide.jsx`

### Other components

- **Developer**
- **ESP32 Devices**
- **Cloudinary**

## Connections

- Developer → Application Router: uses
- Application Router → Sign-in Page: routes
- Application Router → Authentication: manages identity
- Sign-in Page → Authentication: requests sign-in
- Authentication → Firebase Auth: authenticates
- Authentication → Cloud Firestore: reads/writes profile
- Application Router → Cloud Firestore: stores workspaces
- Application Router → Universal Controller: opens workspace
- Universal Controller → Cloud Firestore: syncs layout
- Application Router → MQTT Connection: connects device state
- MQTT Connection → HiveMQ Broker: publishes/subscribes
- ESP32 Devices → HiveMQ Broker: publishes/subscribes
- MQTT Connection → Application Router: updates state
- Application Router → Device & Ops Views: routes operations
- Application Router → Device Simulator: routes simulation
- Application Router → Automation Rules: runs automations
- Developer → Project Feed: browses
- Application Router → Project Feed: routes hub
- Project Feed → Project Details: opens project
- Application Router → Project Publisher: routes publishing
- Project Publisher → Image Upload: uploads images
- Image Upload → Cloudinary: stores media
- Developer → Direct Messaging: messages developers
- Direct Messaging → Cloud Firestore: syncs conversations
- Project Publisher → Cloud Firestore: stores projects
- Developer → Circuit Builder: designs circuit
- Circuit Builder → Hardware Catalog: uses catalog
- Developer → Developer Guide: reads guidance
- Developer Guide → Universal Controller: explains device setup
- Application Router → Firebase Client: uses client