# viniciuslimaan/onlinemenu architecture

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

- Interactive diagram: https://gitdiagram.com/viniciuslimaan/onlinemenu
- Repository: https://github.com/viniciuslimaan/onlinemenu

## Overview

Online Menu is a static restaurant menu and ordering interface. Customers browse categorized products or promotions, add items to a browser-persisted cart, adjust quantities and delivery or discount choices, then generate an order message. The README describes WhatsApp forwarding as the intended result, but says forwarding is not configured; the current checkout displays the message in an alert. Source excerpts show the JavaScript behavior, but not the HTML script wiring, so page-to-script relationships are omitted.

Main entry points: [`js/shoppingCart.js`](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/shoppingCart.js) (Cart Checkout), [`js/cart.js`](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/cart.js) (Cart Actions), [`js/menu.js`](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/menu.js) (Menu Browsing), [`js/products.js`](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/products.js) (Product Catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Menu and Catalog"]
  node_menu_ui["Menu Browsing<br/>[menu.js]"]
  node_product_catalog["Product Catalog<br/>[products.js]"]
end

subgraph group_cart["Cart and Checkout"]
  node_cart_actions["Cart Actions<br/>[cart.js]"]
  node_cart_state[("Browser Cart")]
  node_checkout["Cart Checkout<br/>[shoppingCart.js]"]
  node_order_message["Order Message<br/>[shoppingCart.js]"]
end

subgraph group_interface["Web Interface"]
  node_menu_page["Menu Page<br/>[index.html]"]
  node_cart_page["Cart Page<br/>[cart.html]"]
  node_navbar["Mobile Navigation<br/>[navbar.js]"]
  node_menu_styles["Menu Styling<br/>[style.scss]"]
  node_cart_styles["Cart Styling<br/>[cart.scss]"]
end

node_customer(("Customer"))
node_toastify["Toastify"]
node_whatsapp["WhatsApp"]

node_customer -->|"browses"| node_menu_page
node_customer -->|"checks out"| node_cart_page
node_menu_ui -->|"filters and renders"| node_product_catalog
node_menu_ui -->|"adds products"| node_cart_actions
node_cart_actions -->|"reads and writes"| node_cart_state
node_cart_actions -->|"shows notification"| node_toastify
node_checkout -->|"reads and writes"| node_cart_state
node_checkout -->|"looks up products"| node_product_catalog
node_checkout -->|"shows notifications"| node_toastify
node_customer -->|"chooses options"| node_checkout
node_checkout -->|"builds and displays"| node_order_message
node_order_message -.->|"forwarding planned"| node_whatsapp

click node_menu_page "https://github.com/viniciuslimaan/onlinemenu/blob/master/index.html"
click node_cart_page "https://github.com/viniciuslimaan/onlinemenu/blob/master/view/cart.html"
click node_menu_ui "https://github.com/viniciuslimaan/onlinemenu/blob/master/js/menu.js"
click node_product_catalog "https://github.com/viniciuslimaan/onlinemenu/blob/master/js/products.js"
click node_cart_actions "https://github.com/viniciuslimaan/onlinemenu/blob/master/js/cart.js"
click node_checkout "https://github.com/viniciuslimaan/onlinemenu/blob/master/js/shoppingCart.js"
click node_order_message "https://github.com/viniciuslimaan/onlinemenu/blob/master/js/shoppingCart.js"
click node_navbar "https://github.com/viniciuslimaan/onlinemenu/blob/master/js/navbar.js"
click node_menu_styles "https://github.com/viniciuslimaan/onlinemenu/blob/master/css/style.scss"
click node_cart_styles "https://github.com/viniciuslimaan/onlinemenu/blob/master/css/cart.scss"

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_menu_ui,node_product_catalog toneBlue
class node_cart_actions,node_cart_state,node_checkout,node_order_message toneAmber
class node_menu_page,node_cart_page,node_navbar,node_menu_styles,node_cart_styles toneMint
class node_customer,node_toastify,node_whatsapp toneIndigo
```

## Components

### Menu and Catalog

- [Menu Browsing](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/menu.js): `js/menu.js`
- [Product Catalog](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/products.js): `js/products.js`

### Cart and Checkout

- [Cart Actions](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/cart.js): `js/cart.js`
- **Browser Cart**
- [Cart Checkout](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/shoppingCart.js): `js/shoppingCart.js`
- [Order Message](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/shoppingCart.js): `js/shoppingCart.js`

### Web Interface

- [Menu Page](https://github.com/viniciuslimaan/onlinemenu/blob/master/index.html): `index.html`
- [Cart Page](https://github.com/viniciuslimaan/onlinemenu/blob/master/view/cart.html): `view/cart.html`
- [Mobile Navigation](https://github.com/viniciuslimaan/onlinemenu/blob/master/js/navbar.js): `js/navbar.js`
- [Menu Styling](https://github.com/viniciuslimaan/onlinemenu/blob/master/css/style.scss): `css/style.scss`
- [Cart Styling](https://github.com/viniciuslimaan/onlinemenu/blob/master/css/cart.scss): `css/cart.scss`

### Other components

- **Customer**
- **Toastify**
- **WhatsApp**

## Connections

- Customer → Menu Page: browses (evidence: `README.md`)
- Customer → Cart Page: checks out (evidence: `README.md`)
- Menu Browsing → Product Catalog: filters and renders (evidence: `js/menu.js`)
- Menu Browsing → Cart Actions: adds products (evidence: `js/menu.js`)
- Cart Actions → Browser Cart: reads and writes (evidence: `js/cart.js`)
- Cart Actions → Toastify: shows notification (evidence: `js/cart.js`)
- Cart Checkout → Browser Cart: reads and writes (evidence: `js/shoppingCart.js`)
- Cart Checkout → Product Catalog: looks up products (evidence: `js/shoppingCart.js`)
- Cart Checkout → Toastify: shows notifications (evidence: `js/shoppingCart.js`)
- Customer → Cart Checkout: chooses options (evidence: `js/shoppingCart.js`)
- Cart Checkout → Order Message: builds and displays (evidence: `js/shoppingCart.js`)
- Order Message → WhatsApp: forwarding planned (evidence: `README.md`)