# eylonhotam/grocy-pantry-bot architecture

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

- Interactive diagram: https://gitdiagram.com/eylonhotam/grocy-pantry-bot
- Repository: https://github.com/eylonhotam/grocy-pantry-bot

## Overview

Grocy is a lightweight, browser-based pantry assistant. A user enters a grocery command in the chat; the parser adjusts a known item's quantity or guides the user through category and threshold selection for a new item. Inventory changes persist in localStorage and appear in the sidebar, where low-stock items are visually marked. The parser can also produce a shopping list from items at or below their thresholds. The implementation is concentrated in app.js; the README documents capabilities, but its project-structure paths do not match the supplied file tree, so only tree-supported paths are used here.

Main entry points: [`app.js`](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js) (Command chat), [`index.html`](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/index.html) (App shell), [`styles.css`](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/styles.css) (Visual styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Chat interaction"]
  node_chat["Command chat<br/>[app.js]"]
  node_sidebar["Inventory sidebar<br/>[app.js]"]
  node_low_stock["Low-stock alerts<br/>[app.js]"]
  node_app_shell["App shell<br/>[index.html]"]
  node_styles["Visual styles<br/>[styles.css]"]
end

subgraph group_pantry["Pantry logic"]
  node_onboarding["Item onboarding<br/>[app.js]"]
  node_parser["Command parser<br/>[app.js]"]
  node_shopping_list["Shopping list<br/>[app.js]"]
  node_inventory["Inventory model<br/>[app.js]"]
end

subgraph group_browser_state["Browser state"]
  node_storage[("Local storage")]
end

node_user(("Pantry user"))

node_user -->|"enters commands"| node_chat
node_chat -->|"processes input"| node_parser
node_parser -->|"requests item details"| node_onboarding
node_parser -->|"updates or adds"| node_inventory
node_parser -->|"checks thresholds"| node_shopping_list
node_inventory -->|"loads and saves"| node_storage
node_chat -->|"refreshes view"| node_sidebar
node_sidebar -->|"reads items"| node_inventory
node_sidebar -->|"marks low quantities"| node_low_stock
node_app_shell -.->|"hosts interface"| node_chat
node_styles -.->|"styles interface"| node_chat

click node_chat "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_onboarding "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_parser "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_shopping_list "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_inventory "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_sidebar "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_low_stock "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js"
click node_app_shell "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/index.html"
click node_styles "https://github.com/eylonhotam/grocy-pantry-bot/blob/main/styles.css"

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_chat,node_sidebar,node_low_stock,node_app_shell,node_styles,node_user toneBlue
class node_onboarding,node_parser,node_shopping_list,node_inventory toneAmber
class node_storage toneMint
```

## Components

### Chat interaction

- [Command chat](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`
- [Inventory sidebar](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`
- [Low-stock alerts](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`
- [App shell](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/index.html): `index.html`
- [Visual styles](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/styles.css): `styles.css`

### Pantry logic

- [Item onboarding](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`
- [Command parser](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`
- [Shopping list](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`
- [Inventory model](https://github.com/eylonhotam/grocy-pantry-bot/blob/main/app.js): `app.js`

### Browser state

- **Local storage**

### Other components

- **Pantry user**

## Connections

- Pantry user → Command chat: enters commands (evidence: `README.md`)
- Command chat → Command parser: processes input (evidence: `app.js`)
- Command parser → Item onboarding: requests item details (evidence: `app.js`)
- Command parser → Inventory model: updates or adds (evidence: `app.js`)
- Command parser → Shopping list: checks thresholds (evidence: `app.js`)
- Inventory model → Local storage: loads and saves (evidence: `app.js`)
- Command chat → Inventory sidebar: refreshes view (evidence: `app.js`)
- Inventory sidebar → Inventory model: reads items (evidence: `app.js`)
- Inventory sidebar → Low-stock alerts: marks low quantities (evidence: `app.js`)
- App shell → Command chat: hosts interface (evidence: `README.md`)
- Visual styles → Command chat: styles interface (evidence: `README.md`)