# bhrugen/vue_mango_fusion architecture

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

## Overview

VueMangoFusion is a restaurant menu and ordering frontend with customer sign-in, cart and order history, plus admin menu and order management. The visible routing defines these user journeys; sampled components show menu-to-cart interactions, shared ratings, and persistent authentication/theme state. Service modules indicate API-facing domains, but their callers and backend contract were not shown, so those connections are omitted. Several route-to-view links are evidenced by the router imports and route declarations.

Main entry points: [`VueMangoFusion/src/router/routes.js`](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/router/routes.js) (Route table), [`VueMangoFusion/src/App.vue`](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/App.vue) (App shell), [`VueMangoFusion/src/components/layout/Header.vue`](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/layout/Header.vue) (Navigation header), [`VueMangoFusion/src/stores/authStore.js`](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/authStore.js) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["App shell<br/>[App.vue]"]
  node_header["Navigation header<br/>[Header.vue]"]
  node_footer["Footer<br/>[Footer.vue]"]
  node_router["Route table<br/>[routes.js]"]
  node_guards["Access guards<br/>[guards.js]"]
  node_no_access["Access denied<br/>[NoAccess.vue]"]
  node_not_found["Not found<br/>[NotFound.vue]"]
end

subgraph group_customer["Customer ordering"]
  node_home["Home menu<br/>[Home.vue]"]
  node_menu_list["Menu browsing<br/>[MenuItemList.vue]"]
  node_menu_card["Menu item card<br/>[MenuItemCard.vue]"]
  node_menu_details["Item details"]
  node_rating["Item rating<br/>[Rating.vue]"]
  node_cart["Shopping cart<br/>[ShoppingCart.vue]"]
  node_place_order["Place order"]
  node_confirmation["Order confirmation"]
  node_history["Order history"]
  node_order_card["Order summary<br/>[OrderListCard.vue]"]
  node_order_details["Order details"]
  node_signin["Sign in<br/>[SignIn.vue]"]
  node_signup["Sign up<br/>[SignUp.vue]"]
end

subgraph group_admin["Admin operations"]
  node_menu_admin["Menu administration<br/>[MenuItemUpsert.vue]"]
  node_order_admin["Order management"]
end

subgraph group_state["State and services"]
  node_cart_state["Cart state<br/>[cartStore.js]"]
  node_auth_state["Authentication state<br/>[authStore.js]"]
  node_theme_state["Theme state<br/>[themeStore.js]"]
  node_api["HTTP client<br/>[api.js]"]
  node_auth_service["Authentication service<br/>[authService.js]"]
  node_menu_service["Menu service<br/>[menuItemService.js]"]
  node_order_service["Order service<br/>[orderService.js]"]
end

node_customer_actor(("Customer"))
node_admin_actor(("Administrator"))

node_app -->|"renders"| node_header
node_app -->|"renders"| node_footer
node_app -->|"installs"| node_router
node_app -->|"initializes"| node_auth_state
node_app -->|"reads theme"| node_theme_state
node_router -->|"registers"| node_guards
node_guards -->|"checks access"| node_auth_state
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_signin
node_router -->|"routes to"| node_signup
node_router -->|"routes to"| node_cart
node_router -->|"routes to"| node_menu_list
node_router -->|"routes to"| node_menu_admin
node_router -->|"routes to"| node_confirmation
node_router -->|"routes to"| node_history
node_router -->|"routes to"| node_order_admin
node_router -->|"routes to"| node_no_access
node_router -->|"routes to"| node_not_found
node_header -->|"reads and updates"| node_auth_state
node_header -->|"reads count"| node_cart_state
node_header -->|"changes theme"| node_theme_state
node_customer_actor -.->|"browses"| node_home
node_admin_actor -.->|"maintains menu"| node_menu_admin
node_menu_card -->|"updates cart"| node_cart_state
node_menu_card -->|"renders"| node_rating
node_order_card -->|"renders"| node_rating

click node_app "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/App.vue"
click node_header "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/layout/Header.vue"
click node_footer "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/layout/Footer.vue"
click node_router "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/router/routes.js"
click node_guards "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/router/guards.js"
click node_home "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/home/Home.vue"
click node_menu_list "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/menu-item/MenuItemList.vue"
click node_menu_card "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/card/MenuItemCard.vue"
click node_menu_details "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/modals/MenuItemDetailsModal.vue"
click node_rating "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/shared/Rating.vue"
click node_cart "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/cart/ShoppingCart.vue"
click node_cart_state "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/cartStore.js"
click node_place_order "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/modals/PlaceOrderModal.vue"
click node_confirmation "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/order/OrderConfirmation.vue"
click node_history "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/order/OrderHistoryList.vue"
click node_order_card "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/card/OrderListCard.vue"
click node_order_details "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/modals/OrderDetailsModal.vue"
click node_signin "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/SignIn.vue"
click node_signup "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/SignUp.vue"
click node_menu_admin "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/menu-item/MenuItemUpsert.vue"
click node_order_admin "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/order/OrderManagement.vue"
click node_auth_state "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/authStore.js"
click node_theme_state "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/themeStore.js"
click node_api "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/api.js"
click node_auth_service "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/authService.js"
click node_menu_service "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/menuItemService.js"
click node_order_service "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/orderService.js"
click node_no_access "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/NoAccess.vue"
click node_not_found "https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/NotFound.vue"

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_app,node_header,node_footer,node_router,node_guards,node_no_access,node_not_found toneBlue
class node_home,node_menu_list,node_menu_card,node_menu_details,node_rating,node_cart,node_place_order,node_confirmation,node_history,node_order_card,node_order_details,node_signin,node_signup toneAmber
class node_menu_admin,node_order_admin toneMint
class node_cart_state,node_auth_state,node_theme_state,node_api,node_auth_service,node_menu_service,node_order_service toneRose
class node_customer_actor,node_admin_actor toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/App.vue): `VueMangoFusion/src/App.vue`
- [Navigation header](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/layout/Header.vue): `VueMangoFusion/src/components/layout/Header.vue`
- [Footer](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/layout/Footer.vue): `VueMangoFusion/src/components/layout/Footer.vue`
- [Route table](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/router/routes.js): `VueMangoFusion/src/router/routes.js`
- [Access guards](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/router/guards.js): `VueMangoFusion/src/router/guards.js`
- [Access denied](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/NoAccess.vue): `VueMangoFusion/src/views/auth/NoAccess.vue`
- [Not found](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/NotFound.vue): `VueMangoFusion/src/views/auth/NotFound.vue`

