# mwamb4/ashaki-grill architecture

> Architecture diagram of the GitHub repository mwamb4/ashaki-grill, 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/mwamb4/ashaki-grill
- Repository: https://github.com/mwamb4/ashaki-grill

## Overview

This is a small browser-based restaurant menu and cart: visitors browse or filter dishes, add items and adjust quantities, then see an order total at checkout. The workflow and cart behavior are visible in `script.js`; the tree also includes the page and stylesheet, but their contents were not sampled. Checkout only displays a notification; no order submission or payment integration is evidenced.

Main entry points: [`index.html`](https://github.com/mwamb4/ashaki-grill/blob/main/index.html) (Page structure), [`script.js`](https://github.com/mwamb4/ashaki-grill/blob/main/script.js) (Cart actions), [`style.css`](https://github.com/mwamb4/ashaki-grill/blob/main/style.css) (Page styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Page structure<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
  node_notification["Notifications<br/>[script.js]"]
end

subgraph group_catalog["Menu browsing"]
  node_catalog_data["Menu items<br/>[script.js]"]
  node_menu_view["Menu display<br/>[script.js]"]
end

subgraph group_ordering["Cart and checkout"]
  node_cart_state["Cart state<br/>[script.js]"]
  node_cart_actions["Cart actions<br/>[script.js]"]
  node_cart_view["Cart display<br/>[script.js]"]
  node_checkout["Checkout total<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_image_hosts["Image hosts"]

node_visitor -->|"uses"| node_page
node_page -->|"category clicks"| node_menu_view
node_menu_view -->|"reads"| node_catalog_data
node_menu_view -.->|"loads images"| node_image_hosts
node_page -->|"add clicks"| node_cart_actions
node_cart_actions -->|"finds item"| node_catalog_data
node_cart_actions -->|"updates"| node_cart_state
node_cart_actions -->|"calls update"| node_cart_view
node_cart_view -->|"reads"| node_cart_state
node_page -->|"quantity clicks"| node_cart_actions
node_page -->|"checkout click"| node_checkout
node_checkout -->|"reads"| node_cart_state
node_checkout -->|"shows total"| node_notification
node_cart_actions -->|"shows confirmation"| node_notification
node_cart_view -->|"updates cart display"| node_page
node_menu_view -->|"renders menu"| node_page
node_styles -->|"styles"| node_page

click node_page "https://github.com/mwamb4/ashaki-grill/blob/main/index.html"
click node_styles "https://github.com/mwamb4/ashaki-grill/blob/main/style.css"
click node_catalog_data "https://github.com/mwamb4/ashaki-grill/blob/main/script.js"
click node_menu_view "https://github.com/mwamb4/ashaki-grill/blob/main/script.js"
click node_cart_state "https://github.com/mwamb4/ashaki-grill/blob/main/script.js"
click node_cart_actions "https://github.com/mwamb4/ashaki-grill/blob/main/script.js"
click node_cart_view "https://github.com/mwamb4/ashaki-grill/blob/main/script.js"
click node_checkout "https://github.com/mwamb4/ashaki-grill/blob/main/script.js"
click node_notification "https://github.com/mwamb4/ashaki-grill/blob/main/script.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_page,node_styles,node_notification toneBlue
class node_catalog_data,node_menu_view toneAmber
class node_cart_state,node_cart_actions,node_cart_view,node_checkout toneMint
class node_visitor,node_image_hosts toneIndigo
```

## Components

### Browser interface

- [Page structure](https://github.com/mwamb4/ashaki-grill/blob/main/index.html): `index.html`
- [Page styling](https://github.com/mwamb4/ashaki-grill/blob/main/style.css): `style.css`
- [Notifications](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`

### Menu browsing

- [Menu items](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`
- [Menu display](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`

### Cart and checkout

- [Cart state](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`
- [Cart actions](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`
- [Cart display](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`
- [Checkout total](https://github.com/mwamb4/ashaki-grill/blob/main/script.js): `script.js`

### Other components

- **Visitor**
- **Image hosts**

## Connections

- Visitor → Page structure: uses
- Page structure → Menu display: category clicks
- Menu display → Menu items: reads
- Menu display → Image hosts: loads images
- Page structure → Cart actions: add clicks
- Cart actions → Menu items: finds item
- Cart actions → Cart state: updates
- Cart actions → Cart display: calls update
- Cart display → Cart state: reads
- Page structure → Cart actions: quantity clicks
- Page structure → Checkout total: checkout click
- Checkout total → Cart state: reads
- Checkout total → Notifications: shows total
- Cart actions → Notifications: shows confirmation
- Cart display → Page structure: updates cart display
- Menu display → Page structure: renders menu
- Page styling → Page structure: styles