Restaurant Storefront Starter

Launch a production-ready restaurant ordering app in minutes.

• Used in real multi-location deployments
• Includes menu, cart, checkout, auth
• Works with Square / Toast (or mock data)

---

Key Features

• CraveUp Ordering Stack – Integrates the CraveUp Storefront SDK for live menus, cart mutations, and checkout handoffs.
• Rich Menu Experience – Sticky category navigation, featured carousel, and responsive cards with hover states.
• Product Dialog & Drawer – Desktop dialogs and mobile drawers share the same content for parity and accessibility.
• Cart & Recommendations – Persistent sidebar/cart drawer with quantity controls, item notes, and CTA for checkout.
• Theme Ready – Light/dark palettes, brand tokens, and easily adjustable typography in Tailwind.
• Accessible UI – Built on shadcn/ui + Radix primitives, ensuring keyboard navigation and screen-reader friendliness.

---

Demo

Live Demo: leclerc-bakery.order.page

Hero (Light)	Hero (Dark)

Menu Grid	Product Dialog

Cart Sidebar

---

Deploy with Vercel

---

Tech Stack

• Next.js 15 (App Router)
• React 19
• TypeScript
• Tailwind CSS
• shadcn/ui + Radix UI
• CraveUp Storefront SDK

---

Getting Started

1. Clone the repo

   git clone --depth=1 https://github.com/your-org/leclerc-bakery
   cd leclerc-bakery

2. Install dependencies

   pnpm install

3. Configure environment variables (see below).
4. Run the dev server

   pnpm dev

   Visit http://localhost:3000 to explore the storefront.

---

Environment Variables

Start from the provided template:

cp .env.example .env.local

Replace the placeholders with your own credentials.

Key	Required	Description
NEXT_PUBLIC_CRAVEUP_API_KEY	✅	Public API key from the CraveUp dashboard.
NEXT_PUBLIC_LOCATION_ID	✅	Default location used for menus and cart operations.
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY	✅	Enables Google Maps for address autocomplete + delivery radius.

Need sandbox access? Email hello@craveup.com.

---

Scripts

Command	Description
pnpm dev	Start the local development server
pnpm build	Create the optimized production build
pnpm start	Serve the production build locally
pnpm lint	Run ESLint checks

---

Customization Guide

1. Branding – Replace imagery in public/images and update color tokens in src/app/globals.css.
2. Copywriting – Adjust hero, footer, story, and CTA text inside src/app/components/.
3. Menu Data – Manage categories/products within the CraveUp dashboard; the template consumes the live API response for NEXT_PUBLIC_LOCATION_ID.
4. UX Enhancements – Extend cart behavior or product options by editing hooks/providers under src/hooks and src/app/providers.
5. Testing – Run pnpm lint and pnpm build before shipping to catch regressions early.

---

Project Structure

src/
|-- app/                # App Router routes, layouts, providers
|-- components/         # Hero, menu, cart, shared UI
|-- hooks/              # Cart + ordering session hooks
|-- lib/                # API clients, constants, utilities
`-- store/              # Zustand stores
public/                 # Images, screenshots, icons
README.md

---

Deployment on Vercel

1. Push your changes to GitHub/GitLab/Bitbucket.
2. Visit vercel.com/new and import the repository.
3. Add the environment variables listed above in the project settings.
4. Deploy—Vercel installs via pnpm, runs pnpm build, and serves the production bundle.
5. Configure preview environments, analytics, and custom domains as needed.

---

Support & Reference

• CraveUp Docs
• Next.js Documentation
• Tailwind CSS Docs
• shadcn/ui Documentation

Need implementation help? Reach out to hello@craveup.com.

---

License

Distributed under the MIT License — see LICENSE for details.