### Customer ordering

- [Home menu](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/home/Home.vue): `VueMangoFusion/src/views/home/Home.vue`
- [Menu browsing](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/menu-item/MenuItemList.vue): `VueMangoFusion/src/views/menu-item/MenuItemList.vue`
- [Menu item card](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/card/MenuItemCard.vue): `VueMangoFusion/src/components/card/MenuItemCard.vue`
- [Item details](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/modals/MenuItemDetailsModal.vue): `VueMangoFusion/src/components/modals/MenuItemDetailsModal.vue`
- [Item rating](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/shared/Rating.vue): `VueMangoFusion/src/components/shared/Rating.vue`
- [Shopping cart](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/cart/ShoppingCart.vue): `VueMangoFusion/src/views/cart/ShoppingCart.vue`
- [Place order](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/modals/PlaceOrderModal.vue): `VueMangoFusion/src/components/modals/PlaceOrderModal.vue`
- [Order confirmation](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/order/OrderConfirmation.vue): `VueMangoFusion/src/views/order/OrderConfirmation.vue`
- [Order history](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/order/OrderHistoryList.vue): `VueMangoFusion/src/views/order/OrderHistoryList.vue`
- [Order summary](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/card/OrderListCard.vue): `VueMangoFusion/src/components/card/OrderListCard.vue`
- [Order details](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/components/modals/OrderDetailsModal.vue): `VueMangoFusion/src/components/modals/OrderDetailsModal.vue`
- [Sign in](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/SignIn.vue): `VueMangoFusion/src/views/auth/SignIn.vue`
- [Sign up](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/auth/SignUp.vue): `VueMangoFusion/src/views/auth/SignUp.vue`

### Admin operations

- [Menu administration](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/menu-item/MenuItemUpsert.vue): `VueMangoFusion/src/views/menu-item/MenuItemUpsert.vue`
- [Order management](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/views/order/OrderManagement.vue): `VueMangoFusion/src/views/order/OrderManagement.vue`

### State and services

- [Cart state](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/cartStore.js): `VueMangoFusion/src/stores/cartStore.js`
- [Authentication state](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/authStore.js): `VueMangoFusion/src/stores/authStore.js`
- [Theme state](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/stores/themeStore.js): `VueMangoFusion/src/stores/themeStore.js`
- [HTTP client](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/api.js): `VueMangoFusion/src/services/api.js`
- [Authentication service](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/authService.js): `VueMangoFusion/src/services/authService.js`
- [Menu service](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/menuItemService.js): `VueMangoFusion/src/services/menuItemService.js`
- [Order service](https://github.com/bhrugen/vue_mango_fusion/blob/main/VueMangoFusion/src/services/orderService.js): `VueMangoFusion/src/services/orderService.js`

### Other components

- **Customer**
- **Administrator**

## Connections

- App shell → Navigation header: renders (evidence: `VueMangoFusion/src/App.vue`)
- App shell → Footer: renders (evidence: `VueMangoFusion/src/App.vue`)
- App shell → Route table: installs (evidence: `VueMangoFusion/src/main.js`)
- App shell → Authentication state: initializes (evidence: `VueMangoFusion/src/main.js`)
- App shell → Theme state: reads theme (evidence: `VueMangoFusion/src/main.js`)
- Route table → Access guards: registers (evidence: `VueMangoFusion/src/router/routes.js`)
- Access guards → Authentication state: checks access (evidence: `VueMangoFusion/src/router/guards.js`)
- Route table → Home menu: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Sign in: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Sign up: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Shopping cart: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Menu browsing: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Menu administration: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Order confirmation: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Order history: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Order management: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Access denied: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Route table → Not found: routes to (evidence: `VueMangoFusion/src/router/routes.js`)
- Navigation header → Authentication state: reads and updates (evidence: `VueMangoFusion/src/components/layout/Header.vue`)
- Navigation header → Cart state: reads count (evidence: `VueMangoFusion/src/components/layout/Header.vue`)
- Navigation header → Theme state: changes theme (evidence: `VueMangoFusion/src/components/layout/Header.vue`)
- Customer → Home menu: browses
- Administrator → Menu administration: maintains menu
- Menu item card → Cart state: updates cart (evidence: `VueMangoFusion/src/components/card/MenuItemCard.vue`)
- Menu item card → Item rating: renders (evidence: `VueMangoFusion/src/components/card/MenuItemCard.vue`)
- Order summary → Item rating: renders (evidence: `VueMangoFusion/src/components/card/OrderListCard.vue`)