How dau-binh2451220028/du-an-demo works
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: App.vue Storefront App · Navbar.vue Navigation · useCart.ts Cart State · AuthModal.vue Authentication Modal
Components 21
Storefront
- Storefront App
src/App.vue - Navigation
src/components/Navbar.vue - Hero Banner
src/components/HeroBanner.vue - Store Footer
src/components/Footer.vue
Shopping
- Catalog Filters
src/components/ProductFilter.vue - Product Data
src/data/products.ts - Product Cards
src/components/ProductCard.vue - Product Quick View
src/components/ProductQuickView.vue - Cart Drawer
src/components/CartDrawer.vue - Cart State
src/composables/useCart.ts - Browser Storage
- Checkout Form
src/components/CheckoutModal.vue - Order Success
src/components/OrderSuccessModal.vue - Wishlist Modal
src/components/WishlistModal.vue - Wishlist State
src/composables/useWishlist.ts
Account
- Authentication Modal
src/components/AuthModal.vue - Authentication State
src/composables/useAuth.ts
Support
- Shopping Chatbot
src/components/ChatBot.vue - Toast Notifications
src/components/ToastNotification.vue - Toast State
src/composables/useToast.ts
Other components
- Shopper
Connections 29
- 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