How zyxzb/quickcommerce works
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: sanity.ts Sanity Client · [slug]/page.tsx Product Detail · [category]/page.tsx Category Listing · CommentsForm.tsx Comment Form
Components 29
Storefront
- Home Page
app/page.tsx - Hero Banner
components/Hero.tsx - Newest Products
components/Newest.tsx - Site Layout
app/layout.tsx - Navigation
components/Navbar.tsx
Product Catalog
- Category Listing
app/[category]/page.tsx - Product Pagination
components/PaginationSection.tsx - Product Detail
app/product/[slug]/page.tsx - Image Gallery
components/ImageGallery.tsx - Image Placeholders
lib/getBase64.ts
Blog and Comments
- Blog Listing
app/blog/page.tsx - Blog Article
app/blog/[slug]/page.tsx - Blog Cards
components/BlogCard.tsx - Comment Form
components/CommentsForm.tsx - Comment Display
components/Comments.tsx - Product Comment API
app/api/comment/product/route.tsx - Blog Comment API
app/api/comment/blog/route.ts
Content Services
- Sanity Client
app/lib/sanity.ts - Sanity CMS
- Content Schemas
sanity/schemas - Product Queries
app/actions/getAllProducts.ts - Category Queries
app/actions/getAllCategories.ts - Blog Queries
app/actions/getAllBlogPosts.ts
Cart and Checkout
- Add to Bag
components/AddToBag.tsx - Shopping Cart
components/ShoppingCartModal.tsx - Checkout CTA
components/CheckoutNow.tsx - Stripe
Other components
- Shopper
- Reader
Connections 38
- Shopper → Home Page: browses
- Reader → Blog Listing: browses
- Home Page → Hero Banner: renders
app/page.tsx - Home Page → Newest Products: renders
app/page.tsx - Site Layout → Navigation: renders
app/layout.tsx - Site Layout → Shopping Cart: renders
app/layout.tsx - Category Listing → Sanity Client: fetches products
app/[category]/page.tsx - Category Listing → Category Queries: loads categories
app/[category]/page.tsx - Category Listing → Product Pagination: renders
app/[category]/page.tsx - Category Listing → Image Placeholders: generates placeholders
app/[category]/page.tsx - Product Detail → Sanity Client: fetches product
app/product/[slug]/page.tsx - Product Detail → Product Queries: loads slugs
app/product/[slug]/page.tsx - Product Detail → Image Gallery: renders
app/product/[slug]/page.tsx - Product Detail → Image Placeholders: generates placeholders
app/product/[slug]/page.tsx - Product Detail → Add to Bag: renders
app/product/[slug]/page.tsx - Product Detail → Checkout CTA: renders
app/product/[slug]/page.tsx - Product Detail → Comment Form: renders
app/product/[slug]/page.tsx - Product Detail → Comment Display: renders
app/product/[slug]/page.tsx - Blog Listing → Sanity Client: fetches posts
app/blog/page.tsx - Blog Listing → Blog Cards: renders
app/blog/page.tsx - Blog Article → Sanity Client: fetches article
app/blog/[slug]/page.tsx - Blog Article → Blog Queries: loads slugs
app/blog/[slug]/page.tsx - Blog Article → Comment Form: renders
app/blog/[slug]/page.tsx - Blog Article → Comment Display: renders
app/blog/[slug]/page.tsx - Product Comment API → Sanity Client: creates comment
app/api/comment/product/route.tsx - Blog Comment API → Sanity Client: writes comments
app/api/comment/blog/route.ts - Sanity Client → Sanity CMS: queries content
app/lib/sanity.ts - Sanity Client → Content Schemas: uses content types
- Product Queries → Sanity Client: queries
app/actions/getAllProducts.ts - Category Queries → Sanity Client: queries
app/actions/getAllCategories.ts - Blog Queries → Sanity Client: queries
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