# rohan26ir/shobpai-modern-full-stack-e-commerce-platform architecture

> Architecture diagram of the GitHub repository rohan26ir/shobpai-modern-full-stack-e-commerce-platform, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform
- Repository: https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform

## Overview

This is a Next.js grocery-commerce application with customer storefront, account and checkout experiences, plus an administrative dashboard. The principal customer path is browsing and filtering products, viewing a product, adding it to a cart, and checking out; shared shop, authentication, and cart state support that experience. Administrators manage products and orders through dashboard workflows. The graph reflects the supplied excerpts and source-index references; dashed, unevidenced links mark likely UI or external-service connections not shown directly.

Main entry points: [`context/CartContext.tsx`](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/CartContext.tsx) (Cart and wishlist state), [`store/slices/shopSlice.ts`](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/store/slices/shopSlice.ts) (Catalog state), [`lib/api.ts`](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/lib/api.ts) (Commerce API client), [`context/AuthContext.tsx`](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/AuthContext.tsx) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_shop["Shop browsing<br/>[page.tsx]"]
  node_product["Product details<br/>[page.tsx]"]
  node_quickview["Product quick view"]
  node_cartpage["Cart and checkout<br/>[page.tsx]"]
end

subgraph group_identity["Identity and customer state"]
  node_cartstate["Cart and wishlist state<br/>[CartContext.tsx]"]
  node_authpages["Sign-in and registration<br/>[page.tsx]"]
  node_auth["Authentication<br/>[AuthContext.tsx]"]
end

subgraph group_catalog["Catalog and commerce data"]
  node_shopdata["Shop data context"]
  node_shopslice["Catalog state<br/>[shopSlice.ts]"]
  node_catalogmodel["Product and category models<br/>[products.ts]"]
end

subgraph group_admin["Administration"]
  node_productlist["Product administration"]
  node_productcreate["Product creation"]
  node_productupdate["Product editing"]
  node_orders["Order management"]
  node_orderpage["Orders dashboard<br/>[page.tsx]"]
  node_dashboarddata["Dashboard data state<br/>[dashboardSlice.ts]"]
  node_ai["AI product generation<br/>[route.ts]"]
end

subgraph group_platform["External services"]
  node_firebase["Firebase identity<br/>[firebase.ts]"]
  node_api["Commerce API client<br/>[api.ts]"]
  node_backend[("Commerce backend")]
end

node_customer(("Shopper"))

node_customer -->|"browses"| node_shop
node_customer -.->|"views"| node_product
node_shop -.->|"reads catalog"| node_shopdata
node_shop -.->|"opens quick view"| node_quickview
node_quickview -.->|"adds items"| node_cartstate
node_product -.->|"updates cart"| node_cartstate
node_customer -.->|"checks out"| node_cartpage
node_cartpage -.->|"uses cart state"| node_cartstate
node_cartpage -.->|"checks identity"| node_auth
node_authpages -->|"authenticates"| node_auth
node_auth -->|"calls auth methods"| node_firebase
node_cartstate -->|"dispatches cart actions"| node_shopslice
node_cartstate -->|"reads user session"| node_auth
node_cartstate -->|"persists cart"| node_api
node_shopdata -->|"dispatches fetches"| node_shopslice
node_shopslice -->|"fetches catalog"| node_api
node_api -.->|"sends API requests"| node_backend
node_productlist -.->|"fetches product stats"| node_api
node_productlist -.->|"dispatches deletion"| node_shopslice
node_productcreate -->|"creates product"| node_api
node_productcreate -->|"dispatches product"| node_shopslice
node_productupdate -->|"updates product"| node_api
node_productupdate -->|"dispatches update"| node_shopslice
node_orderpage -.->|"uses order manager"| node_orders
node_orders -->|"dispatches order fetch"| node_dashboarddata
node_ai -.->|"generates product"| node_backend

