## What is the Storefront?

The YNS storefront is an open-source Next.js application that serves as the customer-facing frontend for your store. It connects to the YNS platform via the Commerce SDK and provides:

- Product listing and detail pages
- Shopping cart with real-time updates
- Checkout powered by Stripe
- Collection and search pages
- Newsletter subscription
- Legal pages

## Architecture

The storefront is built with modern React patterns:

```
app/
  page.tsx              # Home with featured products
  product/[slug]/       # Product detail pages
  collection/[slug]/    # Collection listings
  cart/                 # Cart sidebar and actions
  search/               # Search with pagination
  order/success/        # Post-checkout confirmation
  legal/[slug]/         # Terms, privacy, etc.
  newsletter/           # Newsletter signup action
```

### Server Components

All data fetching happens in React Server Components. Pages use `async` components that fetch data directly from the YNS API:

```tsx
export default async function ProductPage({ params }) {
  const { slug } = await params;
  const product = await commerce.productGet({ idOrSlug: slug });
  // Render product...
}
```

### Cart Management

The cart uses a combination of React Context (for client-side state) and Server Actions (for mutations):

- `cart-context.tsx` — client-side cart state
- `cart-sidebar.tsx` — cart UI component
- `actions.ts` — Server Actions for add/remove/update

## Tech Stack

- **Next.js 16** (canary) with App Router
- **React 19** with Server Components
- **TypeScript** with strict mode
- **Tailwind CSS v4** for styling
- **Commerce SDK** for API access
- **Radix UI** + **shadcn/ui** for components
- **Biome** for linting and formatting