# Second Derm Polished CDN-only React ecommerce storefront for a clothing brand with product browsing, cart management, dark mode, and mail-based checkout. ## Masterplan - Present Second Derm as a tactile, refined clothing brand focused on “close-to-body essentials” and small seasonal edits. - Let shoppers browse a fixed first collection, filter by category, search by product/color/fabric, and add pieces to a shopping bag. - Support lightweight ecommerce without a backend: cart is client-side and checkout opens a prefilled email to the studio. - Prioritize mobile shopping with a sticky header, bottom navigation, large touch targets, and safe-area padding. - Maintain a premium editorial feel using earthy gradients instead of product photography. ## Tech Stack & Architecture - **Runtime:** Static HTML app loaded from `index.html`; no build step or package manager required. - **UI:** React `19.2.0` via `https://esm.sh`, rendered in `src/main.js`. - **JSX alternative:** `src/jsx.js` binds `htm@3.1.1` to `React.createElement`; all components use tagged template syntax: ``html`<${Component} />` `` instead of compiled JSX. - **Routing:** `HashRouter`, `Routes`, `Route`, `NavLink`, and `Link` from `react-router-dom@7.0.2`. URLs are hash-based (`#/shop`) for static hosting compatibility. - **State:** Zustand `5.0.0` in `src/store/useCartStore.js` stores cart items in memory only. Cart does **not** persist across page reloads. - **Theme state:** `ThemeProvider` in `src/mainProviders.js` stores `light`/`dark` in `localStorage` key `second-derm-theme` and toggles `.dark` on ``. - **Styling:** Tailwind CDN from `index.html` plus custom CSS variables/utilities in `styles/main.css`. Components use Tailwind utility classes with HSL CSS variables, e.g. `bg-[hsl(var(--background))]`. - **Icons:** `lucide-react` via esm.sh. - **Generated platform SDKs:** `index.html` includes injected `window.genmb.products` and `window.genmb.db` SDKs, but the current app does not call them. Product data is static in `src/data/products.js`. File connection flow: `index.html` loads Tailwind, `styles/main.css`, and `src/main.js` → `main.js` renders `` → `App.js` defines hash routes inside `AppLayout` → layout renders `Header`, route `Outlet`, and mobile `BottomNav`. ## File Structure ```txt index.html Static shell, CDN imports, root element, injected GenMB SDKs. styles/main.css Brand CSS variables, dark theme tokens, safe-area/product visual utilities. src/main.js React root creation and top-level render. src/jsx.js htm/html helper used instead of JSX compilation. src/mainProviders.js ThemeProvider, useTheme hook, localStorage theme persistence. src/App.js HashRouter route table for home, shop, cart, and 404. src/components/AppLayout.js Shared page chrome: sticky header, main outlet, mobile bottom nav. src/components/Header.js Brand logo, desktop nav, theme toggle, cart count button. src/components/BottomNav.js Mobile-only fixed nav with cart quantity badge. src/components/Button.js Shared primary/secondary button component. src/components/ProductCard.js Product tile, gradient image placeholder, size chips, add-to-cart action. src/data/products.js Static catalog and category list. src/pages/HomePage.js Hero, featured products, brand value cards. src/pages/ShopPage.js Search/category filtering and product grid. src/pages/CartPage.js Cart line items, quantity controls, totals, mailto checkout. src/pages/NotFoundPage.js Branded 404 with return-to-shop CTA. src/store/useCartStore.js Zustand cart actions and in-memory item state. ``` ## Key Features ### Static product catalog Defined in `src/data/products.js`. Product shape: ```js { id: 'sd-ribbed-shell-clay', name: 'Ribbed Shell Tank', category: 'Base layers', price: 64, color: 'Sunbaked clay', fabric: 'Organic cotton rib with gentle recovery', fit: 'Close fit', sizes: ['XS', 'S', 'M', 'L', 'XL'], gradient: 'linear-gradient(...)' } ``` Current categories: ```js ['All', 'Base layers', 'Outerwear', 'Trousers'] ``` Important gotcha: category filtering in `ShopPage.js` uses exact string equality: ```js product.category === category ``` If adding a new product category, also add it to `categories`. ### Home page `src/pages/HomePage.js` includes: - Editorial hero with brand positioning. - CTA links to `/shop` and `/cart`. - Product collage using gradient placeholders from `products[1]`. - Featured drop showing the first three products via `products.slice(0, 3)`. - Three brand value cards with Lucide icons: lower-impact fibers, fit testing, small-batch rhythm. ### Shop page `src/pages/ShopPage.js` supports: - Local category state with default `'All'`. - Local search query state. - Search across `name`, `color`, and `fabric` only: ```js `${product.name} ${product.color} ${product.fabric}`.toLowerCase().includes(normalized) ``` The page copy says “color, fabric, and fit,” but `fit` is not currently included in search. - Empty-state messaging when no products match. - Product cards rendered through `ProductCard`. ### Product cards `src/components/ProductCard.js`: - Displays product “image” using `.product-sheen` and inline CSS variable `--product-gradient`. - Shows category, name, price, fabric, sizes, and color/cart quantity. - Calls `useCartStore().addToCart(product)`. - If item already exists, button text changes from `Add to bag` to `Add another`. ### Cart `src/store/useCartStore.js` actions: - `items: []` - `addToCart(product)` adds a new product with `quantity: 1` or increments existing product. - `increment(id)` increases quantity. - `decrement(id)` never drops below `1`. - `remove(id)` removes a line item. - `clear()` empties cart, though no UI currently calls it. `src/pages/CartPage.js`: - Computes subtotal from item price × quantity. - Shipping rule: free when subtotal is `0` or `>= 150`; otherwise `$12`. - Displays empty-bag state with link to `/shop`. - Quantity decrement button is disabled at quantity `<= 1`; removing requires the Remove button. - Checkout creates a mailto URL: ```txt orders@secondderm.studio subject: Second Derm order request body: item lines, subtotal, shipping estimate, total, payment/delivery request ``` - There is no payment provider, inventory check, order ID, or backend order storage. ### Navigation and cart count - `Header.js` shows desktop nav from `md` upward and a cart button from `sm` upward. - `BottomNav.js` is mobile-only (`md:hidden`) and fixed to the bottom. - Cart count is computed independently in `Header` and `BottomNav` by reducing `items`. ### Dark mode - `Header.js` uses `useTheme()` to toggle. - `mainProviders.js` writes the selected theme to `localStorage`. - CSS must define both default and `.dark` token values in `styles/main.css`. - Initial theme defaults to `light`; it does not inspect `prefers-color-scheme`. ## Design Guidelines - Visual style: calm premium apparel storefront, editorial copy, tactile earth-toned gradients, soft borders, rounded cards, subtle elevation. - Product imagery is intentionally abstract: use `gradient` values in catalog items and render with `.product-sheen`. - Color system is token-based through CSS custom properties in `styles/main.css`: `--background`, `--foreground`, `--primary`, `--secondary`, `--muted`, `--card`, `--border`, `--ring`, etc. - Use HSL variable Tailwind syntax consistently: ```txt bg-[hsl(var(--card))] text-[hsl(var(--muted-foreground))] border-[hsl(var(--border))] ``` - Buttons and links should have: - Minimum 48px touch height (`min-h-12` or `h-12`). - `focus-visible:ring-2`. - Small hover lift with `hover:-translate-y-0.5`. - Layout widths use `max-w-7xl` and responsive padding `px-4 sm:px-6 lg:px-8`. - Mobile behavior: - Bottom navigation is fixed and requires main bottom padding (`pb-24`) in `AppLayout.js`. - `BottomNav` uses `env(safe-area-inset-bottom)`. - Header remains sticky at top. - Typography is Tailwind default sans-serif; headings use tight tracking and semibold/bold weights. ## App Flow 1. User lands on `#/`. 2. `HomePage` presents brand story and featured products. 3. User selects “Shop the first edit” or mobile/desktop Shop nav. 4. `ShopPage` lets user: - search by text, - filter by category, - add products to bag. 5. `ProductCard` updates Zustand cart state immediately. 6. Header and bottom nav badges reflect total item quantity. 7. User opens `#/cart`. 8. `CartPage` lets user: - increment quantity, - decrement down to 1, - remove items, - review subtotal/shipping/total. 9. Checkout button opens the user’s email client with prefilled order request. Navigation routes: - `#/` → `HomePage` - `#/shop` → `ShopPage` - `#/cart` → `CartPage` - Any other hash route → `NotFoundPage` Edge cases: - Cart state is lost on refresh because Zustand store is not persisted. - If the user has no configured mail client, checkout may not complete. - Large carts can create a long `mailto:` URL; current catalog is small, so this is acceptable. - No sizes are selected in cart. Products display available sizes, but adding to bag does not capture a chosen size. - No stock, discounts, taxes, or address collection exist. - Platform SDKs in `index.html` are unused; do not assume backend persistence is active. ## Conventions - Use ES modules with direct CDN imports. Do not introduce Node-only imports, npm package assumptions, or build-step-only syntax. - Use `html` from `src/jsx.js` for all component templates: ```js import { html } from '../jsx.js'; export function Example() { return html`

Content

`; } ``` - Component files export named functions, e.g. `export function Header()`. - Shared UI belongs in `src/components/`; route-level screens belong in `src/pages/`. - Keep cart changes centralized in `src/store/useCartStore.js`; components should call store actions instead of mutating `items`. - Keep product catalog edits in `src/data/products.js`. Product IDs should be stable slugs because cart identity depends on `id`. - When mapping lists, provide stable `key` values in the `html` template. - Prefer semantic elements (`section`, `article`, `nav`, `header`, `main`) and preserve accessible labels used throughout the app. - To add a new page: 1. Create `src/pages/NewPage.js`. 2. Export `NewPage`. 3. Import it in `src/App.js`. 4. Add a ``} />`. 5. Add `NavLink` entries in `Header.js` and/or `BottomNav.js` if it should be globally reachable. - To add a new product: 1. Add an object to `products` in `src/data/products.js`. 2. Use an existing category or add the category to `categories`. 3. Provide a `gradient`; product cards and cart thumbnails rely on it. - To add persistent cart behavior, extend `useCartStore.js` with Zustand persistence carefully; current UI assumes synchronous in-memory state. ## 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.