E-commerce

Écru Fashion Storefront

Quick Start

Requirements: Node.js 18+ and npm. No environment variables or backend are required. Product photos load from Unsplash, so dev needs a network connection until you swap in your own images.

Download and unzip

After purchase, download the zip from your order confirmation email and unzip it.

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:3000. Routes:

/shop - filterable product listing
/shop/[slug] - product page with gallery and variants
/cart, /checkout (mock), /about

Build and test

npm run build
npm start

# optional
npm test   # Vitest tests for the cart reducer

Folder Structure

Next.js App Router. The cart is a typed, unit-tested module persisted to localStorage via React context. The 12-product catalogue lives in one data file.

src/
├── app/
│   ├── layout.tsx              # Fraunces + Hanken Grotesk + Geist Mono; CartProvider + CartDrawer
│   ├── globals.css             # Design tokens (@theme) - paper / ink / clay
│   ├── page.tsx                # Editorial home (hero, featured, lookbook, values, press, newsletter)
│   ├── shop/page.tsx           # Filterable shop (ShopView)
│   ├── shop/[slug]/page.tsx    # Product page - gallery, variants, add to cart
│   ├── cart/page.tsx           # Cart with quantity editing + recommendations
│   ├── checkout/page.tsx       # Single-page mock checkout
│   ├── about/page.tsx          # About
│   └── not-found.tsx           # 404
├── components/                 # Navbar, Footer, ProductCard, ProductGallery, VariantSelector,
│                               # AddToCart, CartProvider, CartDrawer, CheckoutForm, OrderSummary, ...
└── lib/
    ├── products.ts             # 12-product catalogue + Product type
    ├── cart.ts                 # Pure cart helpers: addLine, updateQty, removeLine, computeSubtotal
    └── cart.test.ts            # Unit tests for the cart logic

Customization

Brand name and colors

The brand is "Écru" - find-and-replace it across src/. Colors are defined in the @theme block of src/app/globals.css: --color-paper, --color-ink, and the --color-clay accent. Fonts (Fraunces, Hanken Grotesk, Geist Mono) load in src/app/layout.tsx.

Products

All products are in src/lib/products.ts as a typed array. Each has id, slug, name, price, optional salePrice, category, colors, sizes, images, description, materials, details, and an optional badge. The category union is in the same file.

Images

The demo pulls photos from Unsplash via a small U() helper in products.ts. Replace those URLs with your own. If you host images on another domain, add it to images.remotePatterns in next.config.ts (Unsplash is already allowed); for local images, drop them in public/ and reference them directly.

Cart and checkout

Cart logic is pure and tested in src/lib/cart.ts; CartProviderwraps it with context and localStorage. Checkout is a mock ("Demo only - no payment is processed") - wire your payment provider into the onSubmit handler in CheckoutForm.tsx.

Deployment

Static and dependency-free for the demo. Deploy to Vercel, Netlify, or any Next.js host.

Allow your image host

Product images load remotely, so confirm your image domain is listed in images.remotePatterns in next.config.ts. Unsplash is preconfigured for the demo.

Deploy

Import the repo on Vercel and ship - no env vars or database needed for the demo. Add your payment provider keys only when you wire up real checkout.

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.