> ## 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 Restaurant Ordering App in Minutes

> Scaffold a branded storefront, connect menus, carts, checkout, fulfillment, and payments, then ship against the Crave API.

Crave gives food and beverage developers the ordering layer they usually have to stitch together themselves: menu data, modifiers, cart state, checkout, fulfillment, payments, analytics, reusable UI components, and APIs that work across web and mobile apps.

Crave.js is the storefront developer surface inside **Crave Cloud**, a managed platform for franchise ordering, identity boundaries, loyalty integrations, payment routing, and multi-location operations.

## Start in 5 minutes

The fastest path is to scaffold a storefront, add its public API origin and restaurant identifiers, and run it locally.

<CodeGroup>
  ```bash npm theme={null}
  npx @craveup/cli init
  cd crave-storefront
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm dlx craveup init
  cd crave-storefront
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn dlx craveup init
  cd crave-storefront
  yarn dev
  ```
</CodeGroup>

Open [http://localhost:3000](http://localhost:3000), then use the generated `.env.local` to add the public API origin, merchant slug, and location ID. A storefront never receives a Crave API key.

<Card title="Configure the Storefront SDK" icon="package" href="/getting-started/storefront-sdk">
  Connect the generated app to published merchant, location, menu, and cart resources without a browser credential.
</Card>

<Tip>
  Already have an app? Skip the scaffold and install the exact `@craveup/storefront-sdk@2.0.1` release directly.
</Tip>

## Running? Read this next

<CardGroup cols={3}>
  <Card title="Crave Cloud Overview" icon="cloud" href="/guides/crave-cloud-overview">
    Understand how Crave.js fits into the broader franchise platform.
  </Card>

  <Card title="Deploy Safely" icon="shield-check" href="/guides/deployment">
    Register exact browser origins and keep private credentials out of storefront bundles.
  </Card>

  <Card title="Use AI with Crave" icon="bot" href="/guides/ai/craveup-mcp-server">
    Connect the CraveUp MCP server and use a prebuilt storefront prompt before handing work to an AI agent.
  </Card>

  <Card title="CLI Quickstart" icon="terminal" href="/getting-started/cli-quickstart">
    Learn the CLI flags, templates, and generated project structure.
  </Card>

  <Card title="Storefront SDK" icon="package" href="/getting-started/storefront-sdk">
    Connect your UI to menus, carts, checkout, and analytics with typed helpers.
  </Card>

  <Card title="REST API Essentials" icon="braces" href="/getting-started/rest-api">
    Call Crave endpoints from any platform using standard HTTP requests.
  </Card>
</CardGroup>

## Where this fits

<CardGroup cols={2}>
  <Card title="Developer Package and Crave Cloud" icon="git-branch" href="/guides/open-source-and-cloud">
    Learn what is available to developers and what stays managed by Crave Cloud.
  </Card>

  <Card title="Build a Custom Storefront" icon="wrench" href="/guides/build-custom-storefront">
    Combine the CLI, Storefront SDK, REST APIs, and UI components for a branded ordering experience.
  </Card>

  <Card title="Prebuilt Storefront Prompt" icon="message-square-code" href="/guides/ai/build-storefront-prompt">
    Give Cursor, Claude, ChatGPT, Codex, or another agent the right Crave context before it edits your app.
  </Card>
</CardGroup>

## Quickstarts & Tutorials

Explore our end-to-end tutorials and getting started guides for different application stacks.

<CardGroup cols={2}>
  <Card title="Next.js" icon="hexagon" href="/quickstarts/nextjs">
    Build a storefront with Next.js 16.3 App Router and the Crave SDK.
  </Card>

  <Card title="React" icon="atom" href="/quickstarts/react">
    Get started with React + Vite and the Crave SDK.
  </Card>

  <Card title="Vanilla JavaScript" icon="file-code" href="/quickstarts/vanilla-js">
    Build a storefront with plain JavaScript and the REST API.
  </Card>

  <Card title="React Native" icon="smartphone" href="/quickstarts/mobile">
    Create a mobile ordering app with Expo and the Crave SDK.
  </Card>
</CardGroup>

## UI Components

Crave's prebuilt UI components give you a fully-functional ordering experience in minutes — menus, carts, checkout, and fulfillment out of the box.

<CardGroup cols={2}>
  <Card title="Component Overview" icon="puzzle" href="/components/overview">
    Browse all available components and learn how they work together.
  </Card>

  <Card title="Storefront SDK" icon="package" href="/getting-started/storefront-sdk">
    The TypeScript SDK that powers the components and data fetching.
  </Card>
</CardGroup>

## SDK & API Reference

Dig into our SDK reference documentation and REST API endpoints. Everything you need to integrate Crave into any application.

<CardGroup cols={2}>
  <Card title="SDK Reference" icon="book-open" href="/api-reference/overview/api-overview">
    API overview, authentication, endpoints, and response formats.
  </Card>

  <Card title="Core Concepts" icon="lightbulb" href="/api-reference/overview/core-concepts">
    Merchants, locations, menus, carts, and the ordering lifecycle.
  </Card>
</CardGroup>

## Explore by feature

Crave supports the full ordering lifecycle. Pick a feature to dive deep.

<CardGroup cols={2}>
  <Card title="Menu & Products" icon="utensils" href="/guides/display-menu">
    Display categories, products, and modifiers. Support multiple menus with scheduled availability.
  </Card>

  <Card title="Cart & Ordering" icon="shopping-cart" href="/guides/manage-cart">
    Manage the cart lifecycle — add items, apply modifiers, handle discounts, and submit orders.
  </Card>

  <Card title="Payments" icon="credit-card" href="/guides/accept-payments">
    Accept payments with Stripe Connect. Handle payment intents, test cards, and error recovery.
  </Card>

  <Card title="Fulfillment" icon="truck" href="/guides/fulfillment-methods">
    Configure takeout, delivery, table-side ordering, and room service for your locations.
  </Card>

  <Card title="Analytics" icon="bar-chart-3" href="/guides/analytics">
    Track funnel events across the ordering flow and measure conversion rates.
  </Card>

  <Card title="Outbound Webhooks (Planned)" icon="webhook" href="/guides/webhooks">
    Review the current availability boundary before designing an event-driven integration.
  </Card>
</CardGroup>

## Explore by framework

<CardGroup cols={2}>
  <Card title="Next.js" icon="hexagon" href="/quickstarts/nextjs">
    Server-side rendering with the App Router. Fetch menus on the server, manage carts on the client.
  </Card>

  <Card title="React" icon="atom" href="/quickstarts/react">
    Client-side React with Vite. Build a custom SPA storefront with the SDK.
  </Card>

  <Card title="Vanilla JavaScript" icon="file-code" href="/quickstarts/vanilla-js">
    No framework required. Call the REST API directly from plain JavaScript.
  </Card>

  <Card title="React Native / Expo" icon="smartphone" href="/quickstarts/mobile">
    Build native mobile ordering apps with Expo and the Crave SDK.
  </Card>
</CardGroup>

## Beyond the basics

<CardGroup cols={2}>
  <Card title="Theming" icon="palette" href="/guides/theming">
    Customize colors, fonts, and component styles to match your restaurant's brand.
  </Card>

  <Card title="Testing" icon="flask-conical" href="/guides/testing">
    Use test mode, mock data, and example test suites to validate your integration.
  </Card>

  <Card title="Deployment" icon="rocket" href="/guides/deployment">
    Deploy to Vercel, Netlify, Docker, or custom hosting with production best practices.
  </Card>

  <Card title="Error Handling" icon="triangle-alert" href="/guides/error-codes">
    Handle every error the API can return with status codes, retry strategies, and user messages.
  </Card>
</CardGroup>

## Community

<CardGroup cols={2}>
  <Card title="Slack" icon="hash" href="https://join.slack.com/t/cravejscommunity/shared_invite/zt-3hfr081io-aYuLC3n6gBFKQuho0HrTng">
    Connect with the Crave community on Slack.
  </Card>

  <Card title="Support" icon="mail" href="mailto:hello@craveup.com">
    Reach out to our team directly for help with your integration.
  </Card>
</CardGroup>
