# njbsaab/astro-njx-store architecture

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

- Interactive diagram: https://gitdiagram.com/njbsaab/astro-njx-store
- Repository: https://github.com/njbsaab/astro-njx-store

## Overview

njx-store is a static Astro storefront theme: shoppers browse products and collections, select variants, save favorites, and build a persistent cart before checkout is handed to Shopify. Pages use a provider-neutral commerce interface that selects either the bundled mock catalog or Shopify Storefront API. The README documents search, theme switching, and informational/account pages; their wiring is not fully represented in sampled source, so links to those page-level features are limited to documented capability rather than inferred calls.

Main entry points: [`src/layouts/Layout.astro`](https://github.com/njbsaab/astro-njx-store/blob/main/src/layouts/Layout.astro) (Store shell), [`src/lib/commerce/index.ts`](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/index.ts) (Provider selector), [`src/pages/index.astro`](https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/index.astro) (Home page), [`src/pages/collections/[handle].astro`](https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/collections/%5Bhandle%5D.astro) (Collection pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront experience"]
  node_home["Home page<br/>[index.astro]"]
  node_collections["Collection pages<br/>[&#91;handle&#93;.astro]"]
  node_product["Product pages<br/>[&#91;handle&#93;.astro]"]
  node_layout["Store shell<br/>[Layout.astro]"]
  node_productcard["Product cards<br/>[ProductCard.astro]"]
  node_info["Info and account pages"]
  node_search["Instant search<br/>[Layout.astro]"]
end

subgraph group_commerce["Commerce data"]
  node_commerce["Provider selector<br/>[index.ts]"]
  node_types["Commerce contract<br/>[types.ts]"]
  node_mock["Mock provider<br/>[mock.ts]"]
  node_catalog[("Demo catalog<br/>[mock-catalog.json]")]
end

subgraph group_state["Shopper state"]
  node_cart[("Persistent cart<br/>[cart.ts]")]
  node_favorites[("Persistent favorites<br/>[favorites.ts]")]
  node_localstorage[("Browser localStorage")]
end

subgraph group_integrations["External commerce"]
  node_shopify["Shopify provider<br/>[shopify.ts]"]
  node_shopifyapi{{"Shopify Storefront API"}}
end

node_shopper(("Shopper"))

node_shopper -->|"browses"| node_home
node_shopper -->|"browses"| node_collections
node_shopper -->|"opens"| node_product
node_shopper -->|"visits"| node_info
node_home -->|"loads catalog"| node_commerce
node_collections -->|"loads collection"| node_commerce
node_product -->|"loads product"| node_commerce
node_home -->|"uses shell"| node_layout
node_collections -->|"uses shell"| node_layout
node_product -->|"uses shell"| node_layout
node_collections -->|"renders products"| node_productcard
node_home -->|"renders products"| node_productcard
node_commerce -->|"selects provider"| node_mock
node_commerce -->|"selects provider"| node_shopify
node_mock -->|"reads catalog"| node_catalog
node_shopify -.->|"queries and mutates"| node_shopifyapi
node_productcard -->|"adds line"| node_cart
node_layout -->|"reads and updates"| node_cart
node_productcard -->|"toggles favorite"| node_favorites
node_layout -->|"reads favorites"| node_favorites
node_cart -->|"persists"| node_localstorage
node_favorites -->|"persists"| node_localstorage
node_layout -->|"requests checkout URL"| node_commerce
node_layout -->|"provides search"| node_search
node_shopper -->|"searches"| node_search

click node_home "https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/index.astro"
click node_collections "https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/collections/%5Bhandle%5D.astro"
click node_product "https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/products/%5Bhandle%5D.astro"
click node_layout "https://github.com/njbsaab/astro-njx-store/blob/main/src/layouts/Layout.astro"
click node_productcard "https://github.com/njbsaab/astro-njx-store/blob/main/src/components/ProductCard.astro"
click node_info "https://github.com/njbsaab/astro-njx-store/tree/main/src/pages"
click node_commerce "https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/index.ts"
click node_types "https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/types.ts"
click node_mock "https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/mock.ts"
click node_catalog "https://github.com/njbsaab/astro-njx-store/blob/main/src/data/mock-catalog.json"
click node_shopify "https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/shopify.ts"
click node_cart "https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/cart.ts"
click node_favorites "https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/favorites.ts"
click node_search "https://github.com/njbsaab/astro-njx-store/blob/main/src/layouts/Layout.astro"

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_home,node_collections,node_product,node_layout,node_productcard,node_info,node_search toneBlue
class node_commerce,node_types,node_mock,node_catalog toneAmber
class node_cart,node_favorites,node_localstorage toneMint
class node_shopify,node_shopifyapi toneRose
class node_shopper toneIndigo
```

## Components

### Storefront experience

- [Home page](https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [Collection pages](https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/collections/%5Bhandle%5D.astro): `src/pages/collections/[handle].astro`
- [Product pages](https://github.com/njbsaab/astro-njx-store/blob/main/src/pages/products/%5Bhandle%5D.astro): `src/pages/products/[handle].astro`
- [Store shell](https://github.com/njbsaab/astro-njx-store/blob/main/src/layouts/Layout.astro): `src/layouts/Layout.astro`
- [Product cards](https://github.com/njbsaab/astro-njx-store/blob/main/src/components/ProductCard.astro): `src/components/ProductCard.astro`
- [Info and account pages](https://github.com/njbsaab/astro-njx-store/tree/main/src/pages): `src/pages`
- [Instant search](https://github.com/njbsaab/astro-njx-store/blob/main/src/layouts/Layout.astro): `src/layouts/Layout.astro`

### Commerce data

- [Provider selector](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/index.ts): `src/lib/commerce/index.ts`
- [Commerce contract](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/types.ts): `src/lib/commerce/types.ts`
- [Mock provider](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/mock.ts): `src/lib/commerce/mock.ts`
- [Demo catalog](https://github.com/njbsaab/astro-njx-store/blob/main/src/data/mock-catalog.json): `src/data/mock-catalog.json`

### Shopper state

- [Persistent cart](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/cart.ts): `src/lib/cart.ts`
- [Persistent favorites](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/favorites.ts): `src/lib/favorites.ts`
- **Browser localStorage**

### External commerce

- [Shopify provider](https://github.com/njbsaab/astro-njx-store/blob/main/src/lib/commerce/shopify.ts): `src/lib/commerce/shopify.ts`
- **Shopify Storefront API**

### Other components

- **Shopper**

## Connections

- Shopper → Home page: browses
- Shopper → Collection pages: browses
- Shopper → Product pages: opens
- Shopper → Info and account pages: visits
- Home page → Provider selector: loads catalog
- Collection pages → Provider selector: loads collection
- Product pages → Provider selector: loads product
- Home page → Store shell: uses shell
- Collection pages → Store shell: uses shell
- Product pages → Store shell: uses shell
- Collection pages → Product cards: renders products
- Home page → Product cards: renders products
- Provider selector → Mock provider: selects provider
- Provider selector → Shopify provider: selects provider
- Mock provider → Demo catalog: reads catalog
- Shopify provider → Shopify Storefront API: queries and mutates
- Product cards → Persistent cart: adds line
- Store shell → Persistent cart: reads and updates
- Product cards → Persistent favorites: toggles favorite
- Store shell → Persistent favorites: reads favorites
- Persistent cart → Browser localStorage: persists
- Persistent favorites → Browser localStorage: persists
- Store shell → Provider selector: requests checkout URL
- Store shell → Instant search: provides search
- Shopper → Instant search: searches