How bhrugen/vue_mango_fusion works
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: routes.js Route table · App.vue App shell · Header.vue Navigation header · authStore.js Authentication state
Components 31
Application shell
- App shell
VueMangoFusion/src/App.vue - Navigation header
VueMangoFusion/src/components/layout/Header.vue - Footer
VueMangoFusion/src/components/layout/Footer.vue - Route table
VueMangoFusion/src/router/routes.js - Access guards
VueMangoFusion/src/router/guards.js - Access denied
VueMangoFusion/src/views/auth/NoAccess.vue - Not found
VueMangoFusion/src/views/auth/NotFound.vue
Customer ordering
- Home menu
VueMangoFusion/src/views/home/Home.vue - Menu browsing
VueMangoFusion/src/views/menu-item/MenuItemList.vue - Menu item card
VueMangoFusion/src/components/card/MenuItemCard.vue - Item details
VueMangoFusion/src/components/modals/MenuItemDetailsModal.vue - Item rating
VueMangoFusion/src/components/shared/Rating.vue - Shopping cart
VueMangoFusion/src/views/cart/ShoppingCart.vue - Place order
VueMangoFusion/src/components/modals/PlaceOrderModal.vue - Order confirmation
VueMangoFusion/src/views/order/OrderConfirmation.vue - Order history
VueMangoFusion/src/views/order/OrderHistoryList.vue - Order summary
VueMangoFusion/src/components/card/OrderListCard.vue - Order details
VueMangoFusion/src/components/modals/OrderDetailsModal.vue - Sign in
VueMangoFusion/src/views/auth/SignIn.vue - Sign up
VueMangoFusion/src/views/auth/SignUp.vue
Admin operations
- Menu administration
VueMangoFusion/src/views/menu-item/MenuItemUpsert.vue - Order management
VueMangoFusion/src/views/order/OrderManagement.vue
State and services
- Cart state
VueMangoFusion/src/stores/cartStore.js - Authentication state
VueMangoFusion/src/stores/authStore.js - Theme state
VueMangoFusion/src/stores/themeStore.js - HTTP client
VueMangoFusion/src/services/api.js - Authentication service
VueMangoFusion/src/services/authService.js - Menu service
VueMangoFusion/src/services/menuItemService.js - Order service
VueMangoFusion/src/services/orderService.js
Other components
- Customer
- Administrator
Connections 26
- App shell → Navigation header: renders
VueMangoFusion/src/App.vue - App shell → Footer: renders
VueMangoFusion/src/App.vue - App shell → Route table: installs
VueMangoFusion/src/main.js - App shell → Authentication state: initializes
VueMangoFusion/src/main.js - App shell → Theme state: reads theme
VueMangoFusion/src/main.js - Route table → Access guards: registers
VueMangoFusion/src/router/routes.js - Access guards → Authentication state: checks access
VueMangoFusion/src/router/guards.js - Route table → Home menu: routes to
VueMangoFusion/src/router/routes.js - Route table → Sign in: routes to
VueMangoFusion/src/router/routes.js - Route table → Sign up: routes to
VueMangoFusion/src/router/routes.js - Route table → Shopping cart: routes to
VueMangoFusion/src/router/routes.js - Route table → Menu browsing: routes to
VueMangoFusion/src/router/routes.js - Route table → Menu administration: routes to
VueMangoFusion/src/router/routes.js - Route table → Order confirmation: routes to
VueMangoFusion/src/router/routes.js - Route table → Order history: routes to
VueMangoFusion/src/router/routes.js - Route table → Order management: routes to
VueMangoFusion/src/router/routes.js - Route table → Access denied: routes to
VueMangoFusion/src/router/routes.js - Route table → Not found: routes to
VueMangoFusion/src/router/routes.js - Navigation header → Authentication state: reads and updates
VueMangoFusion/src/components/layout/Header.vue - Navigation header → Cart state: reads count
VueMangoFusion/src/components/layout/Header.vue - Navigation header → Theme state: changes theme
VueMangoFusion/src/components/layout/Header.vue - Customer → Home menu: browses
- Administrator → Menu administration: maintains menu
- Menu item card → Cart state: updates cart
VueMangoFusion/src/components/card/MenuItemCard.vue - Menu item card → Item rating: renders
VueMangoFusion/src/components/card/MenuItemCard.vue - Order summary → Item rating: renders
VueMangoFusion/src/components/card/OrderListCard.vue