# jdmrtne/ecommerce architecture

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

## Overview

This is a configurable ecommerce storefront with a protected admin console. Shoppers browse products, manage a cart, authenticate, and check out; administrators manage catalog content, media, customers, and store presentation. The graph shows documented routing and sampled calls, plus major unsampled capabilities from the tree. Evidence is limited: most page and storage implementations were not excerpted, and the README says the Supabase API layer is not generally wired into the UI yet.

Main entry points: [`src/App.tsx`](https://github.com/jdmrtne/ecommerce/blob/main/src/App.tsx) (Route App), [`src/pages/Checkout.tsx`](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/Checkout.tsx) (Checkout), [`src/pages/admin`](https://github.com/jdmrtne/ecommerce/tree/main/src/pages/admin) (Admin Console), [`src/pages`](https://github.com/jdmrtne/ecommerce/tree/main/src/pages) (Storefront Pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_storefront_pages["Storefront Pages"]
  node_site_layout["Store Layout<br/>[Layout.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
  node_catalog["Catalog Browsing<br/>[Shop.tsx]"]
  node_product_detail["Product Detail<br/>[ProductDetail.tsx]"]
end

subgraph group_commerce["Commerce"]
  node_product_data[("Product Catalog<br/>[products.ts]")]
  node_cart["Cart State<br/>[CartProvider.tsx]"]
  node_checkout["Checkout<br/>[Checkout.tsx]"]
  node_payment["Payment Integration<br/>[paymongo.ts]"]
  node_orders["Order API<br/>[orders.ts]"]
  node_confirmation["Order Confirmation"]
end

subgraph group_admin["Store Administration"]
  node_admin_console["Admin Console"]
  node_product_admin["Product Manager<br/>[ProductManager.tsx]"]
  node_category_admin["Category Manager"]
  node_media_admin["Media Manager<br/>[MediaManager.tsx]"]
  node_theme_settings[("Theme Settings")]
  node_presets["Theme Presets<br/>[index.ts]"]
end

subgraph group_platform["Identity and Platform"]
  node_app["Route App<br/>[App.tsx]"]
  node_admin_gate["Admin Guard<br/>[RequireAdmin.tsx]"]
  node_media_api["Media API<br/>[media.ts]"]
  node_auth["Authentication<br/>[AuthProvider.tsx]"]
  node_supabase_client["Supabase Client<br/>[client.ts]"]
end

node_shopper(("Shopper"))

node_shopper -->|"opens store"| node_app
node_app -->|"routes through"| node_site_layout
node_app -->|"routes to"| node_storefront_pages
node_site_layout -.->|"renders"| node_navigation
node_storefront_pages -.->|"includes shop"| node_catalog
node_catalog -.->|"browses products"| node_product_data
node_storefront_pages -.->|"includes details"| node_product_detail
node_shopper -.->|"adds items"| node_cart
node_app -->|"provides state"| node_cart
node_shopper -.->|"starts checkout"| node_checkout
node_checkout -->|"creates payment"| node_payment
node_checkout -->|"creates order"| node_orders
node_checkout -.->|"returns to"| node_confirmation
node_app -->|"guards admin routes"| node_admin_gate
node_admin_gate -->|"permits access"| node_admin_console
node_admin_console -.->|"routes to"| node_product_admin
node_admin_console -.->|"routes to"| node_category_admin
node_admin_console -.->|"routes to"| node_media_admin
node_product_admin -.->|"reads catalog"| node_product_data
node_category_admin -->|"resolves categories"| node_product_data
node_media_admin -->|"manages assets"| node_media_api
node_app -->|"provides identity"| node_auth
node_auth -->|"uses client"| node_supabase_client
node_theme_settings -->|"loads presets"| node_presets

click node_app "https://github.com/jdmrtne/ecommerce/blob/main/src/App.tsx"
click node_storefront_pages "https://github.com/jdmrtne/ecommerce/tree/main/src/pages"
click node_site_layout "https://github.com/jdmrtne/ecommerce/blob/main/src/components/layout/Layout.tsx"
click node_navigation "https://github.com/jdmrtne/ecommerce/blob/main/src/components/layout/Navbar.tsx"
click node_catalog "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/Shop.tsx"
click node_product_detail "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/ProductDetail.tsx"
click node_product_data "https://github.com/jdmrtne/ecommerce/blob/main/src/data/products.ts"
click node_cart "https://github.com/jdmrtne/ecommerce/blob/main/src/context/CartProvider.tsx"
click node_checkout "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/Checkout.tsx"
click node_payment "https://github.com/jdmrtne/ecommerce/blob/main/src/lib/payments/paymongo.ts"
click node_orders "https://github.com/jdmrtne/ecommerce/blob/main/src/lib/api/orders.ts"
click node_confirmation "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/OrderConfirmation.tsx"
click node_admin_gate "https://github.com/jdmrtne/ecommerce/blob/main/src/components/auth/RequireAdmin.tsx"
click node_admin_console "https://github.com/jdmrtne/ecommerce/tree/main/src/pages/admin"
click node_product_admin "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/admin/ProductManager.tsx"
click node_category_admin "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/admin/CategoryManager.tsx"
click node_media_admin "https://github.com/jdmrtne/ecommerce/blob/main/src/pages/admin/MediaManager.tsx"
click node_media_api "https://github.com/jdmrtne/ecommerce/blob/main/src/lib/api/media.ts"
click node_auth "https://github.com/jdmrtne/ecommerce/blob/main/src/context/AuthProvider.tsx"
click node_supabase_client "https://github.com/jdmrtne/ecommerce/blob/main/src/lib/api/client.ts"
click node_theme_settings "https://github.com/jdmrtne/ecommerce/blob/main/src/lib/themeSettingsStore.ts"
click node_presets "https://github.com/jdmrtne/ecommerce/blob/main/src/config/presets/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_storefront_pages,node_site_layout,node_navigation,node_catalog,node_product_detail toneBlue
class node_product_data,node_cart,node_checkout,node_payment,node_orders,node_confirmation toneAmber
class node_admin_console,node_product_admin,node_category_admin,node_media_admin,node_theme_settings,node_presets toneMint
class node_app,node_admin_gate,node_media_api,node_auth,node_supabase_client toneRose
class node_shopper toneIndigo
```

## Components

### Storefront

- [Storefront Pages](https://github.com/jdmrtne/ecommerce/tree/main/src/pages): `src/pages`
- [Store Layout](https://github.com/jdmrtne/ecommerce/blob/main/src/components/layout/Layout.tsx): `src/components/layout/Layout.tsx`
- [Navigation](https://github.com/jdmrtne/ecommerce/blob/main/src/components/layout/Navbar.tsx): `src/components/layout/Navbar.tsx`
- [Catalog Browsing](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/Shop.tsx): `src/pages/Shop.tsx`
- [Product Detail](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/ProductDetail.tsx): `src/pages/ProductDetail.tsx`

### Commerce

- [Product Catalog](https://github.com/jdmrtne/ecommerce/blob/main/src/data/products.ts): `src/data/products.ts`
- [Cart State](https://github.com/jdmrtne/ecommerce/blob/main/src/context/CartProvider.tsx): `src/context/CartProvider.tsx`
- [Checkout](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/Checkout.tsx): `src/pages/Checkout.tsx`
- [Payment Integration](https://github.com/jdmrtne/ecommerce/blob/main/src/lib/payments/paymongo.ts): `src/lib/payments/paymongo.ts`
- [Order API](https://github.com/jdmrtne/ecommerce/blob/main/src/lib/api/orders.ts): `src/lib/api/orders.ts`
- [Order Confirmation](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/OrderConfirmation.tsx): `src/pages/OrderConfirmation.tsx`

### Store Administration

- [Admin Console](https://github.com/jdmrtne/ecommerce/tree/main/src/pages/admin): `src/pages/admin`
- [Product Manager](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/admin/ProductManager.tsx): `src/pages/admin/ProductManager.tsx`
- [Category Manager](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/admin/CategoryManager.tsx): `src/pages/admin/CategoryManager.tsx`
- [Media Manager](https://github.com/jdmrtne/ecommerce/blob/main/src/pages/admin/MediaManager.tsx): `src/pages/admin/MediaManager.tsx`
- [Theme Settings](https://github.com/jdmrtne/ecommerce/blob/main/src/lib/themeSettingsStore.ts): `src/lib/themeSettingsStore.ts`
- [Theme Presets](https://github.com/jdmrtne/ecommerce/blob/main/src/config/presets/index.ts): `src/config/presets/index.ts`

### Identity and Platform

- [Route App](https://github.com/jdmrtne/ecommerce/blob/main/src/App.tsx): `src/App.tsx`
- [Admin Guard](https://github.com/jdmrtne/ecommerce/blob/main/src/components/auth/RequireAdmin.tsx): `src/components/auth/RequireAdmin.tsx`
- [Media API](https://github.com/jdmrtne/ecommerce/blob/main/src/lib/api/media.ts): `src/lib/api/media.ts`
- [Authentication](https://github.com/jdmrtne/ecommerce/blob/main/src/context/AuthProvider.tsx): `src/context/AuthProvider.tsx`
- [Supabase Client](https://github.com/jdmrtne/ecommerce/blob/main/src/lib/api/client.ts): `src/lib/api/client.ts`

### Other components

- **Shopper**

## Connections

- Shopper → Route App: opens store (evidence: `src/App.tsx`)
- Route App → Store Layout: routes through (evidence: `src/App.tsx`)
- Route App → Storefront Pages: routes to (evidence: `src/App.tsx`)
- Store Layout → Navigation: renders
- Storefront Pages → Catalog Browsing: includes shop
- Catalog Browsing → Product Catalog: browses products
- Storefront Pages → Product Detail: includes details
- Shopper → Cart State: adds items
- Route App → Cart State: provides state (evidence: `src/App.tsx`)
- Shopper → Checkout: starts checkout
- Checkout → Payment Integration: creates payment (evidence: `src/pages/Checkout.tsx`)
- Checkout → Order API: creates order (evidence: `src/pages/Checkout.tsx`)
- Checkout → Order Confirmation: returns to
- Route App → Admin Guard: guards admin routes (evidence: `src/App.tsx`)
- Admin Guard → Admin Console: permits access (evidence: `src/App.tsx`)
- Admin Console → Product Manager: routes to
- Admin Console → Category Manager: routes to
- Admin Console → Media Manager: routes to
- Product Manager → Product Catalog: reads catalog
- Category Manager → Product Catalog: resolves categories (evidence: `src/pages/admin/CategoryManager.tsx`)
- Media Manager → Media API: manages assets (evidence: `src/pages/admin/MediaManager.tsx`)
- Route App → Authentication: provides identity (evidence: `src/App.tsx`)
- Authentication → Supabase Client: uses client (evidence: `src/context/AuthProvider.tsx`)
- Theme Settings → Theme Presets: loads presets (evidence: `src/hooks/useThemeSettings.ts`)