click node_shop "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(public)/shop/page.tsx"
click node_product "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(public)/product/%5Bslug%5D/page.tsx"
click node_quickview "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/usable/ProductQuickViewModal.tsx"
click node_cartpage "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(public)/checkout/page.tsx"
click node_cartstate "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/CartContext.tsx"
click node_authpages "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(auth)/login/page.tsx"
click node_auth "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/AuthContext.tsx"
click node_firebase "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/lib/firebase.ts"
click node_shopdata "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/ShopDataContext.tsx"
click node_shopslice "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/store/slices/shopSlice.ts"
click node_catalogmodel "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/data/products.ts"
click node_api "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/lib/api.ts"
click node_productlist "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/products/useProductsManagement.ts"
click node_productcreate "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/product-add/useProductAddForm.ts"
click node_productupdate "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/product-update/useProductUpdateForm.ts"
click node_orders "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/orders/useOrdersManagement.ts"
click node_orderpage "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/dashboard/orders/page.tsx"
click node_dashboarddata "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/store/slices/dashboardSlice.ts"
click node_ai "https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/api/ai/generate-product/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_shop,node_product,node_quickview,node_cartpage toneBlue
class node_cartstate,node_authpages,node_auth toneAmber
class node_shopdata,node_shopslice,node_catalogmodel toneMint
class node_productlist,node_productcreate,node_productupdate,node_orders,node_orderpage,node_dashboarddata,node_ai toneRose
class node_firebase,node_api,node_backend,node_customer toneIndigo
```

## Components

### Customer storefront

- [Shop browsing](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(public)/shop/page.tsx): `app/(public)/shop/page.tsx`
- [Product details](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(public)/product/%5Bslug%5D/page.tsx): `app/(public)/product/[slug]/page.tsx`
- [Product quick view](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/usable/ProductQuickViewModal.tsx): `components/usable/ProductQuickViewModal.tsx`
- [Cart and checkout](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(public)/checkout/page.tsx): `app/(public)/checkout/page.tsx`

### Identity and customer state

- [Cart and wishlist state](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/CartContext.tsx): `context/CartContext.tsx`
- [Sign-in and registration](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/(auth)/login/page.tsx): `app/(auth)/login/page.tsx`
- [Authentication](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/AuthContext.tsx): `context/AuthContext.tsx`

### Catalog and commerce data

- [Shop data context](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/context/ShopDataContext.tsx): `context/ShopDataContext.tsx`
- [Catalog state](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/store/slices/shopSlice.ts): `store/slices/shopSlice.ts`
- [Product and category models](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/data/products.ts): `data/products.ts`

### Administration

- [Product administration](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/products/useProductsManagement.ts): `components/dashboard/products/useProductsManagement.ts`
- [Product creation](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/product-add/useProductAddForm.ts): `components/dashboard/product-add/useProductAddForm.ts`
- [Product editing](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/product-update/useProductUpdateForm.ts): `components/dashboard/product-update/useProductUpdateForm.ts`
- [Order management](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/components/dashboard/orders/useOrdersManagement.ts): `components/dashboard/orders/useOrdersManagement.ts`
- [Orders dashboard](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/dashboard/orders/page.tsx): `app/dashboard/orders/page.tsx`
- [Dashboard data state](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/store/slices/dashboardSlice.ts): `store/slices/dashboardSlice.ts`
- [AI product generation](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/app/api/ai/generate-product/route.ts): `app/api/ai/generate-product/route.ts`

### External services

- [Firebase identity](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/lib/firebase.ts): `lib/firebase.ts`
- [Commerce API client](https://github.com/rohan26ir/shobpai-modern-full-stack-e-commerce-platform/blob/main/lib/api.ts): `lib/api.ts`
- **Commerce backend**

### Other components

- **Shopper**

## Connections

- Shopper → Shop browsing: browses (evidence: `app/(public)/shop/page.tsx`)
- Shopper → Product details: views
- Shop browsing → Shop data context: reads catalog (evidence: `app/(public)/shop/page.tsx`)
- Shop browsing → Product quick view: opens quick view (evidence: `app/(public)/shop/page.tsx`)
- Product quick view → Cart and wishlist state: adds items (evidence: `components/usable/ProductQuickViewModal.tsx`)
- Product details → Cart and wishlist state: updates cart (evidence: `app/(public)/product/[slug]/page.tsx`)
- Shopper → Cart and checkout: checks out
- Cart and checkout → Cart and wishlist state: uses cart state (evidence: `app/(public)/checkout/page.tsx`)
- Cart and checkout → Authentication: checks identity (evidence: `app/(public)/checkout/page.tsx`)
- Sign-in and registration → Authentication: authenticates (evidence: `app/(auth)/login/page.tsx`)
- Authentication → Firebase identity: calls auth methods (evidence: `context/AuthContext.tsx`)
- Cart and wishlist state → Catalog state: dispatches cart actions (evidence: `context/CartContext.tsx`)
- Cart and wishlist state → Authentication: reads user session (evidence: `context/CartContext.tsx`)
- Cart and wishlist state → Commerce API client: persists cart (evidence: `context/CartContext.tsx`)
- Shop data context → Catalog state: dispatches fetches (evidence: `context/ShopDataContext.tsx`)
- Catalog state → Commerce API client: fetches catalog (evidence: `store/slices/shopSlice.ts`)
- Commerce API client → Commerce backend: sends API requests
- Product administration → Commerce API client: fetches product stats (evidence: `components/dashboard/products/useProductsManagement.ts`)
- Product administration → Catalog state: dispatches deletion (evidence: `components/dashboard/products/useProductsManagement.ts`)
- Product creation → Commerce API client: creates product (evidence: `components/dashboard/product-add/useProductAddForm.ts`)
- Product creation → Catalog state: dispatches product (evidence: `components/dashboard/product-add/useProductAddForm.ts`)
- Product editing → Commerce API client: updates product (evidence: `components/dashboard/product-update/useProductUpdateForm.ts`)
- Product editing → Catalog state: dispatches update (evidence: `components/dashboard/product-update/useProductUpdateForm.ts`)
- Orders dashboard → Order management: uses order manager
- Order management → Dashboard data state: dispatches order fetch (evidence: `components/dashboard/orders/useOrdersManagement.ts`)
- AI product generation → Commerce backend: generates product