OneEntry Next.js Restaurant Demo

A reference restaurant storefront built on Next.js 16 and React 19, fully integrated with the OneEntry headless CMS.

It demonstrates how a content-managed restaurant site — menu, product catalog, cart and checkout, table reservations, user profile, promo pages — can be assembled from CMS data managed entirely from the OneEntry admin panel.

This is a free demo / reference implementation. It is intended for learning, prototyping, and as a starting point for hospitality projects on OneEntry — not as a production storefront.

---

Table of Contents

• Project Goals
• Key Features
• Tech Stack
• Getting Started with OneEntry
• Environment Variables
• Run Locally
• Scripts
• Project Structure
• Testing
• Contributing
• Security
• License
• Community & Support

---

Project Goals

1. Showcase OneEntry's Capabilities for Hospitality. A clear example of how OneEntry can drive a full restaurant site — menu, ordering, reservations — with everything editable from the admin panel, without code changes.
2. Speed Up Front-End Delivery. A ready foundation for studios and teams launching restaurant or food-service projects on top of OneEntry. Adapt the design, plug in your brand, ship.
3. Reference Implementation. Production patterns for the OneEntry SDK on the App Router — server fetchers for SSR and RTK Query hooks for client-side data.

Key Features

• Full Control via Admin Panel. Menu items, categories, promo blocks, profile fields, and reservation forms are all driven from the OneEntry admin.
• Flexible Content Management. Titles, descriptions, weights, prices, allergens, gallery images — managed entirely through OneEntry. No deploy required to update content.
• Quick Start & Easy Adaptation. Tailwind v4 with a documented token system. Adjust styling, components, and grid to match your brand.
• Scalability. SSR via the App Router plus an RTK Query cache on the client. Suitable for both single-location restaurants and multi-location chains.

Tech Stack

• Framework: Next.js 16 (App Router) + React 19
• Language: TypeScript (strict)
• State: Redux Toolkit + redux-persist (cart, favorites, form-field memory)
• Data: OneEntry SDK — server fetchers for SSR and RTK Query for client-side data
• Auth: Email and Google OAuth sign-in providers with code-based account activation
• Payments: Stripe redirect flow via the OneEntry Orders API
• Styling: Tailwind v4 with @theme inline { … } tokens
• Animations: GSAP + @gsap/react
• Testing: Jest + Testing Library

Detailed Feature List

• OneEntry SDK integration: server fetchers (app/api/server/*) for SSR and RTK Query hooks (app/api/api/RTKApi.ts) for client-side data.
• User authentication: email and Google OAuth sign-in providers, with code-based account activation.
• State management: Redux Toolkit plus redux-persist for cart, favorites, and form-field memory.
• Menu & catalog: dynamic product catalog with filtering, pagination (NEXT_PUBLIC_SHOP_PAGE_LIMIT), and category pages.
• Cart & checkout: delivery line driven by NEXT_PUBLIC_DELIVERY_PRODUCT_ID; order creation via the OneEntry Orders API; Stripe-based payment redirects.
• Reservations: table-booking form backed by a OneEntry form marker; booking history in the user profile.
• Promo & editable content: every section is wired to a OneEntry block; no hardcoded copy.
• Animations: GSAP + @gsap/react for transitions, scroll-triggered reveals, and card hover behavior.
• Styling: Tailwind v4 with @theme inline { ... } tokens in app/globals.css and component classes in app/styles/main.css.
• TypeScript: strict typing across SDK responses, slices, and components.
• JSDoc: every exported function / component carries a JSDoc block.

Getting Started with OneEntry

Before running the project locally, you need a OneEntry workspace and an app token.

1. Create a OneEntry Workspace

If you don't have an account yet, sign up here 👉 https://oneentry.cloud/.

Create a workspace — this will be the backend for the storefront.

2. Generate an App Token

Inside the admin panel:

1. Navigate to Project → API.
2. Create an App Token.
3. Copy the generated token — you'll need it in .env.local.
4. (Optional) Configure access scopes depending on your use case.

Useful links:

• OneEntry documentation
• oneentry npm package
• SDK reference

Environment Variables

To run this project, copy .env.example to .env.local and fill in the values:

cp .env.example .env.local

Variable	Purpose
NEXT_PUBLIC_ONEENTRY_URL	Project URL on OneEntry Cloud (e.g. https://your-project.oneentry.cloud).
NEXT_PUBLIC_ONEENTRY_TOKEN	App token from OneEntry admin → Project → API.
NEXT_PUBLIC_VERCEL_URL	Public origin used in absolute URLs (canonical, OG, Stripe redirects).
NEXT_PUBLIC_GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET	Google OAuth (sign-in provider). Optional during local UI work.
NEXT_PUBLIC_SHOP_PAGE_LIMIT	Product cards per catalog page. Default 8.
NEXT_PUBLIC_DELIVERY_PRODUCT_ID	OneEntry product id representing delivery cost (not shown in the cart list; added to order totals). Default 33.

Run Locally

Clone the project:

git clone https://github.com/ONEENTRY-PLATFORM/nextjs-restaurant-demo.git

Go to the project directory:

cd nextjs-restaurant-demo

Install dependencies:

npm install

Start the dev server:

npm run dev

Build the app:

npm run build

Open http://localhost:3000 with your browser to see the result.

Scripts

Command	What it does
npm run dev	Next.js dev server.
npm run build	Production build.
npm run start	Serve the production build.
npm run lint	ESLint over the whole repo.
npm run lint-fix	ESLint with --fix.
npm run tsc	One-shot TypeScript check (tsc --noEmit).
npm test	Jest unit / component tests.
npm run test:watch	Jest in watch mode.

Project Structure

app/                Next.js App Router — pages, layouts, route handlers, server actions
app/api/            OneEntry SDK wrappers (server fetchers, client hooks, RTK Query)
app/store/          Redux Toolkit slices, providers, persistence config
app/styles/         Component-level CSS (Tailwind v4 + custom classes)
app/globals.css     Tailwind theme tokens (@theme inline { ... })
components/         All UI — cart, profile, reservation, layout, icons, …
public/             Static assets (images, fonts, icons)

Important files

File / Folder	Description
.env.local	OneEntry project URL + app token (copied from .env.example)
app/layout.tsx	Root layout
app/dictionaries.ts	Locale dictionaries
app/animations/	GSAP transition providers
app/api/	OneEntry SDK wrappers and RTK Query
app/store/	Redux Toolkit reducers and providers
components/icons/	SVG icons (via SVGR) and state-driven .tsx icons
components/layout/	Header, modal, mobile menu, products grid, filters

Testing

The project uses Jest + Testing Library for unit and component tests.

Layer	Tool	Scope
Unit / Component	Jest + Testing Library	Redux slices, utility functions, UI components

npm test            # run once
npm run test:watch  # watch mode

Test files live next to the source in __tests__/ folders (e.g. app/api/utils/__tests__/, app/store/reducers/__tests__/, components/**/__tests__/).

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for the guidelines and CODE_OF_CONDUCT.md for community standards.

Good first issues are labeled good first issue and help wanted.

Security

Found a security issue? Please follow our responsible disclosure policy — do not open a public Issue.

License

This project is licensed under the Apache License 2.0 — see LICENSE for details.

Community & Support

• 💬 Discord community
• 🗨️ GitHub Discussions
• 📖 OneEntry documentation
• 🌐 oneentry.cloud