Quick Start

Overview

This guide will help you build a basic restaurant storefront using the Crave API. You’ll have a working menu and cart system in under 30 minutes.

Prerequisites

Node.js 18+ and npm/yarn
Next.js project (or create one with npx create-next-app@latest)
Paid Crave subscription (required for API access)
API key (see below for how to obtain)

Step 1: Get Your API Key

Option 1: Developer Dashboard

Visit dashboard.craveup.com/developers to generate your API key:

Sign up or log in to your Crave developer account
Navigate to the API Keys section
Click “Create New API Key”
Name your key (e.g., “My Storefront API Key”)
Copy your API key - Store it securely (you won’t see it again)
Note your Location ID - This will be provided in your dashboard

Option 2: Request from Merchant

If you’re building for a specific merchant, contact them directly to obtain your API key and location ID.

Option 3: Generate via API (Enterprise Only)

Admin APIs unlock powerful automation capabilities for large-scale operations. If you’re building multi-tenant platforms, managing hundreds of locations, creating white-label solutions, or need programmatic control over merchant settings, admin API access can streamline your operations significantly. Key Benefits of Admin API Access:

Automated onboarding of new merchants and locations
Bulk management of menus, pricing, and inventory across multiple locations
Dynamic API key generation for client applications
Real-time sync with your existing restaurant management systems
Custom analytics and reporting across your entire merchant network

Admin APIs are available for Enterprise tier customers only. To generate API keys programmatically:

Contact support at hello@craveup.com for beta access request
Provide your use case and Enterprise tier details
Receive admin API documentation and authentication tokens
Generate keys programmatically:

curl -X POST https://api.cravejs.com/api/internal/accounts/api-keys \
  -H "Authorization: Bearer YOUR_ADMIN_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "My Storefront API Key"
  }'

Note: This option requires Enterprise tier subscription and beta access approval.

Step 2: Environment Setup

Create a .env.local file in your project root:

# API Configuration (see Introduction for base URL details)
CRAVE_API_KEY=your_api_key_here
CRAVE_API_BASE_URL=https://api.cravejs.com

# Location Configuration  
NEXT_PUBLIC_LOCATION_ID=your_location_id_here

# Stripe Configuration (for payments)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

Test Environment

For development and testing, you can use these test values:

# Test Environment - connects to production API with test location
CRAVE_API_BASE_URL=https://api.cravejs.com
CRAVE_API_KEY=your_api_key_here
NEXT_PUBLIC_LOCATION_ID=your_location_id_here

Note: The test environment uses the production API with a test location and API key provided for development purposes.

Step 3: Install Dependencies

npm install @stripe/stripe-js @stripe/react-stripe-js

Step 4: Create API Client

Create lib/api-client.js:

const API_BASE_URL = process.env.CRAVE_API_BASE_URL;
const API_KEY = process.env.CRAVE_API_KEY;

