# zyxzb/quickcommerce architecture

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

## Overview

QuickCommerce is a Next.js storefront and blog backed by Sanity. Shoppers browse category-filtered products, open product details, and can add items to a bag or start checkout; readers browse posts and view or submit comments. Sanity supplies product, category, blog, and comment content, while the README also documents Stripe integration and SEO, ISR, pagination, image placeholders, and configurable discounts. Some component internals and payment wiring were not sampled, so those relationships are omitted or marked unverified.

Main entry points: [`app/lib/sanity.ts`](https://github.com/zyxzb/quickcommerce/blob/main/app/lib/sanity.ts) (Sanity Client), [`app/product/[slug]/page.tsx`](https://github.com/zyxzb/quickcommerce/blob/main/app/product/%5Bslug%5D/page.tsx) (Product Detail), [`app/[category]/page.tsx`](https://github.com/zyxzb/quickcommerce/blob/main/app/%5Bcategory%5D/page.tsx) (Category Listing), [`components/CommentsForm.tsx`](https://github.com/zyxzb/quickcommerce/blob/main/components/CommentsForm.tsx) (Comment Form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home Page<br/>[page.tsx]"]
  node_hero["Hero Banner<br/>[Hero.tsx]"]
  node_newest["Newest Products<br/>[Newest.tsx]"]
  node_layout["Site Layout<br/>[layout.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
end

subgraph group_catalog["Product Catalog"]
  node_category["Category Listing<br/>[page.tsx]"]
  node_pagination["Product Pagination"]
  node_product["Product Detail<br/>[page.tsx]"]
  node_gallery["Image Gallery<br/>[ImageGallery.tsx]"]
  node_blur["Image Placeholders<br/>[getBase64.ts]"]
end

subgraph group_publishing["Blog and Comments"]
  node_bloglist["Blog Listing<br/>[page.tsx]"]
  node_blogpost["Blog Article<br/>[page.tsx]"]
  node_blogcards["Blog Cards<br/>[BlogCard.tsx]"]
  node_commentform["Comment Form<br/>[CommentsForm.tsx]"]
  node_comments["Comment Display<br/>[Comments.tsx]"]
  node_productcommentapi["Product Comment API<br/>[route.tsx]"]
  node_blogcommentapi["Blog Comment API<br/>[route.ts]"]
end

subgraph group_content["Content Services"]
  node_sanity["Sanity Client<br/>[sanity.ts]"]
  node_sanitycms[("Sanity CMS")]
  node_schemas["Content Schemas"]
  node_productactions["Product Queries<br/>[getAllProducts.ts]"]
  node_categoryactions["Category Queries"]
  node_blogactions["Blog Queries<br/>[getAllBlogPosts.ts]"]
end

subgraph group_commerce["Cart and Checkout"]
  node_bag["Add to Bag<br/>[AddToBag.tsx]"]
  node_cart["Shopping Cart"]
  node_checkout["Checkout CTA<br/>[CheckoutNow.tsx]"]
  node_stripe[("Stripe")]
end

node_shopper(("Shopper"))
node_reader(("Reader"))

node_shopper -->|"browses"| node_home
node_reader -->|"browses"| node_bloglist
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_newest
node_layout -->|"renders"| node_navigation
node_layout -->|"renders"| node_cart
node_category -->|"fetches products"| node_sanity
node_category -->|"loads categories"| node_categoryactions
node_category -->|"renders"| node_pagination
node_category -->|"generates placeholders"| node_blur
node_product -->|"fetches product"| node_sanity
node_product -->|"loads slugs"| node_productactions
node_product -->|"renders"| node_gallery
node_product -->|"generates placeholders"| node_blur
node_product -->|"renders"| node_bag
node_product -->|"renders"| node_checkout
node_product -->|"renders"| node_commentform
node_product -->|"renders"| node_comments
node_bloglist -->|"fetches posts"| node_sanity
node_bloglist -->|"renders"| node_blogcards
node_blogpost -->|"fetches article"| node_sanity
node_blogpost -->|"loads slugs"| node_blogactions
node_blogpost -->|"renders"| node_commentform
node_blogpost -->|"renders"| node_comments
node_productcommentapi -->|"creates comment"| node_sanity
node_blogcommentapi -->|"writes comments"| node_sanity
node_sanity -->|"queries content"| node_sanitycms
node_sanity -.->|"uses content types"| node_schemas
node_productactions -->|"queries"| node_sanity
node_categoryactions -->|"queries"| node_sanity
node_blogactions -->|"queries"| node_sanity
node_shopper -->|"selects category"| node_category
node_shopper -->|"opens product"| node_product
node_bag -.->|"adds items"| node_cart
node_checkout -.->|"starts payment"| node_stripe
node_reader -.->|"submits comment"| node_commentform
node_commentform -.->|"posts product comment"| node_productcommentapi
node_commentform -.->|"posts blog comment"| node_blogcommentapi

click node_home "https://github.com/zyxzb/quickcommerce/blob/main/app/page.tsx"
click node_hero "https://github.com/zyxzb/quickcommerce/blob/main/components/Hero.tsx"
click node_newest "https://github.com/zyxzb/quickcommerce/blob/main/components/Newest.tsx"
click node_layout "https://github.com/zyxzb/quickcommerce/blob/main/app/layout.tsx"
click node_navigation "https://github.com/zyxzb/quickcommerce/blob/main/components/Navbar.tsx"
click node_category "https://github.com/zyxzb/quickcommerce/blob/main/app/%5Bcategory%5D/page.tsx"
click node_pagination "https://github.com/zyxzb/quickcommerce/blob/main/components/PaginationSection.tsx"
click node_product "https://github.com/zyxzb/quickcommerce/blob/main/app/product/%5Bslug%5D/page.tsx"
click node_gallery "https://github.com/zyxzb/quickcommerce/blob/main/components/ImageGallery.tsx"
click node_blur "https://github.com/zyxzb/quickcommerce/blob/main/lib/getBase64.ts"
click node_bloglist "https://github.com/zyxzb/quickcommerce/blob/main/app/blog/page.tsx"
click node_blogpost "https://github.com/zyxzb/quickcommerce/blob/main/app/blog/%5Bslug%5D/page.tsx"
click node_blogcards "https://github.com/zyxzb/quickcommerce/blob/main/components/BlogCard.tsx"
click node_commentform "https://github.com/zyxzb/quickcommerce/blob/main/components/CommentsForm.tsx"
click node_comments "https://github.com/zyxzb/quickcommerce/blob/main/components/Comments.tsx"
click node_productcommentapi "https://github.com/zyxzb/quickcommerce/blob/main/app/api/comment/product/route.tsx"
click node_blogcommentapi "https://github.com/zyxzb/quickcommerce/blob/main/app/api/comment/blog/route.ts"
click node_sanity "https://github.com/zyxzb/quickcommerce/blob/main/app/lib/sanity.ts"
click node_schemas "https://github.com/zyxzb/quickcommerce/tree/main/sanity/schemas"
click node_productactions "https://github.com/zyxzb/quickcommerce/blob/main/app/actions/getAllProducts.ts"
click node_categoryactions "https://github.com/zyxzb/quickcommerce/blob/main/app/actions/getAllCategories.ts"
click node_blogactions "https://github.com/zyxzb/quickcommerce/blob/main/app/actions/getAllBlogPosts.ts"
click node_bag "https://github.com/zyxzb/quickcommerce/blob/main/components/AddToBag.tsx"
click node_cart "https://github.com/zyxzb/quickcommerce/blob/main/components/ShoppingCartModal.tsx"
click node_checkout "https://github.com/zyxzb/quickcommerce/blob/main/components/CheckoutNow.tsx"

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_hero,node_newest,node_layout,node_navigation toneBlue
class node_category,node_pagination,node_product,node_gallery,node_blur toneAmber
class node_bloglist,node_blogpost,node_blogcards,node_commentform,node_comments,node_productcommentapi,node_blogcommentapi toneMint
class node_sanity,node_sanitycms,node_schemas,node_productactions,node_categoryactions,node_blogactions toneRose
class node_bag,node_cart,node_checkout,node_stripe,node_shopper,node_reader toneIndigo
```

## Components

### Storefront

- [Home Page](https://github.com/zyxzb/quickcommerce/blob/main/app/page.tsx): `app/page.tsx`
- [Hero Banner](https://github.com/zyxzb/quickcommerce/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [Newest Products](https://github.com/zyxzb/quickcommerce/blob/main/components/Newest.tsx): `components/Newest.tsx`
- [Site Layout](https://github.com/zyxzb/quickcommerce/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation](https://github.com/zyxzb/quickcommerce/blob/main/components/Navbar.tsx): `components/Navbar.tsx`

### Product Catalog

- [Category Listing](https://github.com/zyxzb/quickcommerce/blob/main/app/%5Bcategory%5D/page.tsx): `app/[category]/page.tsx`
- [Product Pagination](https://github.com/zyxzb/quickcommerce/blob/main/components/PaginationSection.tsx): `components/PaginationSection.tsx`
- [Product Detail](https://github.com/zyxzb/quickcommerce/blob/main/app/product/%5Bslug%5D/page.tsx): `app/product/[slug]/page.tsx`
- [Image Gallery](https://github.com/zyxzb/quickcommerce/blob/main/components/ImageGallery.tsx): `components/ImageGallery.tsx`
- [Image Placeholders](https://github.com/zyxzb/quickcommerce/blob/main/lib/getBase64.ts): `lib/getBase64.ts`

### Blog and Comments

- [Blog Listing](https://github.com/zyxzb/quickcommerce/blob/main/app/blog/page.tsx): `app/blog/page.tsx`
- [Blog Article](https://github.com/zyxzb/quickcommerce/blob/main/app/blog/%5Bslug%5D/page.tsx): `app/blog/[slug]/page.tsx`
- [Blog Cards](https://github.com/zyxzb/quickcommerce/blob/main/components/BlogCard.tsx): `components/BlogCard.tsx`
- [Comment Form](https://github.com/zyxzb/quickcommerce/blob/main/components/CommentsForm.tsx): `components/CommentsForm.tsx`
- [Comment Display](https://github.com/zyxzb/quickcommerce/blob/main/components/Comments.tsx): `components/Comments.tsx`
- [Product Comment API](https://github.com/zyxzb/quickcommerce/blob/main/app/api/comment/product/route.tsx): `app/api/comment/product/route.tsx`
- [Blog Comment API](https://github.com/zyxzb/quickcommerce/blob/main/app/api/comment/blog/route.ts): `app/api/comment/blog/route.ts`

### Content Services

- [Sanity Client](https://github.com/zyxzb/quickcommerce/blob/main/app/lib/sanity.ts): `app/lib/sanity.ts`
- **Sanity CMS**
- [Content Schemas](https://github.com/zyxzb/quickcommerce/tree/main/sanity/schemas): `sanity/schemas`
- [Product Queries](https://github.com/zyxzb/quickcommerce/blob/main/app/actions/getAllProducts.ts): `app/actions/getAllProducts.ts`
- [Category Queries](https://github.com/zyxzb/quickcommerce/blob/main/app/actions/getAllCategories.ts): `app/actions/getAllCategories.ts`
- [Blog Queries](https://github.com/zyxzb/quickcommerce/blob/main/app/actions/getAllBlogPosts.ts): `app/actions/getAllBlogPosts.ts`

### Cart and Checkout

- [Add to Bag](https://github.com/zyxzb/quickcommerce/blob/main/components/AddToBag.tsx): `components/AddToBag.tsx`
- [Shopping Cart](https://github.com/zyxzb/quickcommerce/blob/main/components/ShoppingCartModal.tsx): `components/ShoppingCartModal.tsx`
- [Checkout CTA](https://github.com/zyxzb/quickcommerce/blob/main/components/CheckoutNow.tsx): `components/CheckoutNow.tsx`
- **Stripe**

### Other components

- **Shopper**
- **Reader**

## Connections

- Shopper → Home Page: browses
- Reader → Blog Listing: browses
- Home Page → Hero Banner: renders (evidence: `app/page.tsx`)
- Home Page → Newest Products: renders (evidence: `app/page.tsx`)
- Site Layout → Navigation: renders (evidence: `app/layout.tsx`)
- Site Layout → Shopping Cart: renders (evidence: `app/layout.tsx`)
- Category Listing → Sanity Client: fetches products (evidence: `app/[category]/page.tsx`)
- Category Listing → Category Queries: loads categories (evidence: `app/[category]/page.tsx`)
- Category Listing → Product Pagination: renders (evidence: `app/[category]/page.tsx`)
- Category Listing → Image Placeholders: generates placeholders (evidence: `app/[category]/page.tsx`)
- Product Detail → Sanity Client: fetches product (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Product Queries: loads slugs (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Image Gallery: renders (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Image Placeholders: generates placeholders (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Add to Bag: renders (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Checkout CTA: renders (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Comment Form: renders (evidence: `app/product/[slug]/page.tsx`)
- Product Detail → Comment Display: renders (evidence: `app/product/[slug]/page.tsx`)
- Blog Listing → Sanity Client: fetches posts (evidence: `app/blog/page.tsx`)
- Blog Listing → Blog Cards: renders (evidence: `app/blog/page.tsx`)
- Blog Article → Sanity Client: fetches article (evidence: `app/blog/[slug]/page.tsx`)
- Blog Article → Blog Queries: loads slugs (evidence: `app/blog/[slug]/page.tsx`)
- Blog Article → Comment Form: renders (evidence: `app/blog/[slug]/page.tsx`)
- Blog Article → Comment Display: renders (evidence: `app/blog/[slug]/page.tsx`)
- Product Comment API → Sanity Client: creates comment (evidence: `app/api/comment/product/route.tsx`)
- Blog Comment API → Sanity Client: writes comments (evidence: `app/api/comment/blog/route.ts`)
- Sanity Client → Sanity CMS: queries content (evidence: `app/lib/sanity.ts`)
- Sanity Client → Content Schemas: uses content types
- Product Queries → Sanity Client: queries (evidence: `app/actions/getAllProducts.ts`)
- Category Queries → Sanity Client: queries (evidence: `app/actions/getAllCategories.ts`)
- Blog Queries → Sanity Client: queries (evidence: `app/actions/getAllBlogPosts.ts`)
- Shopper → Category Listing: selects category
- Shopper → Product Detail: opens product
- Add to Bag → Shopping Cart: adds items
- Checkout CTA → Stripe: starts payment
- Reader → Comment Form: submits comment
- Comment Form → Product Comment API: posts product comment
- Comment Form → Blog Comment API: posts blog comment