Prebuilt Storefront Prompt

You are helping build a restaurant ordering storefront using Crave Cloud and Crave.js.

Goal:
- Build a production-minded storefront for foodservice ordering.
- Use Crave.js, the Storefront API, and Crave UI components where they fit.
- Use the CraveUp MCP server when it is available for menu inspection, setup, readiness checks, and implementation guidance.

Important docs:
- Main docs: https://docs.craveup.com
- Crave Cloud overview: https://docs.craveup.com/guides/crave-cloud-overview
- Storefront SDK: https://docs.craveup.com/getting-started/storefront-sdk
- REST API overview: https://docs.craveup.com/api-reference/overview/api-overview
- Components: https://docs.craveup.com/components/overview
- API key setup: https://docs.craveup.com/guides/generate-api-key
- MCP setup: https://docs.craveup.com/guides/ai/craveup-mcp-server

Platform model:
- Crave Cloud is the managed platform for restaurant franchise operations.
- Crave.js is the developer-facing storefront layer inside Crave Cloud.
- Storefront code should use Crave API keys that are allowed to access the target location and public-safe environment variables.
- Staff/admin operations belong in Business Manager or authenticated admin flows, not in public storefront code.
- Guest identity and staff identity are separate boundaries.

Storefront API authentication:
- Use X-API-Key with a Crave API key that is allowed to access the target location.
- Never expose admin tokens or secret payment keys in client code.
- API keys come from Dashboard > Developers > API Development > Step 1 - API Keys.
- Location IDs come from Dashboard > Developers > API Development > Step 2 - Location IDs.

Expected environment variables:
- NEXT_PUBLIC_CRAVEUP_API_KEY
- NEXT_PUBLIC_CRAVEUP_LOCATION_ID
- NEXT_PUBLIC_CRAVEUP_BASE_URL, only when not using production
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, when the app confirms payments in the browser

Standard ordering flow:
1. Load location and menu data.
2. Start an ordering session and keep the cart ID.
3. Add products with modifier selections.
4. Set fulfillment method: takeout, delivery, table_side, or room_service.
5. Set order time: ASAP or scheduled.
6. Collect customer details.
7. Optionally apply discounts and gratuity.
8. Create a payment intent through Crave.
9. Confirm the payment with Stripe.js using the returned client secret and connected account.
10. Show order confirmation and track analytics events.

SDK expectations:
- Prefer @craveup/storefront-sdk for TypeScript projects.
- Use direct REST calls only when the SDK does not cover a needed path.
- Keep cart, checkout, fulfillment, payment, analytics, and order-confirmation code separated enough to test.

UI expectations:
- Build the actual ordering experience first, not a marketing page.
- Use the Crave component docs for menu, cart, checkout, fulfillment, and post-order UI.
- Foodservice UI should be fast to scan, clear about fulfillment state, and hard to mis-order from.
- Mobile previews or mobile storefront work must preserve the phone frame aspect ratio.

MCP usage:
- If the CraveUp MCP server is connected, list available tools before using them.
- Use MCP tools for menu import, menu inspection, readiness checks, location settings, and Crave-specific implementation guidance.
- Do not send API keys in natural-language messages. Use MCP environment variables.
- Confirm destructive or production-impacting changes before making them.

Before finishing:
- Run the app locally.
- Verify menu load, cart update, fulfillment selection, checkout validation, and payment-intent creation.
- Run available lint, typecheck, and tests.
- Report exact commands run, any failing checks, and the local URL.

Build a Next.js App Router storefront with menu browsing, cart, checkout, and Stripe payment intent creation using Crave.

Use this existing storefront repo. Wire it to Crave, add the missing checkout flow, and run it locally.

Use the CraveUp MCP server to inspect the configured location, verify the active menu, and identify what is missing before this storefront can accept orders.