super-merch/supermerch-frontend

Purpose and Runtime

PG Frontend is a Vite-built React 18 storefront for promotional merchandise. It provides catalog browsing, filtering, product customization/quotation, cart and Stripe-backed checkout, account/authentication, artwork upload, and a merch-assistant chat interface. It is deployed/configured for Vercel.

Entry bootstrap: src/main.jsx mounts the application; src/App.jsx composes routing and application-level UI. Route-level screens live under src/pages/.

Routing and Page Composition

Pages separate URL concerns from feature composition: home, shop/category listings, product details, cart, checkout, policy/support, auth, account, and post-order states.

Key paths:

• src/App.jsx

• src/pages/Home/Home.jsx

• src/pages/ShopPage.jsx

• src/pages/ProducPage.jsx

• src/pages/CheckoutPage.jsx

This is a client-side SPA using React Router. Common navigation, modal, transition, and reusable product UI sit between route pages and feature-specific components.

Product Discovery and Catalog Views

Catalog presentation is organized into home merchandising, shop/category results, and promotion-specific views. Shared filtering includes attributes, color, brand, price, and category mappings; listing UI consumes product/category data and renders cards or tabs.

Key paths:

• src/components/shop/ProductDisplay.jsx

• src/components/shop/Sidebar.jsx

• src/components/shared/UnifiedSidebar.jsx

• src/components/shared/AttributeFilters.jsx

• src/config/routeCategoryMapping.js

Product state and filter choices cross this boundary through Redux rather than being confined to individual listing components.

Product Detail, Customization, and Quotes

The product-detail feature owns gallery, pricing, decoration, shipping, lead-time, specifications, size-guide, and order-summary interactions. Quote capture is modal-driven, while artwork upload is exposed as its own routed journey.

Key paths:

• src/components/product/ProductDetails/index.jsx

• src/components/product/ProductDetails/PricingTab.jsx

• src/components/product/QuoteFormModal.jsx

• src/pages/UploadArtwork.jsx

This layer turns selected catalog items and customer options into cart- or quote-oriented actions; backend integration is expected through the configured API base URL.

Commerce State and Checkout

Redux Toolkit centralizes cart, category, favorites, filters, and promotional state. The checkout UI is a staged workflow for customer, shipping, billing, payment, and order-summary collection. Stripe is client-side payment infrastructure; the backend must create/respond with the required checkout session/payment data.

Key paths:

• src/redux/store.js

• src/redux/slices/cartSlice.js

• src/redux/slices/filterSlice.js

• src/components/cart/CartComponent.jsx

• src/components/checkout/Checkout.jsx

• src/components/checkout/CheckoutSteps/PaymentStep.jsx

Identity and Account Boundary

Authentication is managed through React context and hooks, with auth layout/modals for login, Google auth, password entry/reset, and signup. Account pages provide dashboard, profile/address, order, and user-product surfaces.

Key paths:

• src/context/AuthContext.jsx

• src/hooks/useAuth.js

• src/components/auth/AuthLayout.jsx

• src/pages/Login.jsx

• src/userAdmin/DashBoard.jsx

External Services and Operations

The frontend reads Vite-exposed environment settings for the backend (VITE_BACKEND_URL), Stripe publishable key (VITE_STRIPE_PUBLIC_KEY), and SuperMerch Bot endpoint (VITE_BOT_API_URL). The chat widget persists a session ID in browser localStorage and sends it as X-Session-Id, allowing conversational refinement and product-card responses.

Key paths:

• src/components/Chat/ChatWidget.jsx

• .env.example

• vite.config.js

• vercel.json