How sopet-co-ltd/new-sopet-storefront works
SOPET Storefront is a customer-facing Next.js storefront for a multi-vendor pet marketplace. The principal journey is browsing or searching the catalog, managing a cart, checking out as a guest or signed-in customer, paying, then viewing order status; account features also cover addresses, favorites, and reviews. The README documents an Apollo/GraphQL data path through a same-origin GraphQL route to the backend, and Omise browser tokenization for payments. The graph preserves those product areas; detailed wiring is limited to the README overview and sampled GraphQL/auth routes.
Main entry points: graphql Apollo GraphQL · CheckoutSection.tsx Checkout · login/page.tsx Login and OTP · [category]/page.tsx Catalog Pages
Components 20
Catalog and Shopping
- Catalog Pages
src/app/(main)/categories/[category]/page.tsx - Product Pages
src/app/(main)/product/[id]/page.tsx - Search Pages
src/app/(main)/search/page.tsx - Seller Pages
src/app/(main)/sellers/[handle]/page.tsx - Cart
src/components/sections/CartPage/CartPage.tsx
Checkout and Orders
- Checkout
src/components/sections/CheckoutSection/CheckoutSection.tsx - Auto Promotions
src/components/sections/CheckoutSection/CheckoutAutoApplyController.tsx - Payment Flow
src/components/organisms/OrderPaymentForm/OrderPaymentForm.tsx - Order Confirmation
src/app/(main)/order/[id]/confirmed/page.tsx - Order Tracking
src/components/order-tracking/order-tracking-page-content.tsx
Identity and Account
- Customer Account
src/app/(main)/user/orders/page.tsx - Customer Reviews
src/lib/hooks/useCustomerReviews.ts - Login and OTP
src/app/(auth)/login/page.tsx - Session API
src/app/api/session/route.ts - Auth APIs
src/app/api/auth/refresh/route.ts
Data and Integrations
- Apollo GraphQL
src/lib/graphql - GraphQL BFF
src/app/graphql/route.ts - Store Backend
- Omise Payments
Other components
- Shopper
Connections 28
- Shopper → Catalog Pages: browses
- Shopper → Search Pages: searches
- Shopper → Product Pages: views
- Shopper → Cart: manages
- Shopper → Login and OTP: signs in
- Catalog Pages → Apollo GraphQL: queries
- Product Pages → Apollo GraphQL: queries
- Search Pages → Apollo GraphQL: queries
- Seller Pages → Apollo GraphQL: queries
- Cart → Apollo GraphQL: updates
- Shopper → Checkout: checks out
- Checkout → Auto Promotions: runs
- Auto Promotions → Apollo GraphQL: validates
- Checkout → Apollo GraphQL: submits
- Checkout → Payment Flow: continues to
- Payment Flow → Omise Payments: tokenizes card
- Shopper → Order Confirmation: views
- Shopper → Order Tracking: tracks order
- Shopper → Customer Account: manages account
- Customer Account → Apollo GraphQL: queries
- Customer Reviews → Apollo GraphQL: queries
- Login and OTP → Apollo GraphQL: authenticates
- Login and OTP → Session API: ensures session
- Login and OTP → Auth APIs: refreshes session
- Apollo GraphQL → GraphQL BFF: sends GraphQL
- GraphQL BFF → Store Backend: forwards requests
- Session API → Store Backend: issues session
- Auth APIs → Store Backend: refreshes tokens