# william-cohen/top-hats architecture

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

- Interactive diagram: https://gitdiagram.com/william-cohen/top-hats
- Repository: https://github.com/william-cohen/top-hats

## Overview

Will-commerce is a Vue storefront with product browsing, account access, a cart, and a staged checkout. The main user flow is browsing products, adding items to a cart, then progressing through cart, delivery, payment, and order confirmation; checkout is route-guarded by session state. The session store implements sign-in, registration, and order submission through the backend API. The tree also includes PHP endpoints and cryptographic code. Some feature wiring and API behavior are unsampled, so uncertain links are omitted.

Main entry points: [`src/components/checkout/CheckoutPage.vue`](https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/CheckoutPage.vue) (Checkout flow), [`src/router/index.ts`](https://github.com/william-cohen/top-hats/blob/master/src/router/index.ts) (Route navigation), [`src/store/session.ts`](https://github.com/william-cohen/top-hats/blob/master/src/store/session.ts) (Session state), [`src/views/product`](https://github.com/william-cohen/top-hats/tree/master/src/views/product) (Product views)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Storefront shell"]
  node_app["Application shell<br/>[App.vue]"]
  node_router["Route navigation<br/>[index.ts]"]
end

subgraph group_catalog["Product catalog"]
  node_home["Home page<br/>[HomePage.vue]"]
  node_productview["Product views"]
  node_browse["Browse products<br/>[BrowseProducts.vue]"]
  node_productinfo["Product details"]
  node_filters["Product filters<br/>[ProductFilters.vue]"]
  node_products["Product state<br/>[products.ts]"]
end

subgraph group_account["Account and sessions"]
  node_sessionui["Login and signup<br/>[SessionPage.vue]"]
  node_session["Session state<br/>[session.ts]"]
  node_crypto["Credential crypto<br/>[DES.ts]"]
end

subgraph group_purchase["Cart and checkout"]
  node_cartui["Cart interface<br/>[CartDrawer.vue]"]
  node_cartstate["Cart state<br/>[cart.ts]"]
  node_checkout["Checkout flow<br/>[CheckoutPage.vue]"]
  node_cartstep["Cart step<br/>[CartStep.vue]"]
  node_delivery["Delivery step<br/>[DeliveryStep.vue]"]
  node_payment["Payment step<br/>[PaymentStep.vue]"]
  node_processed["Order confirmation<br/>[ProcessedStep.vue]"]
end

subgraph group_server["Backend services"]
  node_api["Backend API client<br/>[backend.ts]"]
  node_php["PHP endpoints"]
end

node_customer(("Shopper"))
node_service["Commerce backend"]

node_customer -->|"uses"| node_app
node_app -->|"hosts routes"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_productview
node_productview -->|"renders"| node_browse
node_productview -->|"renders"| node_productinfo
node_browse -->|"offers filters"| node_filters
node_browse -->|"reads products"| node_products
node_productview -->|"fetches products"| node_products
node_customer -->|"manages cart"| node_cartui
node_cartui -->|"updates"| node_cartstate
node_router -->|"routes to"| node_checkout
node_checkout -->|"selects step"| node_cartstep
node_checkout -->|"selects step"| node_delivery
node_checkout -->|"selects step"| node_payment
node_checkout -->|"selects step"| node_processed
node_checkout -->|"clears cart"| node_cartstate
node_customer -->|"enters credentials"| node_sessionui
node_sessionui -->|"calls login"| node_session
node_session -->|"encrypts credentials"| node_crypto
node_session -->|"sends requests"| node_api
node_session -->|"reads cart"| node_cartstate
node_api -->|"posts requests"| node_php
node_php -->|"accesses services"| node_service
node_router -->|"checks access"| node_session

click node_app "https://github.com/william-cohen/top-hats/blob/master/src/App.vue"
click node_router "https://github.com/william-cohen/top-hats/blob/master/src/router/index.ts"
click node_home "https://github.com/william-cohen/top-hats/blob/master/src/components/home/HomePage.vue"
click node_productview "https://github.com/william-cohen/top-hats/tree/master/src/views/product"
click node_browse "https://github.com/william-cohen/top-hats/blob/master/src/components/products/BrowseProducts.vue"
click node_productinfo "https://github.com/william-cohen/top-hats/blob/master/src/components/products/ProductInfoPage.vue"
click node_filters "https://github.com/william-cohen/top-hats/blob/master/src/components/products/filters/ProductFilters.vue"
click node_products "https://github.com/william-cohen/top-hats/blob/master/src/store/products.ts"
click node_cartui "https://github.com/william-cohen/top-hats/blob/master/src/components/cart/CartDrawer.vue"
click node_cartstate "https://github.com/william-cohen/top-hats/blob/master/src/store/cart.ts"
click node_checkout "https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/CheckoutPage.vue"
click node_cartstep "https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/CartStep.vue"
click node_delivery "https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/DeliveryStep.vue"
click node_payment "https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/PaymentStep.vue"
click node_processed "https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/ProcessedStep.vue"
click node_sessionui "https://github.com/william-cohen/top-hats/blob/master/src/components/session/SessionPage.vue"
click node_session "https://github.com/william-cohen/top-hats/blob/master/src/store/session.ts"
click node_crypto "https://github.com/william-cohen/top-hats/blob/master/src/crypto/DES.ts"
click node_api "https://github.com/william-cohen/top-hats/blob/master/src/api/backend.ts"
click node_php "https://github.com/william-cohen/top-hats/tree/master/src/backend"

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 toneBlue
class node_home,node_productview,node_browse,node_productinfo,node_filters,node_products toneAmber
class node_sessionui,node_session,node_crypto toneMint
class node_cartui,node_cartstate,node_checkout,node_cartstep,node_delivery,node_payment,node_processed toneRose
class node_api,node_php,node_customer,node_service toneIndigo
```

## Components

### Storefront shell

- [Application shell](https://github.com/william-cohen/top-hats/blob/master/src/App.vue): `src/App.vue`
- [Route navigation](https://github.com/william-cohen/top-hats/blob/master/src/router/index.ts): `src/router/index.ts`

### Product catalog

- [Home page](https://github.com/william-cohen/top-hats/blob/master/src/components/home/HomePage.vue): `src/components/home/HomePage.vue`
- [Product views](https://github.com/william-cohen/top-hats/tree/master/src/views/product): `src/views/product`
- [Browse products](https://github.com/william-cohen/top-hats/blob/master/src/components/products/BrowseProducts.vue): `src/components/products/BrowseProducts.vue`
- [Product details](https://github.com/william-cohen/top-hats/blob/master/src/components/products/ProductInfoPage.vue): `src/components/products/ProductInfoPage.vue`
- [Product filters](https://github.com/william-cohen/top-hats/blob/master/src/components/products/filters/ProductFilters.vue): `src/components/products/filters/ProductFilters.vue`
- [Product state](https://github.com/william-cohen/top-hats/blob/master/src/store/products.ts): `src/store/products.ts`

### Account and sessions

- [Login and signup](https://github.com/william-cohen/top-hats/blob/master/src/components/session/SessionPage.vue): `src/components/session/SessionPage.vue`
- [Session state](https://github.com/william-cohen/top-hats/blob/master/src/store/session.ts): `src/store/session.ts`
- [Credential crypto](https://github.com/william-cohen/top-hats/blob/master/src/crypto/DES.ts): `src/crypto/DES.ts`

### Cart and checkout

- [Cart interface](https://github.com/william-cohen/top-hats/blob/master/src/components/cart/CartDrawer.vue): `src/components/cart/CartDrawer.vue`
- [Cart state](https://github.com/william-cohen/top-hats/blob/master/src/store/cart.ts): `src/store/cart.ts`
- [Checkout flow](https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/CheckoutPage.vue): `src/components/checkout/CheckoutPage.vue`
- [Cart step](https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/CartStep.vue): `src/components/checkout/steps/CartStep.vue`
- [Delivery step](https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/DeliveryStep.vue): `src/components/checkout/steps/DeliveryStep.vue`
- [Payment step](https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/PaymentStep.vue): `src/components/checkout/steps/PaymentStep.vue`
- [Order confirmation](https://github.com/william-cohen/top-hats/blob/master/src/components/checkout/steps/ProcessedStep.vue): `src/components/checkout/steps/ProcessedStep.vue`

### Backend services

- [Backend API client](https://github.com/william-cohen/top-hats/blob/master/src/api/backend.ts): `src/api/backend.ts`
- [PHP endpoints](https://github.com/william-cohen/top-hats/tree/master/src/backend): `src/backend`

### Other components

- **Shopper**
- **Commerce backend**

## Connections

- Shopper → Application shell: uses
- Application shell → Route navigation: hosts routes
- Route navigation → Home page: routes to
- Route navigation → Product views: routes to
- Product views → Browse products: renders
- Product views → Product details: renders
- Browse products → Product filters: offers filters
- Browse products → Product state: reads products
- Product views → Product state: fetches products
- Shopper → Cart interface: manages cart
- Cart interface → Cart state: updates
- Route navigation → Checkout flow: routes to
- Checkout flow → Cart step: selects step
- Checkout flow → Delivery step: selects step
- Checkout flow → Payment step: selects step
- Checkout flow → Order confirmation: selects step
- Checkout flow → Cart state: clears cart
- Shopper → Login and signup: enters credentials
- Login and signup → Session state: calls login
- Session state → Credential crypto: encrypts credentials
- Session state → Backend API client: sends requests
- Session state → Cart state: reads cart
- Backend API client → PHP endpoints: posts requests
- PHP endpoints → Commerce backend: accesses services
- Route navigation → Session state: checks access