How rohan26ir/shobpai-modern-full-stack-e-commerce-platform works
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: CartContext.tsx Cart and wishlist state · shopSlice.ts Catalog state · api.ts Commerce API client · AuthContext.tsx Authentication
Components 21
Customer storefront
- Shop browsing
app/(public)/shop/page.tsx - Product details
app/(public)/product/[slug]/page.tsx - Product quick view
components/usable/ProductQuickViewModal.tsx - Cart and checkout
app/(public)/checkout/page.tsx
Identity and customer state
- Cart and wishlist state
context/CartContext.tsx - Sign-in and registration
app/(auth)/login/page.tsx - Authentication
context/AuthContext.tsx
Catalog and commerce data
- Shop data context
context/ShopDataContext.tsx - Catalog state
store/slices/shopSlice.ts - Product and category models
data/products.ts
Administration
- Product administration
components/dashboard/products/useProductsManagement.ts - Product creation
components/dashboard/product-add/useProductAddForm.ts - Product editing
components/dashboard/product-update/useProductUpdateForm.ts - Order management
components/dashboard/orders/useOrdersManagement.ts - Orders dashboard
app/dashboard/orders/page.tsx - Dashboard data state
store/slices/dashboardSlice.ts - AI product generation
app/api/ai/generate-product/route.ts
External services
- Firebase identity
lib/firebase.ts - Commerce API client
lib/api.ts - Commerce backend
Other components
- Shopper
Connections 26
- Shopper → Shop browsing: browses
app/(public)/shop/page.tsx - Shopper → Product details: views
- Shop browsing → Shop data context: reads catalog
app/(public)/shop/page.tsx - Shop browsing → Product quick view: opens quick view
app/(public)/shop/page.tsx - Product quick view → Cart and wishlist state: adds items
components/usable/ProductQuickViewModal.tsx - Product details → Cart and wishlist state: updates cart
app/(public)/product/[slug]/page.tsx - Shopper → Cart and checkout: checks out
- Cart and checkout → Cart and wishlist state: uses cart state
app/(public)/checkout/page.tsx - Cart and checkout → Authentication: checks identity
app/(public)/checkout/page.tsx - Sign-in and registration → Authentication: authenticates
app/(auth)/login/page.tsx - Authentication → Firebase identity: calls auth methods
context/AuthContext.tsx - Cart and wishlist state → Catalog state: dispatches cart actions
context/CartContext.tsx - Cart and wishlist state → Authentication: reads user session
context/CartContext.tsx - Cart and wishlist state → Commerce API client: persists cart
context/CartContext.tsx - Shop data context → Catalog state: dispatches fetches
context/ShopDataContext.tsx - Catalog state → Commerce API client: fetches catalog
store/slices/shopSlice.ts - Commerce API client → Commerce backend: sends API requests
- Product administration → Commerce API client: fetches product stats
components/dashboard/products/useProductsManagement.ts - Product administration → Catalog state: dispatches deletion
components/dashboard/products/useProductsManagement.ts - Product creation → Commerce API client: creates product
components/dashboard/product-add/useProductAddForm.ts - Product creation → Catalog state: dispatches product
components/dashboard/product-add/useProductAddForm.ts - Product editing → Commerce API client: updates product
components/dashboard/product-update/useProductUpdateForm.ts - Product editing → Catalog state: dispatches update
components/dashboard/product-update/useProductUpdateForm.ts - Orders dashboard → Order management: uses order manager
- Order management → Dashboard data state: dispatches order fetch
components/dashboard/orders/useOrdersManagement.ts - AI product generation → Commerce backend: generates product