Skip to main content
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: 
NEXT_PUBLIC_API_URL=https://api.craveup.com/api/v1
NEXT_PUBLIC_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.
⌘I