# Wear Wave Storefront Premium, mobile-first WEAR WAVE apparel storefront for browsing custom clothing, saving items, ordering online, and requesting bespoke printing. ## Masterplan - Serve Indian shoppers seeking premium custom apparel: tees, polos, jerseys, hoodies, caps, and mugs. - Present WEAR WAVE as a luxury black-and-gold brand while retaining fast, accessible shopping flows. - Support the full client-side commerce journey: discovery, filtering, product configuration, cart, checkout, order tracking, and wishlist. - Provide lead-generation paths for bulk/custom printing through dedicated forms and WhatsApp contact. - Include a demo-style admin surface for managing catalog, banners, coupons, inventory, customers, and orders in the current frontend state. ## Tech Stack & Architecture - **React + TypeScript** application bootstrapped by Vite. - **React Router DOM** using `HashRouter` in `src/App.tsx`. Routes must work as hash routes (`/#/shop`), which avoids server rewrite requirements. - **Tailwind CSS v4** via `@tailwindcss/vite`; utility styling and theme tokens live in `src/styles/main.css`. - **Lucide React** for all UI icons. - **`clsx` + `tailwind-merge`** through `cn()` in `src/lib/utils.ts` for safe class composition. - **GenMB capability SDKs** are injected in `index.html`: - Auth is consumed through `window.genmb.auth`. - Generated app capabilities include auth, contact form, billing, KV, and address; current UI primarily uses auth and client-side state. - Product images currently use external `picsum.photos` seed URLs from `src/lib/data.ts`. `SmartImage` provides loading placeholders and deterministic image fallbacks. ### App composition `src/main.tsx` imports `src/styles/main.css` and renders `App`. `src/App.tsx` wraps all pages in this provider order: ```tsx ``` `AppFrame` owns persisted dark-mode preference, global `Layout`, route definitions, and the floating WhatsApp live-chat control. ### State management - `src/lib/store.tsx` is the commerce source of truth. It exposes `useStore()` for products, cart, wishlist, coupons, orders, and admin-facing mutations. - Cart line items are variant-specific: add products with explicit product ID, color, and size. Do not collapse different variants into one line item. - UI feedback uses `ToastProvider`; call `useToast()` for success/error messaging around store mutations. - Authentication state is read-only in `useAuth.tsx`: `{ user, loading }`. Authentication actions remain on `window.genmb.auth`. - Theme preference is stored under localStorage key `wearwave-theme`. There is **no custom Node/Express/MongoDB backend in the current codebase**. Do not document or implement API endpoints as if they exist. Persisted production commerce data, payment verification, role authorization, and invoice generation require backend work before launch. ## File Structure ```text index.html GenMB SDK injection, base metadata, Vite root. src/main.tsx React entry point; imports global stylesheet. src/App.tsx Providers, hash routes, theme state, live chat. src/styles/main.css Tailwind import/theme tokens, global typography and animations. src/components/Layout.tsx Sticky header, responsive navigation, footer, search. src/components/Button.tsx Shared typed button variants, sizes, loading state. src/components/ProductCard.tsx Product grid card; cart, buy-now, wishlist actions. src/components/SmartImage.tsx Image skeleton and picsum fallback behavior. src/components/Dialog.tsx Accessible modal with focus trap and Escape handling. src/components/ToastProvider.tsx Global toast context and notification UI. src/components/EmptyState.tsx Reusable empty/not-found presentation. src/hooks/useAuth.tsx GenMB auth session bridge and auth context. src/hooks/usePageMeta.ts Per-page title and description updates. src/lib/data.ts Seed catalog, categories, coupons, banner types. src/lib/store.tsx Client commerce/admin state and store actions. src/lib/utils.ts cn(), INR formatting, IDs, document metadata helpers. src/pages/HomePage.tsx Hero, category discovery, promotions, reviews, Instagram. src/pages/ShopPage.tsx Search-driven product catalog, filters, sorting. src/pages/ProductPage.tsx Gallery, product configuration, details, related products. src/pages/CartPage.tsx Cart editing, coupon application, shipping totals. src/pages/CheckoutPage.tsx Address/payment selection and order placement. src/pages/WishlistPage.tsx Saved product grid and empty state. src/pages/AccountPage.tsx Sign-in/sign-up/account experience via GenMB auth. src/pages/TrackOrderPage.tsx Order lookup/tracking state. src/pages/CustomPrintingPage.tsx Custom-print inquiry flow. src/pages/ContactPage.tsx Contact form and WEAR WAVE contact details. src/pages/AboutPage.tsx Brand/about content. src/pages/FaqPage.tsx FAQ content. src/pages/AdminPage.tsx Frontend catalog/order/coupon/banner management UI. src/types/genmb.d.ts Type declarations for injected window.genmb APIs. vite.config.ts React and Tailwind Vite plugins. package.json Scripts and frontend dependencies. ``` ## Key Features ### Catalog and product data `src/lib/data.ts` defines the `Product` model: ```ts type Product = { id, name, category: string price, originalPrice, rating, reviewCount, stock: number colors: { name: string; className: string }[] sizes: string[] image: string gallery: string[] description, fabric, gsm, printing, washCare, badge: string featured?: boolean } ``` Current product categories are Oversized T-Shirts, Round Neck T-Shirts, Polo T-Shirts, Sports Jerseys, Hoodies, Caps, and Coffee Mugs. Product cards must show sale badge, rating, inventory messaging, color swatches, available sizes, price/original price, wishlist, cart, and buy-now actions. Card actions select the first available color and size; detailed configuration belongs on `ProductPage.tsx`. ### Storefront - Header search routes to `/shop?q=`; `ShopPage.tsx` must preserve and apply this URL query. - Shop supports product discovery with category, price, size, color, search, and sorting controls. - Product detail supports image gallery/zoom behavior, variant selection, specifications, wash care, size chart, reviews, and related products. - Wishlist uses product IDs and renders current `products`, allowing admin-edited products to appear without a separate data source. - Cart totals use INR formatting via `formatINR()` and the shipping threshold: **free shipping at ₹999+**. - Marketing messages include 3–5 day Indian delivery, easy returns, secure payments, Buy 2 Get 1 Free, Flat 10% OFF, and festival offers. ### Checkout and orders Checkout presents UPI, GPay, PhonePe, Paytm, cards, net banking, and COD as purchase options. It displays WEAR WAVE payment details: - UPI name: `Wear Wave` - UPI ID: `wearwave@upi` - WhatsApp orders: `7200671547` - Alternate contact: `9025901495` The GPay QR area is currently a UI/payment instruction feature, not proof of completed payment. Never treat a user-selected payment method as verified payment. Order tracking is frontend/store-backed. It cannot query real courier status without a future logistics integration. ### Auth and account - `useAuth.tsx` waits for `window.genmb.auth.ready()` and subscribes to auth-state changes. - Account UI must gracefully handle absent SDKs and loading state. - Available GenMB SDK methods include Google sign-in, magic links, email/password signup and login, reset flow, and sign-out. - Do not store passwords or duplicate auth sessions in `StoreProvider`. ### Contact and custom printing Contact and custom-print pages capture lead information and direct shoppers to WhatsApp when needed. Main contact details are: - Kanchipuram - `wearwave.in` - WhatsApp: `7200671547` - Instagram: `@wear_wave_21` The floating chat button opens `https://wa.me/917200671547`; it falls back to `/contact` when a popup is blocked. ### Admin `AdminPage.tsx` is a client-side operational dashboard for product CRUD, orders, customers, sales report summaries, inventory, coupons, and banner configuration. It is not secure server-side administration. Before production, add authenticated roles and server-enforced authorization; hiding a route is not access control. ## Design Guidelines - Premium minimal aesthetic: near-black surfaces, warm gold primary accents, muted stone/cream neutrals, and restrained borders. - Theme is token-driven through semantic Tailwind classes such as `bg-background`, `text-foreground`, `bg-primary`, and `border-border`. Do not introduce arbitrary hard-coded colors when a token exists. - Brand/logo typography is serif, bold, and letter-spaced; body and controls use clean sans-serif utility styling. - Cards use rounded corners, thin borders, soft shadows, compact metadata, and subtle hover lift/scale only. - Gold communicates action, rating, and premium highlights; destructive red is reserved for errors/critical stock states. - Desktop navigation appears at `lg`; mobile navigation uses the `Layout.tsx` menu panel. Header search is hidden below `md` and moves into the mobile menu. - Maintain touch-safe controls, visible focus rings, `sr-only` labels, and semantic button/link usage. - Existing animation utilities (`animate-fade-in`, dialog/toast animation, pulse image loading) should remain subtle and respect the app’s lightweight feel. ## App Flow 1. **Discover:** Landing on `/` presents the hero, categories, featured products, offers, reviews, and Instagram content. 2. **Browse:** Category links and header search route to `/shop`. Users refine catalog results, inspect product cards, or save items. 3. **Configure:** `/product/:id` selects gallery image, color, and size before adding to cart or buying now. Invalid IDs must show a useful not-found/recovery state rather than crash. 4. **Purchase:** Cart supports quantity changes/removal and coupons. Checkout gathers required fulfillment details, selected payment method, and creates a local order flow. 5. **After purchase:** Users navigate to `/track-order`; account and wishlist remain available from persistent header actions. 6. **Custom/bulk order:** `/custom-printing` and `/contact` collect requirements or hand off to WhatsApp. 7. **Admin:** `/admin` exposes demo management controls. Treat it as non-production client tooling until authorization and persistence exist. Key edge cases: - Empty cart/wishlist and no search results use `EmptyState`. - Low stock must remain visibly distinct from normal availability. - If localStorage is unavailable, dark mode still changes for the current session. - If external images fail, `SmartImage` swaps to a seeded fallback. - Modal changes must preserve `Dialog.tsx` focus trapping, Escape close, scroll lock, and focus restoration. ## Conventions - Use PascalCase for components/pages (`ProductCard.tsx`), camelCase for variables/functions, and descriptive route IDs such as `wave-studio-tee`. - Default-export page and UI components; use named exports for hooks/providers/utilities where established. - Use `Button` instead of raw buttons for standard actions. Choose its semantic `variant`, `size`, and `loading` props rather than duplicating button class sets. - Use `SmartImage` for catalog/editorial images so loading and fallback behavior stays consistent. - Merge conditional Tailwind classes with `cn()` from `src/lib/utils.ts`. - Add page metadata with `usePageMeta(title, description)` in every route page. - Format customer-visible money only with `formatINR()`; store numeric values as rupees, not formatted strings. - Keep business/catalog seed data in `src/lib/data.ts`; mutate runtime app state through `useStore()`, never directly in product card/page components. - Surface mutation failures through `useToast()` and preserve existing optimistic, concise feedback. ### Adding a page or feature 1. Create `src/pages/NewPage.tsx`, add `usePageMeta`, and compose existing components. 2. Register the route in `src/App.tsx`; add it to `navItems` in `src/components/Layout.tsx` only if it belongs in primary navigation. 3. Extend `src/lib/data.ts` for static seed data and `src/lib/store.tsx` for shared transactional state/actions. 4. Reuse semantic theme tokens and responsive Tailwind breakpoints. 5. Test hash-route navigation, mobile behavior, keyboard focus, dark mode, empty/error states, and interactions with existing cart/wishlist data. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.