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

# Welcome to Crave Docs

> Everything you need to build, customize, and deploy a storefront ordering experience with the Crave platform.

Crave provides a complete toolkit for building food ordering storefronts — a CLI to scaffold projects, a TypeScript SDK for frontend apps, prebuilt UI components, and a REST API for any platform. These docs cover everything from your first quickstart to production deployment.

## Start in 5 minutes

The fastest path is to scaffold a storefront, add your Crave credentials, and run it locally.

<CodeGroup>
  ```bash npm theme={null}
  npx craveup 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 your API key and location ID from the [Crave Dashboard](https://craveup.com/login).

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

## Running? Read this next

<CardGroup cols={3}>
  <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>

## 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 15 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="Webhooks" icon="webhook" href="/guides/webhooks">
    Receive real-time notifications for order lifecycle events like creation, confirmation, and completion.
  </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={3}>
  <Card title="Discord" icon="message-circle" href="https://discord.gg/cRukCSDm8H">
    Join our Discord server to chat with the team and other developers.
  </Card>

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