> ## Documentation Index
> Fetch the complete documentation index at: https://docs.craveup.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Custom Storefront

> Combine the CLI, Storefront SDK, and REST APIs to launch a bespoke ordering experience.

This guide walks through the end-to-end journey: scaffold the starter template, wire credentials, extend the UI with the Storefront SDK, and fall back to raw REST calls when needed.

## 1. Scaffold with the CLI

```bash theme={null}
npx craveup init
```

* Pick the template that matches your brand.
* Authenticate with the dashboard to generate an API key.
* Let the CLI install dependencies and open the project.

```bash theme={null}
cd my-crave-storefront
pnpm dev --port 3000
```

You now have a fully functional storefront running against real Crave data.

## 2. Configure environment variables

Copy `.env.example` to `.env.local` and provide the values from the dashboard:

```env theme={null}
# Optional: override the API base URL (usually inferred from the API key).
# NEXT_PUBLIC_API_URL=https://api.craveup.com/api/v1
NEXT_PUBLIC_CRAVEUP_API_KEY=sk_live_abc123
NEXT_PUBLIC_LOCATION_ID=loc_456def
NEXT_PUBLIC_LOCATION_SLUG=downtown-pizza
```

Restart the dev server so changes take effect.

## 3. Use the Storefront SDK

The template exposes a ready-to-use client at `src/lib/storefront-client.ts`.

```ts theme={null}
import { storefrontClient } from '@/lib/storefront-client';

export async function preloadMenu(locationId: string) {
  const menus = await storefrontClient.locations.getById(locationId, {
    params: { orderDate: '2024-10-10', orderTime: '18:30' },
  });

  return menus.categories.map((category) => ({
    name: category.name,
    products: category.products,
  }));
}
```

Need custom behavior? The SDK exposes granular methods for carts, discounts, analytics events, and more.

## 4. Implement checkout flows

Use the generated React components or wire up your own screens:

```ts theme={null}
import { storefrontClient } from '@/lib/storefront-client';

export async function completeCheckout(cartId: string) {
  const cart = await storefrontClient.cart.get(process.env.NEXT_PUBLIC_LOCATION_ID!, cartId);

  // Create payment intent via REST (Stripe integration)
  await fetch('/api/payments', {
    method: 'POST',
    body: JSON.stringify({ cartId: cart.id, amount: cart.orderTotal }),
  });
}
```

## 5. Call REST endpoints for non-JS services

If you need to integrate a kiosk, POS, or mobile app, call the same endpoints directly:

```bash theme={null}
curl -X GET "https://api.craveup.com/api/v1/locations/loc_456def/time-intervals" \
  -H "X-API-Key: $CRAVEUP_API_KEY"
```

## 6. Deploy

* **Preview** – Use Vercel, Netlify, or your preferred hosting to deploy the Next.js app.
* **Secrets** – Store API keys using your platform’s secret manager.
* **Monitoring** – Forward logs and errors to your observability stack to track storefront health.

## Next steps

* Harden your storefront with custom auth flows or loyalty integrations.
* Explore analytics events to capture funnel performance.
* Review the [API reference](/api-reference/overview/api-overview) whenever you add new features.