Build a Custom Storefront - Crave API Documentation

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

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.

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:

# 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.

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:

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:

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 whenever you add new features.

​1. Scaffold with the CLI

​2. Configure environment variables

​3. Use the Storefront SDK

​4. Implement checkout flows

​5. Call REST endpoints for non-JS services

​6. Deploy

​Next steps