# sopet-co-ltd/new-sopet-storefront architecture

> Architecture diagram of the GitHub repository sopet-co-ltd/new-sopet-storefront, 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/sopet-co-ltd/new-sopet-storefront
- Repository: https://github.com/sopet-co-ltd/new-sopet-storefront

## Overview

SOPET Storefront is a customer-facing Next.js storefront for a multi-vendor pet marketplace. The principal journey is browsing or searching the catalog, managing a cart, checking out as a guest or signed-in customer, paying, then viewing order status; account features also cover addresses, favorites, and reviews. The README documents an Apollo/GraphQL data path through a same-origin GraphQL route to the backend, and Omise browser tokenization for payments. The graph preserves those product areas; detailed wiring is limited to the README overview and sampled GraphQL/auth routes.

Main entry points: [`src/lib/graphql`](https://github.com/sopet-co-ltd/new-sopet-storefront/tree/main/src/lib/graphql) (Apollo GraphQL), [`src/components/sections/CheckoutSection/CheckoutSection.tsx`](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CheckoutSection/CheckoutSection.tsx) (Checkout), [`src/app/(auth)/login/page.tsx`](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(auth)/login/page.tsx) (Login and OTP), [`src/app/(main)/categories/[category]/page.tsx`](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/categories/%5Bcategory%5D/page.tsx) (Catalog Pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shopping["Catalog and Shopping"]
  node_catalog["Catalog Pages<br/>[page.tsx]"]
  node_product["Product Pages<br/>[page.tsx]"]
  node_search["Search Pages<br/>[page.tsx]"]
  node_seller["Seller Pages<br/>[page.tsx]"]
  node_cart["Cart<br/>[CartPage.tsx]"]
end

subgraph group_transaction["Checkout and Orders"]
  node_checkout["Checkout"]
  node_auto_promotions["Auto Promotions"]
  node_payment["Payment Flow"]
  node_confirmation["Order Confirmation<br/>[page.tsx]"]
  node_tracking["Order Tracking"]
end

subgraph group_identity["Identity and Account"]
  node_account["Customer Account<br/>[page.tsx]"]
  node_reviews["Customer Reviews"]
  node_auth_pages["Login and OTP<br/>[page.tsx]"]
  node_session_api["Session API<br/>[route.ts]"]
  node_auth_api["Auth APIs<br/>[route.ts]"]
end

subgraph group_data["Data and Integrations"]
  node_apollo["Apollo GraphQL"]
  node_graphql_bff["GraphQL BFF<br/>[route.ts]"]
  node_backend[("Store Backend")]
  node_omise["Omise Payments"]
end

node_shopper(("Shopper"))

node_shopper -->|"browses"| node_catalog
node_shopper -->|"searches"| node_search
node_shopper -->|"views"| node_product
node_shopper -->|"manages"| node_cart
node_shopper -->|"signs in"| node_auth_pages
node_catalog -->|"queries"| node_apollo
node_product -->|"queries"| node_apollo
node_search -->|"queries"| node_apollo
node_seller -->|"queries"| node_apollo
node_cart -->|"updates"| node_apollo
node_shopper -->|"checks out"| node_checkout
node_checkout -->|"runs"| node_auto_promotions
node_auto_promotions -->|"validates"| node_apollo
node_checkout -->|"submits"| node_apollo
node_checkout -->|"continues to"| node_payment
node_payment -.->|"tokenizes card"| node_omise
node_shopper -->|"views"| node_confirmation
node_shopper -->|"tracks order"| node_tracking
node_shopper -->|"manages account"| node_account
node_account -->|"queries"| node_apollo
node_reviews -->|"queries"| node_apollo
node_auth_pages -->|"authenticates"| node_apollo
node_auth_pages -->|"ensures session"| node_session_api
node_auth_pages -->|"refreshes session"| node_auth_api
node_apollo -->|"sends GraphQL"| node_graphql_bff
node_graphql_bff -->|"forwards requests"| node_backend
node_session_api -->|"issues session"| node_backend
node_auth_api -->|"refreshes tokens"| node_backend

click node_catalog "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/categories/%5Bcategory%5D/page.tsx"
click node_product "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/product/%5Bid%5D/page.tsx"
click node_search "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/search/page.tsx"
click node_seller "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/sellers/%5Bhandle%5D/page.tsx"
click node_cart "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CartPage/CartPage.tsx"
click node_checkout "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CheckoutSection/CheckoutSection.tsx"
click node_auto_promotions "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CheckoutSection/CheckoutAutoApplyController.tsx"
click node_payment "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/organisms/OrderPaymentForm/OrderPaymentForm.tsx"
click node_confirmation "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/order/%5Bid%5D/confirmed/page.tsx"
click node_tracking "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/order-tracking/order-tracking-page-content.tsx"
click node_account "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/user/orders/page.tsx"
click node_reviews "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/lib/hooks/useCustomerReviews.ts"
click node_auth_pages "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(auth)/login/page.tsx"
click node_session_api "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/api/session/route.ts"
click node_auth_api "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/api/auth/refresh/route.ts"
click node_apollo "https://github.com/sopet-co-ltd/new-sopet-storefront/tree/main/src/lib/graphql"
click node_graphql_bff "https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/graphql/route.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_catalog,node_product,node_search,node_seller,node_cart toneBlue
class node_checkout,node_auto_promotions,node_payment,node_confirmation,node_tracking toneAmber
class node_account,node_reviews,node_auth_pages,node_session_api,node_auth_api toneMint
class node_apollo,node_graphql_bff,node_backend,node_omise toneRose
class node_shopper toneIndigo
```

## Components

### Catalog and Shopping

- [Catalog Pages](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/categories/%5Bcategory%5D/page.tsx): `src/app/(main)/categories/[category]/page.tsx`
- [Product Pages](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/product/%5Bid%5D/page.tsx): `src/app/(main)/product/[id]/page.tsx`
- [Search Pages](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/search/page.tsx): `src/app/(main)/search/page.tsx`
- [Seller Pages](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/sellers/%5Bhandle%5D/page.tsx): `src/app/(main)/sellers/[handle]/page.tsx`
- [Cart](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CartPage/CartPage.tsx): `src/components/sections/CartPage/CartPage.tsx`

### Checkout and Orders

- [Checkout](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CheckoutSection/CheckoutSection.tsx): `src/components/sections/CheckoutSection/CheckoutSection.tsx`
- [Auto Promotions](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/sections/CheckoutSection/CheckoutAutoApplyController.tsx): `src/components/sections/CheckoutSection/CheckoutAutoApplyController.tsx`
- [Payment Flow](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/organisms/OrderPaymentForm/OrderPaymentForm.tsx): `src/components/organisms/OrderPaymentForm/OrderPaymentForm.tsx`
- [Order Confirmation](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/order/%5Bid%5D/confirmed/page.tsx): `src/app/(main)/order/[id]/confirmed/page.tsx`
- [Order Tracking](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/components/order-tracking/order-tracking-page-content.tsx): `src/components/order-tracking/order-tracking-page-content.tsx`

### Identity and Account

- [Customer Account](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(main)/user/orders/page.tsx): `src/app/(main)/user/orders/page.tsx`
- [Customer Reviews](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/lib/hooks/useCustomerReviews.ts): `src/lib/hooks/useCustomerReviews.ts`
- [Login and OTP](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/(auth)/login/page.tsx): `src/app/(auth)/login/page.tsx`
- [Session API](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/api/session/route.ts): `src/app/api/session/route.ts`
- [Auth APIs](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/api/auth/refresh/route.ts): `src/app/api/auth/refresh/route.ts`

### Data and Integrations

- [Apollo GraphQL](https://github.com/sopet-co-ltd/new-sopet-storefront/tree/main/src/lib/graphql): `src/lib/graphql`
- [GraphQL BFF](https://github.com/sopet-co-ltd/new-sopet-storefront/blob/main/src/app/graphql/route.ts): `src/app/graphql/route.ts`
- **Store Backend**
- **Omise Payments**

### Other components

- **Shopper**

## Connections

- Shopper → Catalog Pages: browses
- Shopper → Search Pages: searches
- Shopper → Product Pages: views
- Shopper → Cart: manages
- Shopper → Login and OTP: signs in
- Catalog Pages → Apollo GraphQL: queries
- Product Pages → Apollo GraphQL: queries
- Search Pages → Apollo GraphQL: queries
- Seller Pages → Apollo GraphQL: queries
- Cart → Apollo GraphQL: updates
- Shopper → Checkout: checks out
- Checkout → Auto Promotions: runs
- Auto Promotions → Apollo GraphQL: validates
- Checkout → Apollo GraphQL: submits
- Checkout → Payment Flow: continues to
- Payment Flow → Omise Payments: tokenizes card
- Shopper → Order Confirmation: views
- Shopper → Order Tracking: tracks order
- Shopper → Customer Account: manages account
- Customer Account → Apollo GraphQL: queries
- Customer Reviews → Apollo GraphQL: queries
- Login and OTP → Apollo GraphQL: authenticates
- Login and OTP → Session API: ensures session
- Login and OTP → Auth APIs: refreshes session
- Apollo GraphQL → GraphQL BFF: sends GraphQL
- GraphQL BFF → Store Backend: forwards requests
- Session API → Store Backend: issues session
- Auth APIs → Store Backend: refreshes tokens