# farmbot/farmbot-web-app architecture

> Architecture diagram of the GitHub repository farmbot/farmbot-web-app, 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/farmbot/farmbot-web-app
- Repository: https://github.com/farmbot/farmbot-web-app

## Overview

FarmBot Web App combines a browser-based farm-management interface, a REST API backed by persistent resource data, and MQTT messaging for realtime browser-to-device communication. The user-facing flow spans farm design and device configuration, with sequences, logs, and setup as distinct capabilities. The map below preserves major frontend modules identified in the source index and documented backend capabilities; unsampled code is represented conservatively, and only documented or excerpt-visible relationships are connected.

Main entry points: [`frontend/farm_designer/index.tsx`](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/farm_designer/index.tsx) (Farm designer), [`frontend/app.tsx`](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/app.tsx) (Web interface), [`frontend/settings/index.tsx`](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/index.tsx) (Device settings), [`frontend/routes.tsx`](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/routes.tsx) (App navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser app"]
  node_browser_app["Web interface<br/>[app.tsx]"]
  node_routes["App navigation<br/>[routes.tsx]"]
  node_palette["Command palette<br/>[index.tsx]"]
  node_logs["Log viewer<br/>[index.tsx]"]
  node_search["Search field<br/>[search_field.tsx]"]
  node_localization["Localization"]
  node_frontend_types["Frontend types<br/>[interfaces.ts]"]
  node_internal_urls["Internal URLs<br/>[internal_urls.ts]"]
  node_session_keys["Session keys<br/>[session_keys.ts]"]
end

subgraph group_farm["Farm operations"]
  node_designer["Farm designer<br/>[index.tsx]"]
  node_garden_map["Garden map<br/>[garden_map.tsx]"]
  node_designer_config["Designer preferences<br/>[actions.ts]"]
  node_saved_gardens["Saved gardens"]
  node_three_d["3D garden<br/>[index.tsx]"]
  node_sequences["Sequences"]
  node_tools["Tools<br/>[index.tsx]"]
  node_settings["Device settings<br/>[index.tsx]"]
  node_firmware_support["Firmware options"]
  node_three_d_settings["3D preferences"]
  node_wizard["Setup wizard<br/>[index.tsx]"]
  node_wizard_data["Setup definitions<br/>[data.ts]"]
end

subgraph group_server["Server platform"]
  node_api["REST API"]
  node_api_resources[("Farm resources")]
end

subgraph group_device["Device messaging"]
  node_mqtt["MQTT service<br/>[rabbit_workers.rb]"]
end

node_owner(("FarmBot owner"))
node_farmbot(("FarmBot device"))

node_owner -->|"uses"| node_browser_app
node_browser_app -->|"navigates"| node_routes
node_routes -.->|"opens"| node_designer
node_designer -->|"renders"| node_garden_map
node_designer -->|"dispatches updates"| node_designer_config
node_designer -->|"renders"| node_saved_gardens
node_designer -->|"renders"| node_three_d
node_settings -->|"uses"| node_firmware_support
node_settings -->|"renders"| node_three_d_settings
node_wizard -->|"uses"| node_wizard_data
node_owner -->|"requests data"| node_api
node_api -->|"stores resources"| node_api_resources
node_browser_app -->|"sends realtime messages"| node_mqtt
node_mqtt -->|"relays messages"| node_farmbot

click node_browser_app "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/app.tsx"
click node_routes "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/routes.tsx"
click node_palette "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/command_palette/index.tsx"
click node_designer "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/farm_designer/index.tsx"
click node_garden_map "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/farm_designer/map/garden_map.tsx"
click node_designer_config "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/config_storage/actions.ts"
click node_saved_gardens "https://github.com/farmbot/farmbot-web-app/tree/staging/frontend/saved_gardens"
click node_three_d "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/three_d_garden/index.tsx"
click node_sequences "https://github.com/farmbot/farmbot-web-app/tree/staging/frontend/sequences"
click node_tools "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/tools/index.tsx"
click node_settings "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/index.tsx"
click node_firmware_support "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/firmware/firmware_hardware_support.ts"
click node_three_d_settings "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/three_d_settings.tsx"
click node_wizard "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/wizard/index.tsx"
click node_wizard_data "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/wizard/data.ts"
click node_logs "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/logs/index.tsx"
click node_search "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/ui/search_field.tsx"
click node_localization "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/i18next_wrapper.tsx"
click node_frontend_types "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/interfaces.ts"
click node_internal_urls "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/internal_urls.ts"
click node_session_keys "https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/session_keys.ts"
click node_api "https://github.com/farmbot/farmbot-web-app/blob/staging/app/controllers/api/abstract_controller.rb"
click node_api_resources "https://github.com/farmbot/farmbot-web-app/blob/staging/app/models/application_record.rb"
click node_mqtt "https://github.com/farmbot/farmbot-web-app/blob/staging/lib/rabbit_workers.rb"

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_browser_app,node_routes,node_palette,node_logs,node_search,node_localization,node_frontend_types,node_internal_urls,node_session_keys toneBlue
class node_designer,node_garden_map,node_designer_config,node_saved_gardens,node_three_d,node_sequences,node_tools,node_settings,node_firmware_support,node_three_d_settings,node_wizard,node_wizard_data toneAmber
class node_api,node_api_resources toneMint
class node_mqtt toneRose
class node_owner,node_farmbot toneIndigo
```

## Components

### Browser app

- [Web interface](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/app.tsx): `frontend/app.tsx`
- [App navigation](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/routes.tsx): `frontend/routes.tsx`
- [Command palette](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/command_palette/index.tsx): `frontend/command_palette/index.tsx`
- [Log viewer](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/logs/index.tsx): `frontend/logs/index.tsx`
- [Search field](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/ui/search_field.tsx): `frontend/ui/search_field.tsx`
- [Localization](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/i18next_wrapper.tsx): `frontend/i18next_wrapper.tsx`
- [Frontend types](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/interfaces.ts): `frontend/interfaces.ts`
- [Internal URLs](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/internal_urls.ts): `frontend/internal_urls.ts`
- [Session keys](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/session_keys.ts): `frontend/session_keys.ts`

### Farm operations

- [Farm designer](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/farm_designer/index.tsx): `frontend/farm_designer/index.tsx`
- [Garden map](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/farm_designer/map/garden_map.tsx): `frontend/farm_designer/map/garden_map.tsx`
- [Designer preferences](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/config_storage/actions.ts): `frontend/config_storage/actions.ts`
- [Saved gardens](https://github.com/farmbot/farmbot-web-app/tree/staging/frontend/saved_gardens): `frontend/saved_gardens`
- [3D garden](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/three_d_garden/index.tsx): `frontend/three_d_garden/index.tsx`
- [Sequences](https://github.com/farmbot/farmbot-web-app/tree/staging/frontend/sequences): `frontend/sequences`
- [Tools](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/tools/index.tsx): `frontend/tools/index.tsx`
- [Device settings](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/index.tsx): `frontend/settings/index.tsx`
- [Firmware options](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/firmware/firmware_hardware_support.ts): `frontend/settings/firmware/firmware_hardware_support.ts`
- [3D preferences](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/settings/three_d_settings.tsx): `frontend/settings/three_d_settings.tsx`
- [Setup wizard](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/wizard/index.tsx): `frontend/wizard/index.tsx`
- [Setup definitions](https://github.com/farmbot/farmbot-web-app/blob/staging/frontend/wizard/data.ts): `frontend/wizard/data.ts`

### Server platform

- [REST API](https://github.com/farmbot/farmbot-web-app/blob/staging/app/controllers/api/abstract_controller.rb): `app/controllers/api/abstract_controller.rb`
- [Farm resources](https://github.com/farmbot/farmbot-web-app/blob/staging/app/models/application_record.rb): `app/models/application_record.rb`

### Device messaging

- [MQTT service](https://github.com/farmbot/farmbot-web-app/blob/staging/lib/rabbit_workers.rb): `lib/rabbit_workers.rb`

### Other components

- **FarmBot owner**
- **FarmBot device**

## Connections

- FarmBot owner → Web interface: uses (evidence: `README.md`)
- Web interface → App navigation: navigates (evidence: `README.md`)
- App navigation → Farm designer: opens
- Farm designer → Garden map: renders (evidence: `frontend/farm_designer/index.tsx`)
- Farm designer → Designer preferences: dispatches updates (evidence: `frontend/farm_designer/index.tsx`)
- Farm designer → Saved gardens: renders (evidence: `frontend/farm_designer/index.tsx`)
- Farm designer → 3D garden: renders (evidence: `frontend/farm_designer/index.tsx`)
- Device settings → Firmware options: uses (evidence: `frontend/settings/index.tsx`)
- Device settings → 3D preferences: renders (evidence: `frontend/settings/index.tsx`)
- Setup wizard → Setup definitions: uses (evidence: `frontend/wizard/index.tsx`)
- FarmBot owner → REST API: requests data (evidence: `README.md`)
- REST API → Farm resources: stores resources (evidence: `README.md`)
- Web interface → MQTT service: sends realtime messages (evidence: `README.md`)
- MQTT service → FarmBot device: relays messages (evidence: `README.md`)