export async function craveApi(endpoint, options = {}) {
  const url = `${API_BASE_URL}/api/v1${endpoint}`;
  
  const response = await fetch(url, {
    ...options,
    headers: {
      'X-API-Key': API_KEY,
      'Content-Type': 'application/json',
      ...options.headers
    }
  });
  
  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`);
  }
  
  return response.json();
}

Create components/Menu.js:

import { useState, useEffect } from 'react';
import { craveApi } from '../lib/api-client';

export default function Menu({ locationId, onAddToCart }) {
  const [menu, setMenu] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    async function fetchMenu() {
      try {
        const data = await craveApi(`/api/v1/locations/${locationId}/menus`);
        setMenu(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    fetchMenu();
  }, [locationId]);
  
  if (loading) return <div>Loading menu...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!menu) return <div>No menu available</div>;
  
  return (
    <div className="menu">
      <h2>Menu</h2>
      {menu.categories?.map(category => (
        <div key={category.id} className="category">
          <h3>{category.name}</h3>
          <div className="products">
            {category.products?.map(product => (
              <div key={product.id} className="product">
                <h4>{product.name}</h4>
                <p>{product.description}</p>
                <p className="price">${(product.price / 100).toFixed(2)}</p>
                <button onClick={() => onAddToCart(product)}>
                  Add to Cart
                </button>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Step 6: Create Cart Component

Create components/Cart.js:

import { useState } from 'react';

export default function Cart({ items, onUpdateQuantity, onRemoveItem }) {
  const total = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  
  return (
    <div className="cart">
      <h2>Cart</h2>
      {items.length === 0 ? (
        <p>Your cart is empty</p>
      ) : (
        <>
          {items.map(item => (
            <div key={item.id} className="cart-item">
              <h4>{item.name}</h4>
              <div className="quantity-controls">
                <button onClick={() => onUpdateQuantity(item.id, item.quantity - 1)}>
                  -
                </button>
                <span>{item.quantity}</span>
                <button onClick={() => onUpdateQuantity(item.id, item.quantity + 1)}>
                  +
                </button>
              </div>
              <p className="price">${(item.price / 100).toFixed(2)}</p>
              <button onClick={() => onRemoveItem(item.id)}>Remove</button>
            </div>
          ))}
          <div className="cart-total">
            <strong>Total: ${(total / 100).toFixed(2)}</strong>
          </div>
        </>
      )}
    </div>
  );
}

Step 7: Create Main Page

Update pages/index.js:

import { useState } from 'react';
import Menu from '../components/Menu';
import Cart from '../components/Cart';

export default function Home() {
  const [cartItems, setCartItems] = useState([]);
  const locationId = process.env.NEXT_PUBLIC_LOCATION_ID;
  
  const addToCart = (product) => {
    setCartItems(prevItems => {
      const existingItem = prevItems.find(item => item.id === product.id);
      
      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      } else {
        return [...prevItems, { ...product, quantity: 1 }];
      }
    });
  };
  
  const updateQuantity = (productId, newQuantity) => {
    if (newQuantity <= 0) {
      removeFromCart(productId);
      return;
    }
    
    setCartItems(prevItems =>
      prevItems.map(item =>
        item.id === productId
          ? { ...item, quantity: newQuantity }
          : item
      )
    );
  };
  
  const removeFromCart = (productId) => {
    setCartItems(prevItems => prevItems.filter(item => item.id !== productId));
  };
  
  return (
    <div style={{ display: 'flex', gap: '2rem', padding: '2rem' }}>
      <div style={{ flex: 2 }}>
        <Menu locationId={locationId} onAddToCart={addToCart} />
      </div>
      <div style={{ flex: 1 }}>
        <Cart 
          items={cartItems}
          onUpdateQuantity={updateQuantity}
          onRemoveItem={removeFromCart}
        />
      </div>
    </div>
  );
}

Step 8: Add Basic Styling

Create styles/globals.css:

.menu {
  max-width: 800px;
}

.category {
  margin-bottom: 2rem;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.product {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

.price {
  font-weight: bold;
  color: #007bff;
}

.cart {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  position: sticky;
  top: 2rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #007bff;
  text-align: right;
}

Step 9: Test Your Storefront

Start your development server:

npm run dev

Open http://localhost:3000
Verify that:
- Menu loads correctly
- You can add items to cart
- Cart updates properly
- No console errors

Next Steps

Now that you have a basic storefront:

Add Payments: Follow the Stripe Integration Guide
Improve UI: Add better styling and components
Add Features: Customer info, order scheduling, etc.
Error Handling: Add proper error boundaries
Performance: Add loading states and caching

Common Issues

Menu not loading: Check your API key and location ID
CORS errors: Make sure you’re using server-side API calls
Rate limiting: Implement proper caching to avoid hitting limits

Your basic storefront is now ready! This foundation can be extended with payments, customer management, and more advanced features.

Getting Started

API Integration

Implementation

Overview

Prerequisites

Step 1: Get Your API Key

Option 1: Developer Dashboard

Option 2: Request from Merchant

Option 3: Generate via API (Enterprise Only)

Step 2: Environment Setup

Test Environment

Step 3: Install Dependencies

Step 4: Create API Client

Step 5: Create Menu Component

Step 6: Create Cart Component

Step 7: Create Main Page

Step 8: Add Basic Styling

Step 9: Test Your Storefront

Next Steps

Common Issues

Getting Started

API Integration

Implementation

​Overview

​Prerequisites

​Step 1: Get Your API Key

​Option 1: Developer Dashboard

​Option 2: Request from Merchant

​Option 3: Generate via API (Enterprise Only)

​Step 2: Environment Setup

​Test Environment

​Step 3: Install Dependencies

​Step 4: Create API Client

​Step 5: Create Menu Component

​Step 6: Create Cart Component

​Step 7: Create Main Page

​Step 8: Add Basic Styling

​Step 9: Test Your Storefront

​Next Steps

​Common Issues

Overview

Prerequisites

Step 1: Get Your API Key

Option 1: Developer Dashboard

Option 2: Request from Merchant

Option 3: Generate via API (Enterprise Only)

Step 2: Environment Setup

Test Environment

Step 3: Install Dependencies

Step 4: Create API Client

Step 5: Create Menu Component

Step 6: Create Cart Component

Step 7: Create Main Page

Step 8: Add Basic Styling

Step 9: Test Your Storefront

Next Steps

Common Issues