# jherald-vibar/sibol-web architecture

> Architecture diagram of the GitHub repository jherald-vibar/sibol-web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jherald-vibar/sibol-web
- Repository: https://github.com/jherald-vibar/sibol-web

## Overview

SIBOL is an IoT gardening platform: growers manage gardens and crops in a React dashboard, while ESP32 readings enter the Laravel backend, are stored and evaluated against crop profiles, and feed live updates, alerts, and reports. Separate branches support irrigation control and image-based crop-health detection through a Flask/YOLO service. The README documents the service-level flow; sampled code confirms selected backend persistence, event, and notification behavior. Several UI and backend subsystems are represented from documented capabilities and the file tree, not inspected implementation details.

Main entry points: [`app/Http/Controllers/IotController.php`](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IotController.php) (IoT ingestion), [`routes/api.php`](https://github.com/jherald-vibar/sibol-web/blob/main/routes/api.php) (API routes), [`app/Http/Controllers/GardenController.php`](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/GardenController.php) (Garden management), [`app/Models/Garden.php`](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Garden.php) (Gardens and crops)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web experience"]
  node_dashboard["User and admin UI"]
  node_router["App routing<br/>[Router.jsx]"]
  node_sensor_hook["Live sensor hook<br/>[useSensorData.js]"]
end

subgraph group_backend["Laravel application"]
  node_api_routes["API routes<br/>[api.php]"]
  node_accounts["Accounts and auth<br/>[UserController.php]"]
  node_reports["Reports<br/>[IotController.php]"]
  node_notification_api["Notification API"]
  node_notification_event["Notification event"]
  node_notifications[("Alert records<br/>[Notification.php]")]
end

subgraph group_domain["Garden domain"]
  node_garden_api["Garden management"]
  node_user_model[("User accounts<br/>[User.php]")]
  node_garden_model[("Gardens and crops<br/>[Garden.php]")]
  node_crop_profile[("Crop profiles<br/>[CropProfile.php]")]
end

subgraph group_care["Monitoring and care"]
  node_iot_api["IoT ingestion<br/>[IotController.php]"]
  node_irrigation["Irrigation control"]
  node_detection_api["Detection results"]
  node_notification_service["Alert evaluation"]
  node_sensor_event["Sensor event"]
  node_device[("ESP devices<br/>[Esp.php]")]
  node_sensor_data[("Sensor readings<br/>[SensorData.php]")]
  node_detections[("Detection records")]
end

subgraph group_integrations["External services"]
  node_yolo["YOLO detection service<br/>[app.py]"]
  node_mqtt["MQTT broker"]
  node_websockets["WebSocket service"]
  node_sms_email["SMS and email"]
  node_cloudinary["Cloudinary media"]
end

node_grower(("Grower"))
node_esp32["ESP32 nodes"]

node_grower -->|"opens"| node_router
node_router -->|"routes to"| node_dashboard
node_dashboard -.->|"requests data"| node_api_routes
node_api_routes -->|"routes to"| node_accounts
node_api_routes -->|"routes to"| node_garden_api
node_api_routes -->|"routes to"| node_iot_api
node_api_routes -->|"routes to"| node_irrigation
node_api_routes -->|"routes to"| node_detection_api
node_api_routes -->|"routes to"| node_notification_api
node_accounts -->|"manages"| node_user_model
node_garden_api -->|"manages"| node_garden_model
node_garden_api -->|"reads profiles"| node_crop_profile
node_esp32 -->|"publishes readings"| node_mqtt
node_mqtt -->|"ingests readings"| node_iot_api
node_iot_api -->|"stores readings"| node_sensor_data
node_iot_api -.->|"resolves device"| node_device
node_iot_api -->|"submits images"| node_yolo
node_iot_api -->|"uploads images"| node_cloudinary
node_iot_api -->|"broadcasts"| node_sensor_event
node_iot_api -->|"checks conditions"| node_notification_service
node_notification_service -->|"creates alerts"| node_notifications
node_notification_service -->|"broadcasts"| node_notification_event
node_sensor_event -->|"sends alerts"| node_sms_email
node_notification_event -->|"includes alert"| node_notifications
node_notification_api -->|"reads alerts"| node_notifications
node_sensor_event -->|"broadcasts live"| node_websockets
node_websockets -->|"streams updates"| node_sensor_hook
node_sensor_hook -->|"updates charts"| node_dashboard
node_irrigation -.->|"controls device"| node_device
node_detection_api -->|"reads results"| node_detections
node_detections -->|"broadcasts updates"| node_websockets
node_reports -->|"queries readings"| node_sensor_data
node_reports -->|"downloads reports"| node_grower
node_garden_model -->|"belongs to"| node_user_model
node_garden_model -.->|"has crop care"| node_crop_profile

click node_dashboard "https://github.com/jherald-vibar/sibol-web/tree/main/sibol-frontend/src/Views"
click node_router "https://github.com/jherald-vibar/sibol-web/blob/main/sibol-frontend/src/Router.jsx"
click node_sensor_hook "https://github.com/jherald-vibar/sibol-web/blob/main/sibol-frontend/src/hooks/useSensorData.js"
click node_api_routes "https://github.com/jherald-vibar/sibol-web/blob/main/routes/api.php"
click node_accounts "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/Accounts/UserController.php"
click node_garden_api "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/GardenController.php"
click node_iot_api "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IotController.php"
click node_irrigation "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IrrigationController.php"
click node_detection_api "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/DetectionResultController.php"
click node_reports "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IotController.php"
click node_notification_api "https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/NotificationController.php"
click node_notification_service "https://github.com/jherald-vibar/sibol-web/blob/main/app/Services/NotificationService.php"
click node_sensor_event "https://github.com/jherald-vibar/sibol-web/blob/main/app/Events/SensorDataReceived.php"
click node_notification_event "https://github.com/jherald-vibar/sibol-web/blob/main/app/Events/NotificationCreated.php"
click node_user_model "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/User.php"
click node_garden_model "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Garden.php"
click node_crop_profile "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/CropProfile.php"
click node_device "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Esp.php"
click node_sensor_data "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/SensorData.php"
click node_detections "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/DetectionResults.php"
click node_notifications "https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Notification.php"
click node_yolo "https://github.com/jherald-vibar/sibol-web/blob/main/python-yolo/app.py"
click node_sms_email "https://github.com/jherald-vibar/sibol-web/tree/main/app/Services"

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_dashboard,node_router,node_sensor_hook toneBlue
class node_api_routes,node_accounts,node_reports,node_notification_api,node_notification_event,node_notifications toneAmber
class node_garden_api,node_user_model,node_garden_model,node_crop_profile toneMint
class node_iot_api,node_irrigation,node_detection_api,node_notification_service,node_sensor_event,node_device,node_sensor_data,node_detections toneRose
class node_yolo,node_mqtt,node_websockets,node_sms_email,node_cloudinary,node_grower,node_esp32 toneIndigo
```

## Components

### Web experience

- [User and admin UI](https://github.com/jherald-vibar/sibol-web/tree/main/sibol-frontend/src/Views): `sibol-frontend/src/Views`
- [App routing](https://github.com/jherald-vibar/sibol-web/blob/main/sibol-frontend/src/Router.jsx): `sibol-frontend/src/Router.jsx`
- [Live sensor hook](https://github.com/jherald-vibar/sibol-web/blob/main/sibol-frontend/src/hooks/useSensorData.js): `sibol-frontend/src/hooks/useSensorData.js`

### Laravel application

- [API routes](https://github.com/jherald-vibar/sibol-web/blob/main/routes/api.php): `routes/api.php`
- [Accounts and auth](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/Accounts/UserController.php): `app/Http/Controllers/Accounts/UserController.php`
- [Reports](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IotController.php): `app/Http/Controllers/IotController.php`
- [Notification API](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/NotificationController.php): `app/Http/Controllers/NotificationController.php`
- [Notification event](https://github.com/jherald-vibar/sibol-web/blob/main/app/Events/NotificationCreated.php): `app/Events/NotificationCreated.php`
- [Alert records](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Notification.php): `app/Models/Notification.php`

### Garden domain

- [Garden management](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/GardenController.php): `app/Http/Controllers/GardenController.php`
- [User accounts](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/User.php): `app/Models/User.php`
- [Gardens and crops](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Garden.php): `app/Models/Garden.php`
- [Crop profiles](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/CropProfile.php): `app/Models/CropProfile.php`

### Monitoring and care

- [IoT ingestion](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IotController.php): `app/Http/Controllers/IotController.php`
- [Irrigation control](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/IrrigationController.php): `app/Http/Controllers/IrrigationController.php`
- [Detection results](https://github.com/jherald-vibar/sibol-web/blob/main/app/Http/Controllers/DetectionResultController.php): `app/Http/Controllers/DetectionResultController.php`
- [Alert evaluation](https://github.com/jherald-vibar/sibol-web/blob/main/app/Services/NotificationService.php): `app/Services/NotificationService.php`
- [Sensor event](https://github.com/jherald-vibar/sibol-web/blob/main/app/Events/SensorDataReceived.php): `app/Events/SensorDataReceived.php`
- [ESP devices](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/Esp.php): `app/Models/Esp.php`
- [Sensor readings](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/SensorData.php): `app/Models/SensorData.php`
- [Detection records](https://github.com/jherald-vibar/sibol-web/blob/main/app/Models/DetectionResults.php): `app/Models/DetectionResults.php`

### External services

- [YOLO detection service](https://github.com/jherald-vibar/sibol-web/blob/main/python-yolo/app.py): `python-yolo/app.py`
- **MQTT broker**
- **WebSocket service**
- [SMS and email](https://github.com/jherald-vibar/sibol-web/tree/main/app/Services): `app/Services`
- **Cloudinary media**

### Other components

- **Grower**
- **ESP32 nodes**

## Connections

- Grower → App routing: opens (evidence: `sibol-frontend/src/Router.jsx`)
- App routing → User and admin UI: routes to (evidence: `sibol-frontend/src/Router.jsx`)
- User and admin UI → API routes: requests data
- API routes → Accounts and auth: routes to (evidence: `routes/api.php`)
- API routes → Garden management: routes to (evidence: `routes/api.php`)
- API routes → IoT ingestion: routes to (evidence: `routes/api.php`)
- API routes → Irrigation control: routes to (evidence: `routes/api.php`)
- API routes → Detection results: routes to (evidence: `routes/api.php`)
- API routes → Notification API: routes to (evidence: `routes/api.php`)
- Accounts and auth → User accounts: manages (evidence: `app/Http/Controllers/Accounts/UserController.php`)
- Garden management → Gardens and crops: manages (evidence: `app/Http/Controllers/GardenController.php`)
- Garden management → Crop profiles: reads profiles (evidence: `app/Http/Controllers/GardenController.php`)
- ESP32 nodes → MQTT broker: publishes readings (evidence: `README.md`)
- MQTT broker → IoT ingestion: ingests readings (evidence: `README.md`)
- IoT ingestion → Sensor readings: stores readings (evidence: `app/Http/Controllers/IotController.php`)
- IoT ingestion → ESP devices: resolves device (evidence: `app/Http/Controllers/IotController.php`)
- IoT ingestion → YOLO detection service: submits images (evidence: `README.md`)
- IoT ingestion → Cloudinary media: uploads images (evidence: `app/Http/Controllers/IotController.php`)
- IoT ingestion → Sensor event: broadcasts (evidence: `app/Http/Controllers/IotController.php`)
- IoT ingestion → Alert evaluation: checks conditions (evidence: `app/Http/Controllers/IotController.php`)
- Alert evaluation → Alert records: creates alerts (evidence: `app/Services/NotificationService.php`)
- Alert evaluation → Notification event: broadcasts (evidence: `app/Services/NotificationService.php`)
- Sensor event → SMS and email: sends alerts (evidence: `app/Events/SensorDataReceived.php`)
- Notification event → Alert records: includes alert (evidence: `app/Events/NotificationCreated.php`)
- Notification API → Alert records: reads alerts (evidence: `routes/api.php`)
- Sensor event → WebSocket service: broadcasts live (evidence: `README.md`)
- WebSocket service → Live sensor hook: streams updates (evidence: `README.md`)
- Live sensor hook → User and admin UI: updates charts (evidence: `sibol-frontend/src/hooks/useSensorData.js`)
- Irrigation control → ESP devices: controls device (evidence: `app/Http/Controllers/IrrigationController.php`)
- Detection results → Detection records: reads results (evidence: `app/Http/Controllers/DetectionResultController.php`)
- Detection records → WebSocket service: broadcasts updates (evidence: `app/Models/DetectionResults.php`)
- Reports → Sensor readings: queries readings (evidence: `app/Http/Controllers/IotController.php`)
- Reports → Grower: downloads reports (evidence: `README.md`)
- Gardens and crops → User accounts: belongs to (evidence: `app/Models/User.php`)
- Gardens and crops → Crop profiles: has crop care