# dau-binh2451220028/du-an-demo architecture

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

- Interactive diagram: https://gitdiagram.com/dau-binh2451220028/du-an-demo
- Repository: https://github.com/dau-binh2451220028/du-an-demo

## Overview

This is a Vue storefront for browsing Bình Fashion products, managing a wishlist and cart, and completing a customer checkout flow. The sampled App.vue shows catalog search, filters, sorting, promotions, and the main product/detail/cart/checkout entry points; composables provide local browser persistence for account, cart, and wishlist state. The tree also includes chatbot, authentication, and order-success UI capabilities, but their full wiring and checkout/order implementation were not sampled, so uncertain links are omitted.

Main entry points: [`src/App.vue`](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/App.vue) (Storefront App), [`src/components/Navbar.vue`](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/Navbar.vue) (Navigation), [`src/composables/useCart.ts`](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useCart.ts) (Cart State), [`src/components/AuthModal.vue`](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/AuthModal.vue) (Authentication Modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["Storefront App<br/>[App.vue]"]
  node_navbar["Navigation<br/>[Navbar.vue]"]
  node_hero["Hero Banner<br/>[HeroBanner.vue]"]
  node_footer["Store Footer<br/>[Footer.vue]"]
end

subgraph group_shopping["Shopping"]
  node_catalog["Catalog Filters<br/>[ProductFilter.vue]"]
  node_products["Product Data<br/>[products.ts]"]
  node_productcard["Product Cards<br/>[ProductCard.vue]"]
  node_quickview["Product Quick View"]
  node_cartui["Cart Drawer<br/>[CartDrawer.vue]"]
  node_cartstate["Cart State<br/>[useCart.ts]"]
  node_browserstorage[("Browser Storage")]
  node_checkout["Checkout Form<br/>[CheckoutModal.vue]"]
  node_success["Order Success"]
  node_wishlistui["Wishlist Modal<br/>[WishlistModal.vue]"]
  node_wishliststate["Wishlist State<br/>[useWishlist.ts]"]
end

subgraph group_account["Account"]
  node_authui["Authentication Modal<br/>[AuthModal.vue]"]
  node_authstate["Authentication State<br/>[useAuth.ts]"]
end

subgraph group_support["Support"]
  node_chat["Shopping Chatbot<br/>[ChatBot.vue]"]
  node_toast["Toast Notifications"]
  node_toaststate["Toast State<br/>[useToast.ts]"]
end

node_shopper(("Shopper"))

node_shopper -->|"uses storefront"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_catalog
node_app -->|"reads catalog"| node_products
node_app -->|"renders products"| node_productcard
node_productcard -->|"opens details"| node_quickview
node_app -->|"controls detail view"| node_quickview
node_navbar -->|"opens cart"| node_cartstate
node_cartui -->|"reads and updates"| node_cartstate
node_cartstate -->|"reads vouchers"| node_products
node_cartstate -->|"persists cart"| node_browserstorage
node_app -->|"renders"| node_cartui
node_app -->|"renders checkout"| node_checkout
node_navbar -->|"reads count"| node_wishliststate
node_app -->|"controls modal"| node_wishlistui
node_wishlistui -->|"reads and updates"| node_wishliststate
node_wishliststate -->|"persists wishlist"| node_browserstorage
node_navbar -->|"opens sign in"| node_authui
node_authui -->|"authenticates"| node_authstate
node_authstate -->|"persists account"| node_browserstorage
node_app -->|"renders"| node_chat
node_chat -->|"recommends products"| node_products
node_chat -->|"requests quick view"| node_quickview
node_app -->|"renders"| node_toast
node_authui -->|"shows feedback"| node_toaststate
node_navbar -->|"shows feedback"| node_toaststate
node_toast -->|"reads and dismisses"| node_toaststate
node_app -->|"renders"| node_footer

click node_app "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/App.vue"
click node_navbar "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/Navbar.vue"
click node_hero "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/HeroBanner.vue"
click node_catalog "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ProductFilter.vue"
click node_products "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/data/products.ts"
click node_productcard "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ProductCard.vue"
click node_quickview "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ProductQuickView.vue"
click node_cartui "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/CartDrawer.vue"
click node_cartstate "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useCart.ts"
click node_checkout "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/CheckoutModal.vue"
click node_success "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/OrderSuccessModal.vue"
click node_wishlistui "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/WishlistModal.vue"
click node_wishliststate "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useWishlist.ts"
click node_authui "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/AuthModal.vue"
click node_authstate "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useAuth.ts"
click node_chat "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ChatBot.vue"
click node_toast "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ToastNotification.vue"
click node_toaststate "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useToast.ts"
click node_footer "https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/Footer.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_navbar,node_hero,node_footer toneBlue
class node_catalog,node_products,node_productcard,node_quickview,node_cartui,node_cartstate,node_browserstorage,node_checkout,node_success,node_wishlistui,node_wishliststate toneAmber
class node_authui,node_authstate toneMint
class node_chat,node_toast,node_toaststate toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [Storefront App](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/App.vue): `src/App.vue`
- [Navigation](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/Navbar.vue): `src/components/Navbar.vue`
- [Hero Banner](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/HeroBanner.vue): `src/components/HeroBanner.vue`
- [Store Footer](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/Footer.vue): `src/components/Footer.vue`

### Shopping

- [Catalog Filters](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ProductFilter.vue): `src/components/ProductFilter.vue`
- [Product Data](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/data/products.ts): `src/data/products.ts`
- [Product Cards](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ProductCard.vue): `src/components/ProductCard.vue`
- [Product Quick View](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ProductQuickView.vue): `src/components/ProductQuickView.vue`
- [Cart Drawer](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/CartDrawer.vue): `src/components/CartDrawer.vue`
- [Cart State](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useCart.ts): `src/composables/useCart.ts`
- **Browser Storage**
- [Checkout Form](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/CheckoutModal.vue): `src/components/CheckoutModal.vue`
- [Order Success](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/OrderSuccessModal.vue): `src/components/OrderSuccessModal.vue`
- [Wishlist Modal](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/WishlistModal.vue): `src/components/WishlistModal.vue`
- [Wishlist State](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useWishlist.ts): `src/composables/useWishlist.ts`

### Account

- [Authentication Modal](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/AuthModal.vue): `src/components/AuthModal.vue`
- [Authentication State](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useAuth.ts): `src/composables/useAuth.ts`

### Support

- [Shopping Chatbot](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ChatBot.vue): `src/components/ChatBot.vue`
- [Toast Notifications](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/components/ToastNotification.vue): `src/components/ToastNotification.vue`
- [Toast State](https://github.com/dau-binh2451220028/du-an-demo/blob/main/src/composables/useToast.ts): `src/composables/useToast.ts`

### Other components

- **Shopper**

## Connections

- Shopper → Storefront App: uses storefront
- Storefront App → Navigation: renders
- Storefront App → Hero Banner: renders
- Storefront App → Catalog Filters: renders
- Storefront App → Product Data: reads catalog
- Storefront App → Product Cards: renders products
- Product Cards → Product Quick View: opens details
- Storefront App → Product Quick View: controls detail view
- Navigation → Cart State: opens cart
- Cart Drawer → Cart State: reads and updates
- Cart State → Product Data: reads vouchers
- Cart State → Browser Storage: persists cart
- Storefront App → Cart Drawer: renders
- Storefront App → Checkout Form: renders checkout
- Navigation → Wishlist State: reads count
- Storefront App → Wishlist Modal: controls modal
- Wishlist Modal → Wishlist State: reads and updates
- Wishlist State → Browser Storage: persists wishlist
- Navigation → Authentication Modal: opens sign in
- Authentication Modal → Authentication State: authenticates
- Authentication State → Browser Storage: persists account
- Storefront App → Shopping Chatbot: renders
- Shopping Chatbot → Product Data: recommends products
- Shopping Chatbot → Product Quick View: requests quick view
- Storefront App → Toast Notifications: renders
- Authentication Modal → Toast State: shows feedback
- Navigation → Toast State: shows feedback
- Toast Notifications → Toast State: reads and dismisses
- Storefront App → Store Footer: renders