# gankhulugd/petti-shop architecture

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

## Overview

Petti Shop is a Mongolian pet-products store composed of a Next.js storefront, a separate admin app, and a Hono API backed by Drizzle/D1. The primary customer journey is browsing and filtering the catalog, managing a cart, and checking out; customers can also track orders and manage wishlists. Admins manage products, orders, and dashboard data. The README documents the broad product flows; sampled source confirms selected BFF proxy handlers, admin data fetching, API route registration, and database schema. Other internal links are limited to those documented relationships.

Main entry points: [`server/src/app.ts`](https://github.com/gankhulugd/petti-shop/blob/main/server/src/app.ts) (API application), [`admin/lib/api-client.ts`](https://github.com/gankhulugd/petti-shop/blob/main/admin/lib/api-client.ts) (Admin API client), [`server/src/db/queries.ts`](https://github.com/gankhulugd/petti-shop/blob/main/server/src/db/queries.ts) (Database queries), [`admin/app`](https://github.com/gankhulugd/petti-shop/tree/main/admin/app) (Admin pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_storefront["Storefront pages"]
  node_catalog["Catalog and filters<br/>[ShopPageClient.tsx]"]
  node_product["Product details"]
  node_wishlist["Wishlist"]
end

subgraph group_commerce["Shopping and orders"]
  node_cart["Cart state<br/>[useCart.ts]"]
  node_checkout["Checkout<br/>[page.tsx]"]
  node_tracking["Order tracking<br/>[page.tsx]"]
end

subgraph group_admin["Admin console"]
  node_admin_ui["Admin pages"]
  node_dashboard["Dashboard data<br/>[fetch-dashboard.ts]"]
  node_product_admin["Product management<br/>[product-form.tsx]"]
  node_order_admin["Order management<br/>[orders-view.tsx]"]
  node_admin_client["Admin API client<br/>[api-client.ts]"]
end

subgraph group_api["API services"]
  node_bff["Client API proxy<br/>[bff-proxy.ts]"]
  node_catalog_proxy["Catalog proxy route<br/>[route.ts]"]
  node_lookup_proxy["Order lookup route<br/>[route.ts]"]
  node_api_app["API application<br/>[app.ts]"]
  node_public_catalog["Public catalog routes<br/>[public-catalog.ts]"]
  node_public_orders["Public order routes<br/>[public-orders.ts]"]
  node_admin_routes["Admin routes<br/>[admin-products.ts]"]
end

subgraph group_data["Persistence"]
  node_db_queries["Database queries<br/>[queries.ts]"]
  node_schema[("Commerce schema<br/>[schema.ts]")]
end

node_shopper(("Shopper"))
node_d1[("Cloudflare D1")]

node_shopper -->|"browses"| node_storefront
node_storefront -->|"shows catalog"| node_catalog
node_shopper -->|"views products"| node_product
node_shopper -->|"manages wishlist"| node_wishlist
node_shopper -->|"manages cart"| node_cart
node_shopper -->|"checks out"| node_checkout
node_shopper -->|"tracks order"| node_tracking
node_catalog -->|"opens cart"| node_cart
node_catalog_proxy -->|"proxies catalog"| node_bff
node_lookup_proxy -->|"proxies lookup"| node_bff
node_admin_ui -->|"loads dashboard"| node_dashboard
node_admin_ui -->|"manages products"| node_product_admin
node_admin_ui -->|"manages orders"| node_order_admin
node_dashboard -.->|"fetches data"| node_admin_client
node_product_admin -.->|"uses API"| node_admin_client
node_order_admin -.->|"uses API"| node_admin_client
node_checkout -->|"creates orders"| node_public_orders
node_tracking -->|"looks up orders"| node_lookup_proxy
node_bff -->|"forwards requests"| node_api_app
node_api_app -->|"registers routes"| node_public_catalog
node_api_app -->|"registers routes"| node_public_orders
node_api_app -->|"registers routes"| node_admin_routes
node_admin_client -.->|"calls API"| node_api_app
node_public_catalog -.->|"reads catalog"| node_db_queries
node_public_orders -.->|"stores orders"| node_db_queries
node_admin_routes -.->|"manages products"| node_db_queries
node_db_queries -.->|"uses schema"| node_schema
node_schema -->|"persists data"| node_d1
node_shopper -->|"uses search"| node_storefront

click node_storefront "https://github.com/gankhulugd/petti-shop/tree/main/client/app"
click node_catalog "https://github.com/gankhulugd/petti-shop/blob/main/client/components/shop/ShopPageClient.tsx"
click node_product "https://github.com/gankhulugd/petti-shop/blob/main/client/components/product/ProductDetailView.tsx"
click node_wishlist "https://github.com/gankhulugd/petti-shop/blob/main/client/components/wishlist/WishlistPageClient.tsx"
click node_cart "https://github.com/gankhulugd/petti-shop/blob/main/client/store/useCart.ts"
click node_checkout "https://github.com/gankhulugd/petti-shop/blob/main/client/app/checkout/page.tsx"
click node_tracking "https://github.com/gankhulugd/petti-shop/blob/main/client/app/track/page.tsx"
click node_bff "https://github.com/gankhulugd/petti-shop/blob/main/client/lib/bff-proxy.ts"
click node_catalog_proxy "https://github.com/gankhulugd/petti-shop/blob/main/client/app/api/catalog/route.ts"
click node_lookup_proxy "https://github.com/gankhulugd/petti-shop/blob/main/client/app/api/orders/lookup/route.ts"
click node_admin_ui "https://github.com/gankhulugd/petti-shop/tree/main/admin/app"
click node_dashboard "https://github.com/gankhulugd/petti-shop/blob/main/admin/lib/fetch-dashboard.ts"
click node_product_admin "https://github.com/gankhulugd/petti-shop/blob/main/admin/components/product-form.tsx"
click node_order_admin "https://github.com/gankhulugd/petti-shop/blob/main/admin/components/orders-view.tsx"
click node_admin_client "https://github.com/gankhulugd/petti-shop/blob/main/admin/lib/api-client.ts"
click node_api_app "https://github.com/gankhulugd/petti-shop/blob/main/server/src/app.ts"
click node_public_catalog "https://github.com/gankhulugd/petti-shop/blob/main/server/src/routes/public-catalog.ts"
click node_public_orders "https://github.com/gankhulugd/petti-shop/blob/main/server/src/routes/public-orders.ts"
click node_admin_routes "https://github.com/gankhulugd/petti-shop/blob/main/server/src/routes/admin-products.ts"
click node_db_queries "https://github.com/gankhulugd/petti-shop/blob/main/server/src/db/queries.ts"
click node_schema "https://github.com/gankhulugd/petti-shop/blob/main/server/src/db/schema.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_storefront,node_catalog,node_product,node_wishlist toneBlue
class node_cart,node_checkout,node_tracking,node_d1 toneAmber
class node_admin_ui,node_dashboard,node_product_admin,node_order_admin,node_admin_client toneMint
class node_bff,node_catalog_proxy,node_lookup_proxy,node_api_app,node_public_catalog,node_public_orders,node_admin_routes toneRose
class node_db_queries,node_schema,node_shopper toneIndigo
```

## Components

### Storefront

- [Storefront pages](https://github.com/gankhulugd/petti-shop/tree/main/client/app): `client/app`
- [Catalog and filters](https://github.com/gankhulugd/petti-shop/blob/main/client/components/shop/ShopPageClient.tsx): `client/components/shop/ShopPageClient.tsx`
- [Product details](https://github.com/gankhulugd/petti-shop/blob/main/client/components/product/ProductDetailView.tsx): `client/components/product/ProductDetailView.tsx`
- [Wishlist](https://github.com/gankhulugd/petti-shop/blob/main/client/components/wishlist/WishlistPageClient.tsx): `client/components/wishlist/WishlistPageClient.tsx`

### Shopping and orders

- [Cart state](https://github.com/gankhulugd/petti-shop/blob/main/client/store/useCart.ts): `client/store/useCart.ts`
- [Checkout](https://github.com/gankhulugd/petti-shop/blob/main/client/app/checkout/page.tsx): `client/app/checkout/page.tsx`
- [Order tracking](https://github.com/gankhulugd/petti-shop/blob/main/client/app/track/page.tsx): `client/app/track/page.tsx`

### Admin console

- [Admin pages](https://github.com/gankhulugd/petti-shop/tree/main/admin/app): `admin/app`
- [Dashboard data](https://github.com/gankhulugd/petti-shop/blob/main/admin/lib/fetch-dashboard.ts): `admin/lib/fetch-dashboard.ts`
- [Product management](https://github.com/gankhulugd/petti-shop/blob/main/admin/components/product-form.tsx): `admin/components/product-form.tsx`
- [Order management](https://github.com/gankhulugd/petti-shop/blob/main/admin/components/orders-view.tsx): `admin/components/orders-view.tsx`
- [Admin API client](https://github.com/gankhulugd/petti-shop/blob/main/admin/lib/api-client.ts): `admin/lib/api-client.ts`

### API services

- [Client API proxy](https://github.com/gankhulugd/petti-shop/blob/main/client/lib/bff-proxy.ts): `client/lib/bff-proxy.ts`
- [Catalog proxy route](https://github.com/gankhulugd/petti-shop/blob/main/client/app/api/catalog/route.ts): `client/app/api/catalog/route.ts`
- [Order lookup route](https://github.com/gankhulugd/petti-shop/blob/main/client/app/api/orders/lookup/route.ts): `client/app/api/orders/lookup/route.ts`
- [API application](https://github.com/gankhulugd/petti-shop/blob/main/server/src/app.ts): `server/src/app.ts`
- [Public catalog routes](https://github.com/gankhulugd/petti-shop/blob/main/server/src/routes/public-catalog.ts): `server/src/routes/public-catalog.ts`
- [Public order routes](https://github.com/gankhulugd/petti-shop/blob/main/server/src/routes/public-orders.ts): `server/src/routes/public-orders.ts`
- [Admin routes](https://github.com/gankhulugd/petti-shop/blob/main/server/src/routes/admin-products.ts): `server/src/routes/admin-products.ts`

### Persistence

- [Database queries](https://github.com/gankhulugd/petti-shop/blob/main/server/src/db/queries.ts): `server/src/db/queries.ts`
- [Commerce schema](https://github.com/gankhulugd/petti-shop/blob/main/server/src/db/schema.ts): `server/src/db/schema.ts`

### Other components

- **Shopper**
- **Cloudflare D1**

## Connections

- Shopper → Storefront pages: browses
- Storefront pages → Catalog and filters: shows catalog
- Shopper → Product details: views products
- Shopper → Wishlist: manages wishlist
- Shopper → Cart state: manages cart
- Shopper → Checkout: checks out
- Shopper → Order tracking: tracks order
- Catalog and filters → Cart state: opens cart (evidence: `client/components/shop/ShopPageClient.tsx`)
- Catalog proxy route → Client API proxy: proxies catalog (evidence: `client/app/api/catalog/route.ts`)
- Order lookup route → Client API proxy: proxies lookup (evidence: `client/app/api/orders/lookup/route.ts`)
- Admin pages → Dashboard data: loads dashboard (evidence: `admin/app/page.tsx`)
- Admin pages → Product management: manages products
- Admin pages → Order management: manages orders
- Dashboard data → Admin API client: fetches data
- Product management → Admin API client: uses API
- Order management → Admin API client: uses API
- Checkout → Public order routes: creates orders
- Order tracking → Order lookup route: looks up orders
- Client API proxy → API application: forwards requests
- API application → Public catalog routes: registers routes (evidence: `server/src/app.ts`)
- API application → Public order routes: registers routes (evidence: `server/src/app.ts`)
- API application → Admin routes: registers routes (evidence: `server/src/app.ts`)
- Admin API client → API application: calls API
- Public catalog routes → Database queries: reads catalog
- Public order routes → Database queries: stores orders
- Admin routes → Database queries: manages products
- Database queries → Commerce schema: uses schema
- Commerce schema → Cloudflare D1: persists data
- Shopper → Storefront pages: uses search