# oxyyz/oasis-craft architecture

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

## Overview

This is a Nuxt storefront for Samarkand Market, presenting Uzbek crafts in Japanese and English. Shoppers browse featured items or filter and sort the catalog, open product details, save favorites, and add items to a cart with delivery totals. The account page displays order, profile, address, and favorite views; the sampled account orders and profile are static UI, not connected to an order service. Product records and shared types form the internal catalog/model layer. Source excerpts do not establish checkout, newsletter submission, or external commerce integrations.

Main entry points: [`app/app.vue`](https://github.com/oxyyz/oasis-craft/blob/main/app/app.vue) (App Shell), [`app/stores/cart.ts`](https://github.com/oxyyz/oasis-craft/blob/main/app/stores/cart.ts) (Cart Store), [`app/pages/products/[id].vue`](https://github.com/oxyyz/oasis-craft/blob/main/app/pages/products/%5Bid%5D.vue) (Product Detail), [`app/pages/index.vue`](https://github.com/oxyyz/oasis-craft/blob/main/app/pages/index.vue) (Home Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["App Shell<br/>[app.vue]"]
  node_home["Home Page<br/>[index.vue]"]
  node_header["Site Header<br/>[AppHeader.vue]"]
  node_footer["Site Footer<br/>[AppFooter.vue]"]
  node_language["Language Store<br/>[lang.ts]"]
end

subgraph group_catalog["Product Catalog"]
  node_listing["Product Listing<br/>[index.vue]"]
  node_detail["Product Detail<br/>[&#91;id&#93;.vue]"]
  node_card["Product Card<br/>[ProductCard.vue]"]
  node_shape["Product Shape<br/>[ProductShape.vue]"]
  node_products["Product Data<br/>[products.ts]"]
end

subgraph group_customer["Customer State"]
  node_cartdrawer["Cart Drawer<br/>[CartDrawer.vue]"]
  node_account["Account Page<br/>[account.vue]"]
  node_cart["Cart Store<br/>[cart.ts]"]
  node_favorites["Favorites Store<br/>[favorites.ts]"]
end

subgraph group_model["Shared Model"]
  node_types["Domain Types<br/>[index.ts]"]
end

node_shopper(("Shopper"))
node_storage[("Browser Storage")]

node_shopper -->|"opens storefront"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_footer
node_app -->|"routes to"| node_home
node_app -->|"hydrates"| node_cart
node_app -->|"hydrates"| node_favorites
node_shopper -->|"browses"| node_home
node_shopper -->|"filters catalog"| node_listing
node_shopper -->|"views item"| node_detail
node_shopper -->|"opens account"| node_account
node_home -->|"reads featured items"| node_products
node_listing -->|"filters and sorts"| node_products
node_detail -->|"reads item and related"| node_products
node_listing -->|"renders results"| node_card
node_home -->|"adds gift item"| node_cart
node_detail -->|"adds item"| node_cart
node_detail -->|"toggles favorite"| node_favorites
node_account -->|"reads and removes"| node_favorites
node_cartdrawer -->|"reads and updates"| node_cart
node_cart -->|"loads and saves cart"| node_storage
node_favorites -->|"loads and saves favorites"| node_storage
node_home -->|"reads language"| node_language
node_listing -->|"reads language"| node_language
node_detail -->|"reads language"| node_language
node_account -->|"reads language"| node_language
node_cartdrawer -->|"reads language"| node_language
node_products -->|"uses product type"| node_types
node_cart -->|"uses cart types"| node_types
node_favorites -->|"uses favorite types"| node_types

click node_app "https://github.com/oxyyz/oasis-craft/blob/main/app/app.vue"
click node_home "https://github.com/oxyyz/oasis-craft/blob/main/app/pages/index.vue"
click node_header "https://github.com/oxyyz/oasis-craft/blob/main/app/components/AppHeader.vue"
click node_footer "https://github.com/oxyyz/oasis-craft/blob/main/app/components/AppFooter.vue"
click node_listing "https://github.com/oxyyz/oasis-craft/blob/main/app/pages/products/index.vue"
click node_detail "https://github.com/oxyyz/oasis-craft/blob/main/app/pages/products/%5Bid%5D.vue"
click node_card "https://github.com/oxyyz/oasis-craft/blob/main/app/components/ProductCard.vue"
click node_shape "https://github.com/oxyyz/oasis-craft/blob/main/app/components/ProductShape.vue"
click node_products "https://github.com/oxyyz/oasis-craft/blob/main/app/data/products.ts"
click node_cartdrawer "https://github.com/oxyyz/oasis-craft/blob/main/app/components/CartDrawer.vue"
click node_account "https://github.com/oxyyz/oasis-craft/blob/main/app/pages/account.vue"
click node_cart "https://github.com/oxyyz/oasis-craft/blob/main/app/stores/cart.ts"
click node_favorites "https://github.com/oxyyz/oasis-craft/blob/main/app/stores/favorites.ts"
click node_language "https://github.com/oxyyz/oasis-craft/blob/main/app/stores/lang.ts"
click node_types "https://github.com/oxyyz/oasis-craft/blob/main/app/types/index.ts"

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_home,node_header,node_footer,node_language toneBlue
class node_listing,node_detail,node_card,node_shape,node_products,node_storage toneAmber
class node_cartdrawer,node_account,node_cart,node_favorites toneMint
class node_types toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [App Shell](https://github.com/oxyyz/oasis-craft/blob/main/app/app.vue): `app/app.vue`
- [Home Page](https://github.com/oxyyz/oasis-craft/blob/main/app/pages/index.vue): `app/pages/index.vue`
- [Site Header](https://github.com/oxyyz/oasis-craft/blob/main/app/components/AppHeader.vue): `app/components/AppHeader.vue`
- [Site Footer](https://github.com/oxyyz/oasis-craft/blob/main/app/components/AppFooter.vue): `app/components/AppFooter.vue`
- [Language Store](https://github.com/oxyyz/oasis-craft/blob/main/app/stores/lang.ts): `app/stores/lang.ts`

### Product Catalog

- [Product Listing](https://github.com/oxyyz/oasis-craft/blob/main/app/pages/products/index.vue): `app/pages/products/index.vue`
- [Product Detail](https://github.com/oxyyz/oasis-craft/blob/main/app/pages/products/%5Bid%5D.vue): `app/pages/products/[id].vue`
- [Product Card](https://github.com/oxyyz/oasis-craft/blob/main/app/components/ProductCard.vue): `app/components/ProductCard.vue`
- [Product Shape](https://github.com/oxyyz/oasis-craft/blob/main/app/components/ProductShape.vue): `app/components/ProductShape.vue`
- [Product Data](https://github.com/oxyyz/oasis-craft/blob/main/app/data/products.ts): `app/data/products.ts`

### Customer State

- [Cart Drawer](https://github.com/oxyyz/oasis-craft/blob/main/app/components/CartDrawer.vue): `app/components/CartDrawer.vue`
- [Account Page](https://github.com/oxyyz/oasis-craft/blob/main/app/pages/account.vue): `app/pages/account.vue`
- [Cart Store](https://github.com/oxyyz/oasis-craft/blob/main/app/stores/cart.ts): `app/stores/cart.ts`
- [Favorites Store](https://github.com/oxyyz/oasis-craft/blob/main/app/stores/favorites.ts): `app/stores/favorites.ts`

### Shared Model

- [Domain Types](https://github.com/oxyyz/oasis-craft/blob/main/app/types/index.ts): `app/types/index.ts`

### Other components

- **Shopper**
- **Browser Storage**

## Connections

- Shopper → App Shell: opens storefront
- App Shell → Site Header: renders
- App Shell → Site Footer: renders
- App Shell → Home Page: routes to
- App Shell → Cart Store: hydrates
- App Shell → Favorites Store: hydrates
- Shopper → Home Page: browses
- Shopper → Product Listing: filters catalog
- Shopper → Product Detail: views item
- Shopper → Account Page: opens account
- Home Page → Product Data: reads featured items
- Product Listing → Product Data: filters and sorts
- Product Detail → Product Data: reads item and related
- Product Listing → Product Card: renders results
- Home Page → Cart Store: adds gift item
- Product Detail → Cart Store: adds item
- Product Detail → Favorites Store: toggles favorite
- Account Page → Favorites Store: reads and removes
- Cart Drawer → Cart Store: reads and updates
- Cart Store → Browser Storage: loads and saves cart
- Favorites Store → Browser Storage: loads and saves favorites
- Home Page → Language Store: reads language
- Product Listing → Language Store: reads language
- Product Detail → Language Store: reads language
- Account Page → Language Store: reads language
- Cart Drawer → Language Store: reads language
- Product Data → Domain Types: uses product type
- Cart Store → Domain Types: uses cart types
- Favorites Store → Domain Types: uses favorite types