taurr-draft

TAURR — Next.js Frontend

Premium footwear storefront. App Router, React 18, no CSS framework — plain CSS + styled-jsx, dark “leather” theme.

Run it

npm install
npm run dev

Open http://localhost:3000

Pages

• / — home, hero, category tiles, featured carousel

• /category/[slug] — sneakers

  boots

  formal

  sandals, sort + filter

• /product/[id] — gallery, size grid, stock-aware add to cart
• /cart — line items, qty edit, subtotal, points preview
• /checkout — shipping form + Razorpay Checkout.js integration
• /login — Email OTP and Email/Password tabs (Supabase)
• /profile — account details, order history, TAURR Points
• /rewards — how TAURR Points work, tiers
• /search — query by name/category/color
• /support — contact form + FAQ accordion
• /info/[slug] — about, privacy, terms, shipping, returns

Wiring up the backend

This is frontend-only. To connect real data:

1. Copy .env.local.example to .env.local and fill in:
   • NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY
   • NEXT_PUBLIC_RAZORPAY_KEY_ID
2. Swap lib/products.js mock data for Supabase queries.
3. In app/checkout/page.js, replace the direct Razorpay options object with a call to a server route / Supabase Edge Function that creates a Razorpay order and returns order_id — needed for real payment capture and verification.
4. app/profile/page.js uses mock orders (MOCK_ORDERS) — replace with a Supabase query scoped to the signed-in user.
5. components/AuthProvider.js and lib/supabaseClient.js already wire into real Supabase auth once env vars are set; without them the client falls back to a no-op stub so the UI still renders.

Notes

• Cart persists to localStorage (taurr_cart_v1).
• Product images are Unsplash placeholders — swap for real product photography.
• Theme tokens live in app/globals.css (--balsamico, --burnt-coffee, --honey-garlic, --whiskey-sour, --oxblood, --kraft).