# year4bigwin/e_store architecture

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

## Overview

SmartGear is a Vue storefront for electronics with customer shopping flows and an admin console. Customers browse and filter the catalog, inspect product details and reviews, manage a cart, and proceed to checkout; users can also authenticate and manage their profile. Admin routes cover dashboard reporting, products, orders, users, and storefront content. The graph includes SEO and shared state as internal layers. The README is empty, and several feature implementations are unsampled, so their internal connections are not inferred beyond indexed imports.

Main entry points: [`src/router/index.js`](https://github.com/year4bigwin/e_store/blob/main/src/router/index.js) (Route access), [`src/App.vue`](https://github.com/year4bigwin/e_store/blob/main/src/App.vue) (Route layout), [`src/views/user/ProductPage.vue`](https://github.com/year4bigwin/e_store/blob/main/src/views/user/ProductPage.vue) (Product catalog), [`src/views/user/ProductDetail.vue`](https://github.com/year4bigwin/e_store/blob/main/src/views/user/ProductDetail.vue) (Product details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_main["App startup<br/>[main.js]"]
  node_app_shell["Route layout<br/>[App.vue]"]
  node_router["Route access<br/>[index.js]"]
  node_navbar["Store navigation<br/>[NavBar.vue]"]
  node_footer["Store footer<br/>[Footer.vue]"]
end

subgraph group_shop["Customer shopping"]
  node_catalog["Product catalog<br/>[ProductPage.vue]"]
  node_search["Product search<br/>[SearchProduct.vue]"]
  node_product_detail["Product details<br/>[ProductDetail.vue]"]
  node_reviews["Product reviews<br/>[ReviewSection.vue]"]
  node_checkout["Checkout<br/>[Checkout.vue]"]
end

subgraph group_identity["Accounts and cart"]
  node_auth["Sign-in and signup<br/>[SignIn.vue]"]
  node_profile["Customer profile<br/>[Profile.vue]"]
  node_auth_state["Authentication state<br/>[authStore.js]"]
  node_cart_state["Cart state<br/>[cartStore.js]"]
  node_cart_view["Cart page<br/>[MyCart.vue]"]
end

subgraph group_admin["Admin console"]
  node_admin_dashboard["Sales dashboard<br/>[DashBoard.vue]"]
  node_admin_products["Product management<br/>[Product.vue]"]
  node_admin_orders["Order management<br/>[OderContent.vue]"]
  node_admin_users["User management<br/>[User.vue]"]
  node_admin_content["Storefront content<br/>[Other.vue]"]
  node_admin_sidebar["Admin navigation<br/>[AdminSideBar.vue]"]
end

subgraph group_shared["Shared services"]
  node_product_state["Product state<br/>[productStore.js]"]
  node_seo["SEO metadata<br/>[useSEO.js]"]
  node_structured_data["Structured data"]
  node_seo_plugin["SEO plugin<br/>[seo.js]"]
end

node_visitor(("Shopper"))
node_adminuser(("Administrator"))
node_backend{{"Store API"}}

node_main -->|"mounts"| node_app_shell
node_main -->|"installs"| node_router
node_main -->|"installs"| node_seo_plugin
node_app_shell -->|"renders routes"| node_router
node_app_shell -->|"renders"| node_navbar
node_app_shell -->|"renders"| node_footer
node_app_shell -->|"renders"| node_admin_sidebar
node_router -->|"routes to"| node_catalog
node_router -->|"routes to"| node_product_detail
node_router -->|"routes to"| node_cart_view
node_router -->|"routes to"| node_auth
node_router -->|"routes to"| node_admin_dashboard
node_router -->|"routes to"| node_admin_products
node_router -->|"routes to"| node_admin_orders
node_router -->|"routes to"| node_admin_users
node_router -->|"routes to"| node_admin_content
node_catalog -->|"reads and updates"| node_product_state
node_catalog -->|"sets metadata"| node_seo
node_catalog -->|"fetches catalog"| node_backend
node_search -->|"fetches results"| node_backend
node_search -.->|"opens products"| node_catalog
node_product_detail -->|"renders"| node_checkout
node_product_detail -->|"renders"| node_reviews
node_product_detail -->|"uses"| node_cart_state
node_reviews -->|"submits reviews"| node_backend
node_reviews -.->|"displays rating"| node_seo
node_cart_view -.->|"uses"| node_cart_state
node_cart_state -->|"reads and writes cart"| node_backend
node_auth -->|"updates"| node_auth_state
node_profile -->|"uses"| node_auth_state
node_auth_state -->|"fetches profile"| node_backend
node_admin_dashboard -->|"loads reports"| node_backend
node_admin_products -->|"uses"| node_product_state
node_admin_orders -->|"paginates"| node_admin_orders
node_admin_content -.->|"manages content"| node_backend
node_admin_sidebar -->|"checks access"| node_auth_state
node_seo_plugin -->|"uses"| node_seo
node_seo_plugin -->|"uses"| node_structured_data
node_seo -.->|"generates schemas"| node_structured_data
node_visitor -.->|"navigates"| node_router
node_adminuser -.->|"navigates"| node_router

click node_main "https://github.com/year4bigwin/e_store/blob/main/src/main.js"
click node_app_shell "https://github.com/year4bigwin/e_store/blob/main/src/App.vue"
click node_router "https://github.com/year4bigwin/e_store/blob/main/src/router/index.js"
click node_navbar "https://github.com/year4bigwin/e_store/blob/main/src/layout/NavBar.vue"
click node_footer "https://github.com/year4bigwin/e_store/blob/main/src/layout/Footer.vue"
click node_catalog "https://github.com/year4bigwin/e_store/blob/main/src/views/user/ProductPage.vue"
click node_search "https://github.com/year4bigwin/e_store/blob/main/src/components/SearchProduct.vue"
click node_product_detail "https://github.com/year4bigwin/e_store/blob/main/src/views/user/ProductDetail.vue"
click node_reviews "https://github.com/year4bigwin/e_store/blob/main/src/components/ProductDetail/ReviewSection.vue"
click node_checkout "https://github.com/year4bigwin/e_store/blob/main/src/components/CheckOut/Checkout.vue"
click node_auth "https://github.com/year4bigwin/e_store/blob/main/src/views/user/auth/SignIn.vue"
click node_profile "https://github.com/year4bigwin/e_store/blob/main/src/views/user/Profile.vue"
click node_auth_state "https://github.com/year4bigwin/e_store/blob/main/src/store/authStore.js"
click node_cart_state "https://github.com/year4bigwin/e_store/blob/main/src/store/cartStore.js"
click node_cart_view "https://github.com/year4bigwin/e_store/blob/main/src/views/user/MyCart.vue"
click node_admin_dashboard "https://github.com/year4bigwin/e_store/blob/main/src/views/admin/DashBoard.vue"
click node_admin_products "https://github.com/year4bigwin/e_store/blob/main/src/views/admin/Product.vue"
click node_admin_orders "https://github.com/year4bigwin/e_store/blob/main/src/components/Order/OderContent.vue"
click node_admin_users "https://github.com/year4bigwin/e_store/blob/main/src/views/admin/User.vue"
click node_admin_content "https://github.com/year4bigwin/e_store/blob/main/src/views/admin/Other.vue"
click node_admin_sidebar "https://github.com/year4bigwin/e_store/blob/main/src/layout/AdminSideBar.vue"
click node_product_state "https://github.com/year4bigwin/e_store/blob/main/src/store/productStore.js"
click node_seo "https://github.com/year4bigwin/e_store/blob/main/src/composable/useSEO.js"
click node_structured_data "https://github.com/year4bigwin/e_store/blob/main/src/composable/useStructuredData.js"
click node_seo_plugin "https://github.com/year4bigwin/e_store/blob/main/src/plugins/seo.js"

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_main,node_app_shell,node_router,node_navbar,node_footer toneBlue
class node_catalog,node_search,node_product_detail,node_reviews,node_checkout toneAmber
class node_auth,node_profile,node_auth_state,node_cart_state,node_cart_view,node_backend toneMint
class node_admin_dashboard,node_admin_products,node_admin_orders,node_admin_users,node_admin_content,node_admin_sidebar toneRose
class node_product_state,node_seo,node_structured_data,node_seo_plugin,node_visitor,node_adminuser toneIndigo
```

## Components

### Application shell

- [App startup](https://github.com/year4bigwin/e_store/blob/main/src/main.js): `src/main.js`
- [Route layout](https://github.com/year4bigwin/e_store/blob/main/src/App.vue): `src/App.vue`
- [Route access](https://github.com/year4bigwin/e_store/blob/main/src/router/index.js): `src/router/index.js`
- [Store navigation](https://github.com/year4bigwin/e_store/blob/main/src/layout/NavBar.vue): `src/layout/NavBar.vue`
- [Store footer](https://github.com/year4bigwin/e_store/blob/main/src/layout/Footer.vue): `src/layout/Footer.vue`

### Customer shopping

- [Product catalog](https://github.com/year4bigwin/e_store/blob/main/src/views/user/ProductPage.vue): `src/views/user/ProductPage.vue`
- [Product search](https://github.com/year4bigwin/e_store/blob/main/src/components/SearchProduct.vue): `src/components/SearchProduct.vue`
- [Product details](https://github.com/year4bigwin/e_store/blob/main/src/views/user/ProductDetail.vue): `src/views/user/ProductDetail.vue`
- [Product reviews](https://github.com/year4bigwin/e_store/blob/main/src/components/ProductDetail/ReviewSection.vue): `src/components/ProductDetail/ReviewSection.vue`
- [Checkout](https://github.com/year4bigwin/e_store/blob/main/src/components/CheckOut/Checkout.vue): `src/components/CheckOut/Checkout.vue`

### Accounts and cart

- [Sign-in and signup](https://github.com/year4bigwin/e_store/blob/main/src/views/user/auth/SignIn.vue): `src/views/user/auth/SignIn.vue`
- [Customer profile](https://github.com/year4bigwin/e_store/blob/main/src/views/user/Profile.vue): `src/views/user/Profile.vue`
- [Authentication state](https://github.com/year4bigwin/e_store/blob/main/src/store/authStore.js): `src/store/authStore.js`
- [Cart state](https://github.com/year4bigwin/e_store/blob/main/src/store/cartStore.js): `src/store/cartStore.js`
- [Cart page](https://github.com/year4bigwin/e_store/blob/main/src/views/user/MyCart.vue): `src/views/user/MyCart.vue`

### Admin console

- [Sales dashboard](https://github.com/year4bigwin/e_store/blob/main/src/views/admin/DashBoard.vue): `src/views/admin/DashBoard.vue`
- [Product management](https://github.com/year4bigwin/e_store/blob/main/src/views/admin/Product.vue): `src/views/admin/Product.vue`
- [Order management](https://github.com/year4bigwin/e_store/blob/main/src/components/Order/OderContent.vue): `src/components/Order/OderContent.vue`
- [User management](https://github.com/year4bigwin/e_store/blob/main/src/views/admin/User.vue): `src/views/admin/User.vue`
- [Storefront content](https://github.com/year4bigwin/e_store/blob/main/src/views/admin/Other.vue): `src/views/admin/Other.vue`
- [Admin navigation](https://github.com/year4bigwin/e_store/blob/main/src/layout/AdminSideBar.vue): `src/layout/AdminSideBar.vue`

### Shared services

- [Product state](https://github.com/year4bigwin/e_store/blob/main/src/store/productStore.js): `src/store/productStore.js`
- [SEO metadata](https://github.com/year4bigwin/e_store/blob/main/src/composable/useSEO.js): `src/composable/useSEO.js`
- [Structured data](https://github.com/year4bigwin/e_store/blob/main/src/composable/useStructuredData.js): `src/composable/useStructuredData.js`
- [SEO plugin](https://github.com/year4bigwin/e_store/blob/main/src/plugins/seo.js): `src/plugins/seo.js`

### Other components

- **Shopper**
- **Administrator**
- **Store API**

## Connections

- App startup → Route layout: mounts (evidence: `src/main.js`)
- App startup → Route access: installs (evidence: `src/main.js`)
- App startup → SEO plugin: installs (evidence: `src/main.js`)
- Route layout → Route access: renders routes (evidence: `src/App.vue`)
- Route layout → Store navigation: renders (evidence: `src/App.vue`)
- Route layout → Store footer: renders (evidence: `src/App.vue`)
- Route layout → Admin navigation: renders (evidence: `src/App.vue`)
- Route access → Product catalog: routes to (evidence: `src/router/index.js`)
- Route access → Product details: routes to (evidence: `src/router/index.js`)
- Route access → Cart page: routes to (evidence: `src/router/index.js`)
- Route access → Sign-in and signup: routes to (evidence: `src/router/index.js`)
- Route access → Sales dashboard: routes to (evidence: `src/router/index.js`)
- Route access → Product management: routes to (evidence: `src/router/index.js`)
- Route access → Order management: routes to (evidence: `src/router/index.js`)
- Route access → User management: routes to (evidence: `src/router/index.js`)
- Route access → Storefront content: routes to (evidence: `src/router/index.js`)
- Product catalog → Product state: reads and updates (evidence: `src/views/user/ProductPage.vue`)
- Product catalog → SEO metadata: sets metadata (evidence: `src/views/user/ProductPage.vue`)
- Product catalog → Store API: fetches catalog (evidence: `src/views/user/ProductPage.vue`)
- Product search → Store API: fetches results (evidence: `src/components/SearchProduct.vue`)
- Product search → Product catalog: opens products
- Product details → Checkout: renders (evidence: `src/views/user/ProductDetail.vue`)
- Product details → Product reviews: renders (evidence: `src/views/user/ProductDetail.vue`)
- Product details → Cart state: uses (evidence: `src/views/user/ProductDetail.vue`)
- Product reviews → Store API: submits reviews (evidence: `src/components/ProductDetail/ReviewSection.vue`)
- Product reviews → SEO metadata: displays rating
- Cart page → Cart state: uses
- Cart state → Store API: reads and writes cart (evidence: `src/store/cartStore.js`)
- Sign-in and signup → Authentication state: updates (evidence: `src/views/user/auth/SignIn.vue`)
- Customer profile → Authentication state: uses (evidence: `src/views/user/Profile.vue`)
- Authentication state → Store API: fetches profile (evidence: `src/store/authStore.js`)
- Sales dashboard → Store API: loads reports (evidence: `src/views/admin/DashBoard.vue`)
- Product management → Product state: uses (evidence: `src/views/admin/Product.vue`)
- Order management → Order management: paginates (evidence: `src/components/Order/OderContent.vue`)
- Storefront content → Store API: manages content
- Admin navigation → Authentication state: checks access (evidence: `src/layout/AdminSideBar.vue`)
- SEO plugin → SEO metadata: uses (evidence: `src/plugins/seo.js`)
- SEO plugin → Structured data: uses (evidence: `src/plugins/seo.js`)
- SEO metadata → Structured data: generates schemas
- Shopper → Route access: navigates
- Administrator → Route access: navigates