# ega-septian/web-testing architecture

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

- Interactive diagram: https://gitdiagram.com/ega-septian/web-testing
- Repository: https://github.com/ega-septian/web-testing

## Overview

TestStore is a clothing storefront with a Vue client and Go API. The customer workflow runs from browsing/filtering the catalog through product details and a local cart to authenticated checkout, then order history and detail. The backend also supports account registration/login, product and image administration, sales recording, and reusable site assets. The tree and sampled source show the main wiring and several handler/repository interactions; unsampled view and repository internals limit some finer-grained links.

Main entry points: [`frontend/src/router/index.js`](https://github.com/ega-septian/web-testing/blob/main/frontend/src/router/index.js) (Route access), [`backend/cmd/api/main.go`](https://github.com/ega-septian/web-testing/blob/main/backend/cmd/api/main.go) (HTTP API), [`frontend/src/lib/api.js`](https://github.com/ega-septian/web-testing/blob/main/frontend/src/lib/api.js) (API client), [`backend/internal/handlers/catalog_handler.go`](https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/catalog_handler.go) (Catalog endpoints)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Storefront client"]
  node_app["Vue app<br/>[App.vue]"]
  node_router["Route access<br/>[index.js]"]
  node_home["Home discovery<br/>[HomeView.vue]"]
  node_shop["Shop browsing<br/>[ShopView.vue]"]
  node_product["Product detail"]
  node_cartview["Cart view<br/>[CartView.vue]"]
  node_checkoutview["Checkout<br/>[CheckoutView.vue]"]
  node_ordersview["Order views"]
  node_loginview["Login view<br/>[LoginView.vue]"]
  node_cartstore["Cart state<br/>[cart.js]"]
  node_authstore["Auth state<br/>[auth.js]"]
  node_apiclient["API client<br/>[api.js]"]
end

subgraph group_api["API runtime"]
  node_server["HTTP API<br/>[main.go]"]
end

subgraph group_commerce["Catalog and orders"]
  node_cataloghandler["Catalog endpoints<br/>[catalog_handler.go]"]
  node_products["Product repository<br/>[product_repo.go]"]
  node_sizes["Size repository"]
  node_images["Product image repository"]
  node_sales["Sales repository<br/>[sale_repo.go]"]
  node_orderhandler["Order endpoints<br/>[order_handler.go]"]
  node_orders["Order repository<br/>[order_repo.go]"]
end

subgraph group_identity["Identity and media"]
  node_authhandler["Auth endpoints<br/>[auth_handler.go]"]
  node_middleware["Auth middleware<br/>[middleware.go]"]
  node_tokens["JWT manager<br/>[jwt.go]"]
  node_users["User repository<br/>[user_repo.go]"]
  node_assethandler["Asset endpoints<br/>[asset_handler.go]"]
  node_assets["Asset repository<br/>[asset_repo.go]"]
end

subgraph group_storage["Persistence"]
  node_postgres[("PostgreSQL")]
  node_uploads[("Uploaded files")]
end

node_shopper(("Shopper"))

node_shopper -->|"navigates"| node_router
node_app -->|"renders routes"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_shop
node_router -->|"routes to"| node_product
node_router -->|"routes to"| node_cartview
node_router -->|"routes to"| node_checkoutview
node_router -->|"routes to"| node_ordersview
node_router -->|"routes to"| node_loginview
node_home -->|"requests catalog/assets"| node_apiclient
node_shop -->|"requests catalog"| node_apiclient
node_product -->|"requests product"| node_apiclient
node_cartview -->|"updates cart"| node_cartstore
node_checkoutview -->|"reads cart"| node_cartstore
node_checkoutview -->|"places order"| node_apiclient
node_ordersview -->|"requests orders"| node_apiclient
node_loginview -->|"submits credentials"| node_authstore
node_authstore -->|"auth requests"| node_apiclient
node_apiclient -->|"HTTP requests"| node_server
node_server -->|"dispatches auth"| node_authhandler
node_server -->|"dispatches catalog"| node_cataloghandler
node_server -->|"dispatches orders"| node_orderhandler
node_server -->|"dispatches assets"| node_assethandler
node_server -->|"protects routes"| node_middleware
node_middleware -->|"validates token"| node_tokens
node_authhandler -->|"reads/writes users"| node_users
node_authhandler -->|"issues tokens"| node_tokens
node_cataloghandler -->|"catalog operations"| node_products
node_cataloghandler -->|"reads sizes"| node_sizes
node_cataloghandler -->|"reads/writes images"| node_images
node_cataloghandler -->|"records sales"| node_sales
node_cataloghandler -->|"writes product files"| node_uploads
node_orderhandler -->|"places/reads orders"| node_orders
node_assethandler -->|"reads/writes metadata"| node_assets
node_assethandler -->|"writes/removes files"| node_uploads
node_server -->|"serves uploads"| node_uploads
node_users -->|"queries"| node_postgres
node_products -->|"queries"| node_postgres
node_sizes -->|"queries"| node_postgres
node_images -->|"queries"| node_postgres
node_sales -->|"queries"| node_postgres
node_orders -->|"queries"| node_postgres
node_assets -->|"queries"| node_postgres

click node_app "https://github.com/ega-septian/web-testing/blob/main/frontend/src/App.vue"
click node_router "https://github.com/ega-septian/web-testing/blob/main/frontend/src/router/index.js"
click node_home "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/HomeView.vue"
click node_shop "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/ShopView.vue"
click node_product "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/ProductDetailView.vue"
click node_cartview "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/CartView.vue"
click node_checkoutview "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/CheckoutView.vue"
click node_ordersview "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/OrderHistoryView.vue"
click node_loginview "https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/LoginView.vue"
click node_cartstore "https://github.com/ega-septian/web-testing/blob/main/frontend/src/stores/cart.js"
click node_authstore "https://github.com/ega-septian/web-testing/blob/main/frontend/src/stores/auth.js"
click node_apiclient "https://github.com/ega-septian/web-testing/blob/main/frontend/src/lib/api.js"
click node_server "https://github.com/ega-septian/web-testing/blob/main/backend/cmd/api/main.go"
click node_authhandler "https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/auth_handler.go"
click node_middleware "https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/middleware.go"
click node_tokens "https://github.com/ega-septian/web-testing/blob/main/backend/internal/auth/jwt.go"
click node_users "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/user_repo.go"
click node_cataloghandler "https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/catalog_handler.go"
click node_products "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/product_repo.go"
click node_sizes "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/product_size_repo.go"
click node_images "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/product_image_repo.go"
click node_sales "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/sale_repo.go"
click node_orderhandler "https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/order_handler.go"
click node_orders "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/order_repo.go"
click node_assethandler "https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/asset_handler.go"
click node_assets "https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/asset_repo.go"

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_router,node_home,node_shop,node_product,node_cartview,node_checkoutview,node_ordersview,node_loginview,node_cartstore,node_authstore,node_apiclient toneBlue
class node_server toneAmber
class node_cataloghandler,node_products,node_sizes,node_images,node_sales,node_orderhandler,node_orders toneMint
class node_authhandler,node_middleware,node_tokens,node_users,node_assethandler,node_assets toneRose
class node_postgres,node_uploads,node_shopper toneIndigo
```

## Components

### Storefront client

- [Vue app](https://github.com/ega-septian/web-testing/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Route access](https://github.com/ega-septian/web-testing/blob/main/frontend/src/router/index.js): `frontend/src/router/index.js`
- [Home discovery](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/HomeView.vue): `frontend/src/views/HomeView.vue`
- [Shop browsing](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/ShopView.vue): `frontend/src/views/ShopView.vue`
- [Product detail](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/ProductDetailView.vue): `frontend/src/views/ProductDetailView.vue`
- [Cart view](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/CartView.vue): `frontend/src/views/CartView.vue`
- [Checkout](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/CheckoutView.vue): `frontend/src/views/CheckoutView.vue`
- [Order views](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/OrderHistoryView.vue): `frontend/src/views/OrderHistoryView.vue`
- [Login view](https://github.com/ega-septian/web-testing/blob/main/frontend/src/views/LoginView.vue): `frontend/src/views/LoginView.vue`
- [Cart state](https://github.com/ega-septian/web-testing/blob/main/frontend/src/stores/cart.js): `frontend/src/stores/cart.js`
- [Auth state](https://github.com/ega-septian/web-testing/blob/main/frontend/src/stores/auth.js): `frontend/src/stores/auth.js`
- [API client](https://github.com/ega-septian/web-testing/blob/main/frontend/src/lib/api.js): `frontend/src/lib/api.js`

### API runtime

- [HTTP API](https://github.com/ega-septian/web-testing/blob/main/backend/cmd/api/main.go): `backend/cmd/api/main.go`

### Catalog and orders

- [Catalog endpoints](https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/catalog_handler.go): `backend/internal/handlers/catalog_handler.go`
- [Product repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/product_repo.go): `backend/internal/models/product_repo.go`
- [Size repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/product_size_repo.go): `backend/internal/models/product_size_repo.go`
- [Product image repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/product_image_repo.go): `backend/internal/models/product_image_repo.go`
- [Sales repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/sale_repo.go): `backend/internal/models/sale_repo.go`
- [Order endpoints](https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/order_handler.go): `backend/internal/handlers/order_handler.go`
- [Order repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/order_repo.go): `backend/internal/models/order_repo.go`

### Identity and media

- [Auth endpoints](https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/auth_handler.go): `backend/internal/handlers/auth_handler.go`
- [Auth middleware](https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/middleware.go): `backend/internal/handlers/middleware.go`
- [JWT manager](https://github.com/ega-septian/web-testing/blob/main/backend/internal/auth/jwt.go): `backend/internal/auth/jwt.go`
- [User repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/user_repo.go): `backend/internal/models/user_repo.go`
- [Asset endpoints](https://github.com/ega-septian/web-testing/blob/main/backend/internal/handlers/asset_handler.go): `backend/internal/handlers/asset_handler.go`
- [Asset repository](https://github.com/ega-septian/web-testing/blob/main/backend/internal/models/asset_repo.go): `backend/internal/models/asset_repo.go`

### Persistence

- **PostgreSQL**
- **Uploaded files**

### Other components

- **Shopper**

## Connections

- Shopper → Route access: navigates
- Vue app → Route access: renders routes
- Route access → Home discovery: routes to
- Route access → Shop browsing: routes to
- Route access → Product detail: routes to
- Route access → Cart view: routes to
- Route access → Checkout: routes to
- Route access → Order views: routes to
- Route access → Login view: routes to
- Home discovery → API client: requests catalog/assets
- Shop browsing → API client: requests catalog
- Product detail → API client: requests product
- Cart view → Cart state: updates cart
- Checkout → Cart state: reads cart
- Checkout → API client: places order
- Order views → API client: requests orders
- Login view → Auth state: submits credentials
- Auth state → API client: auth requests
- API client → HTTP API: HTTP requests
- HTTP API → Auth endpoints: dispatches auth
- HTTP API → Catalog endpoints: dispatches catalog
- HTTP API → Order endpoints: dispatches orders
- HTTP API → Asset endpoints: dispatches assets
- HTTP API → Auth middleware: protects routes
- Auth middleware → JWT manager: validates token
- Auth endpoints → User repository: reads/writes users
- Auth endpoints → JWT manager: issues tokens
- Catalog endpoints → Product repository: catalog operations
- Catalog endpoints → Size repository: reads sizes
- Catalog endpoints → Product image repository: reads/writes images
- Catalog endpoints → Sales repository: records sales
- Catalog endpoints → Uploaded files: writes product files
- Order endpoints → Order repository: places/reads orders
- Asset endpoints → Asset repository: reads/writes metadata
- Asset endpoints → Uploaded files: writes/removes files
- HTTP API → Uploaded files: serves uploads
- User repository → PostgreSQL: queries
- Product repository → PostgreSQL: queries
- Size repository → PostgreSQL: queries
- Product image repository → PostgreSQL: queries
- Sales repository → PostgreSQL: queries
- Order repository → PostgreSQL: queries
- Asset repository → PostgreSQL: queries