In Development

Next.js Restaurant Template with Online Ordering and Kitchen Dashboard

Food Studio is a full-stack Next.js restaurant template: an ordering website with menu, combos, cart, checkout and order tracking, a staff dashboard for orders, the menu and the kitchens, a NestJS API, AI tools for dish photos, and English and Arabic with RTL.

Ordering website: home, menu, dish and combo pages, cart, checkout and order trackingMenu search with category, dietary and sort filters, and allergens on every dishCombo offers and a home page meal builder with a main, a side and a drink
Full source code
Invoice AvailableAfter purchase, download a PDF invoice and manage billing details (VAT/tax ID, company address) anytime via the Paddle Customer Portal
Share:

Food Studio is a full-stack restaurant template: a Next.js website where guests order for delivery or pickup and follow their order, a Next.js dashboard where the team runs orders, the menu and its kitchens, and a NestJS API behind both. Stripe and PayPal checkout, an AI studio for dish photos, an AI assistant, and English and Arabic with RTL come with it.

Website demoStaff dashboard demo
Home: the hero, the order buttons and the category bar, light theme
Home: the hero, the order buttons and the category bar, light theme. The home page opens on the headline, a burger photograph, the order and menu buttons, three reasons to order and the category bar.
Home: the hero, the order buttons and the category bar, dark theme
Home: the hero, the order buttons and the category bar, dark theme. The home page opens on the headline, a burger photograph, the order and menu buttons, three reasons to order and the category bar.
Dashboard sign-in, light theme
Dashboard sign-in, light theme. The staff dashboard's sign-in page, as a restaurant's own team sees it.
Dashboard sign-in, dark theme
Dashboard sign-in, dark theme. The staff dashboard's sign-in page, as a restaurant's own team sees it.
Open the websiteOpen the staff dashboard
Hero: the plate with its looping steam, dark theme (clip). The website's first screen as it loads: the headline arrives and steam rises from the burger and fries in a loop.
The package

A restaurant's online ordering in one codebase

A connected foundation for a restaurant's own ordering site, a takeaway brand with several kitchens or an agency's client project, with source code you can customize. The full-stack package includes the website, the staff dashboard and the API behind them.

Ordering website

  • A menu with search, filters and allergens
  • Dish and combo pages with extras and instructions
  • Cart, checkout and order tracking
  • Accounts with reward points and saved dishes

Staff dashboard

  • The day's sales and the kitchen queue
  • Orders moved through their statuses
  • A dish editor in English and Arabic
  • AI studio, assistant, team and settings

NestJS API

  • Staff and customer authentication, roles and permissions
  • Prices, totals and availability decided on the server
  • Stripe and PayPal with signed webhooks
  • A seeder that builds a complete demo restaurant
The menu

A menu guests can find their meal in

Search by name, narrow by category or diet, sort by popularity, price or name, and open any dish to see its ingredients, its allergens and its reviews. Every dish is a cut-out photograph on its own tile, never cropped.

Menu with search, category, dietary and sort filters, light theme
Menu with search, category, dietary and sort filters, light theme. The full menu: search, category, dietary and sort controls, the category bar, and every dish as a card with its price.
Menu with search, category, dietary and sort filters, dark theme
Menu with search, category, dietary and sort filters, dark theme. The full menu: search, category, dietary and sort controls, the category bar, and every dish as a card with its price.
Dish page with instructions, quantity and allergens, light theme
Dish page with instructions, quantity and allergens, light theme. A dish with its cut-out photo, price, special instructions, quantity, add to cart, allergen chips and the ingredients, allergens and reviews tabs.
Dish page with instructions, quantity and allergens, dark theme
Dish page with instructions, quantity and allergens, dark theme. A dish with its cut-out photo, price, special instructions, quantity, add to cart, allergen chips and the ingredients, allergens and reviews tabs.

Combos with a choice for every course

A combo has one price and asks for a main, a side and a drink. Swapping a choice for a pricier one adds only the difference, and the page shows the saving against ordering the same dishes separately.

  • Required choices checked before anything reaches the cart
  • Extras priced in words, never with a plus sign
  • The same pricing rules on the page and on the server
Combo page with a choice per course, light theme
Combo page with a choice per course, light theme. The combo offer: the saving against ordering separately and a required choice of main, side and drink, extras priced in words.
Combo page with a choice per course, dark theme
Combo page with a choice per course, dark theme. The combo offer: the saving against ordering separately and a required choice of main, side and drink, extras priced in words.

A meal builder on the home page

Guests pick a main, a side and a drink as cards and see them drawn together as one meal. While nobody touches it, the builder moves through combinations on its own, and View meal opens the combo with those choices already made.

  • Dishes drawn from the combo the staff set up
  • Chosen and arranged in the homepage editor
  • Works the same in Arabic, right to left
Home: the meal builder, light theme
Home: the meal builder, light theme. A main, a side and a drink chosen as cards, drawn together as one meal picture beside them, with View meal opening the combo.
Home: the meal builder, dark theme
Home: the meal builder, dark theme. A main, a side and a drink chosen as cards, drawn together as one meal picture beside them, with View meal opening the combo.
Cart and checkout

From the cart to a paid order

Guests choose delivery or pickup, and delivery is checked against the kitchen's postcodes, opening hours and minimum order before checkout. Promo codes, fees and reward discounts are applied by the server, which computes every price in cents.

Cart with delivery or pickup, light theme
Cart with delivery or pickup, light theme. Two dishes in the cart with their quantities, delivery or pickup, the delivery address, a promo code field and the order summary.
Cart with delivery or pickup, dark theme
Cart with delivery or pickup, dark theme. Two dishes in the cart with their quantities, delivery or pickup, the delivery address, a promo code field and the order summary.
Checkout with hosted payment, light theme
Checkout with hosted payment, light theme. Contact details, delivery method and address, then the payment choice (card or PayPal on the provider's own page), reward points and the total.
Checkout with hosted payment, dark theme
Checkout with hosted payment, dark theme. Contact details, delivery method and address, then the payment choice (card or PayPal on the provider's own page), reward points and the total.

Payment on the provider's own page

Checkout sends the guest to Stripe's hosted Checkout or to PayPal and confirms the order from the provider's signed webhook, so the website never shows a card field.

  • One order per checkout, however many times it is submitted
  • A demo payment while no real processor is configured
  • Stock held for a pending order and released if payment fails
  • A status timeline that refreshes every ten seconds
Order tracking: the order being prepared, light theme
Order tracking: the order being prepared, light theme. A customer's order in the kitchen: the status timeline from placed to delivered, the items, the totals and the delivery address.
Order tracking: the order being prepared, dark theme
Order tracking: the order being prepared, dark theme. A customer's order in the kitchen: the status timeline from placed to delivered, the items, the totals and the delivery address.

Accounts that bring guests back

A customer account keeps the bag on the server, the saved dishes, the addresses and every past order with a reorder button. Guests can still order and track without signing up.

  • One point per dollar, credited when an order is delivered
  • 100 points take $5 off, once per order
  • A guest's bag and saved dishes kept when they sign in
Account: reward points, recent orders, saved dishes, light theme
Account: reward points, recent orders, saved dishes, light theme. The signed-in customer's overview: reward points, profile and default address, recent orders with track and reorder, and saved favorites.
Account: reward points, recent orders, saved dishes, dark theme
Account: reward points, recent orders, saved dishes, dark theme. The signed-in customer's overview: reward points, profile and default address, recent orders with track and reorder, and saved favorites.
Kitchens

Several kitchens, each with its own area

Each kitchen has its opening hours in its own time zone, overnight shifts included, and the postcodes it delivers to. A postcode search tells the guest whether a kitchen delivers there, is closed right now, or which other kitchen can take the order, on a real map.

Kitchens on a real map, with a postcode search, light theme
Kitchens on a real map, with a postcode search, light theme. Find a kitchen: a postcode search for delivery or pickup, each kitchen with its hours, preparation time and delivery postcodes, pinned on a map.
Kitchens on a real map, with a postcode search, dark theme
Kitchens on a real map, with a postcode search, dark theme. Find a kitchen: a postcode search for delivery or pickup, each kitchen with its hours, preparation time and delivery postcodes, pinned on a map.
Our story, light theme
Our story, light theme. The about page: the restaurant's story beside a kitchen photograph, with the way to the menu and to a kitchen.
Our story, dark theme
Our story, dark theme. The about page: the restaurant's story beside a kitchen photograph, with the way to the menu and to a kitchen.
Contact form and kitchen hours, light theme
Contact form and kitchen hours, light theme. A contact form beside the restaurant's email and phone and every kitchen's address and opening hours.
Contact form and kitchen hours, dark theme
Contact form and kitchen hours, dark theme. A contact form beside the restaurant's email and phone and every kitchen's address and opening hours.
The restaurant's day

A dashboard built around orders and the kitchen

The overview opens on today's revenue, orders, average order value and the orders in preparation against the day before, with the revenue through the day, the category mix, the most popular dishes and the kitchen queue. A new order refreshes it the moment it arrives.

Dashboard overview: today's sales and the kitchen queue, light theme
Dashboard overview: today's sales and the kitchen queue, light theme. Revenue, orders, average order value and orders in preparation against the previous day, the revenue chart through the day, the preparation queue and the category mix.
Dashboard overview: today's sales and the kitchen queue, dark theme
Dashboard overview: today's sales and the kitchen queue, dark theme. Revenue, orders, average order value and orders in preparation against the previous day, the revenue chart through the day, the preparation queue and the category mix.

Orders with a timeline

Every order opens in a panel with its items, the customer, the totals and a timeline of each change. Only the next steps that make sense are offered, and the server refuses any other.

  • Pickup orders skip the delivery step
  • A reason required to cancel
  • A notification the moment an order arrives
Orders with the timeline of the selected order, light theme
Orders with the timeline of the selected order, light theme. Every order with its customer, total and status beside the selected order's details, items and timeline, and the control that moves it on.
Orders with the timeline of the selected order, dark theme
Orders with the timeline of the selected order, dark theme. Every order with its customer, total and status beside the selected order's details, items and timeline, and the control that moves it on.

A dish editor in two languages

Name, description and ingredients in English and Arabic, photos or a video, a category, a preparation time, allergens and dietary tags, and extras as groups with their own minimum, maximum and prices.

  • Availability switched on each row of the menu
  • Optional stock that refuses an order it cannot fill
  • Featured, best seller and archived lists
Menu item editor, bilingual, light theme
Menu item editor, bilingual, light theme. Editing a dish in English and Arabic: name, description, price, category, preparation time, ingredients, extras, availability switches and allergens.
Menu item editor, bilingual, dark theme
Menu item editor, bilingual, dark theme. Editing a dish in English and Arabic: name, description, price, category, preparation time, ingredients, extras, availability switches and allergens.
Menu management, light theme
Menu management, light theme. Dishes with their price, preparation time, status and an availability switch on each row, with counts for published, unpublished, unavailable and featured dishes.
Menu management, dark theme
Menu management, dark theme. Dishes with their price, preparation time, status and an availability switch on each row, with counts for published, unpublished, unavailable and featured dishes.
Categories, light theme
Categories, light theme. Menu categories with their icons, status, dish counts and sort order.
Categories, dark theme
Categories, dark theme. Menu categories with their icons, status, dish counts and sort order.

The home page, section by section

The nine sections of the home page are switched on or off, moved up or down and edited in place: the hero, the categories, the popular dishes, the combo, the meal builder, the ingredients, delivery, rewards and the questions.

  • Every text in English and Arabic
  • Popular dishes picked from the menu
  • No code change to rearrange the page
Homepage sections, light theme
Homepage sections, light theme. The nine sections of the home page in order, each switched on or off, moved up or down, and opened to edit what it says.
Homepage sections, dark theme
Homepage sections, dark theme. The nine sections of the home page in order, each switched on or off, moved up or down, and opened to edit what it says.

Customers and their points

Every customer with their contact details, their reward points and when they joined, filtered by name, phone, email and date.

  • A detail page per customer
  • Removed customers kept apart and restorable
  • Points recorded in a ledger for each order
Customers with their reward points, light theme
Customers with their reward points, light theme. Customers with their email, phone, reward points, verification and join date, filtered by name, phone, email and date.
Customers with their reward points, dark theme
Customers with their reward points, dark theme. Customers with their email, phone, reward points, verification and join date, filtered by name, phone, email and date.

A team with roles and kitchens

Owners, managers and kitchen staff each get the permissions their role allows, and roles are edited permission by permission. A kitchen account sees only its own kitchen's orders, without prices, and moves them from confirmed to ready.

  • Menu items and actions hidden without the permission
  • Roles created and edited from the dashboard
  • Each kitchen account tied to one kitchen
Team with roles and kitchens, light theme
Team with roles and kitchens, light theme. Staff members with their role (owner, manager or kitchen) and the kitchen each one works in.
Team with roles and kitchens, dark theme
Team with roles and kitchens, dark theme. Staff members with their role (owner, manager or kitchen) and the kitchen each one works in.

Settings the restaurant owns

Kitchens pinned on a map with their hours and postcodes, delivery and pickup fees, the minimum order, the reward rules, promo codes and the payment methods offered at checkout.

  • A location picker on a real map
  • Promo codes that can combine with rewards or not
  • The dashboard's language and theme
Settings: kitchens on a map, light theme
Settings: kitchens on a map, light theme. The restaurant's kitchens pinned on a real map, each with its hours, preparation time, open state, edit and delete.
Settings: kitchens on a map, dark theme
Settings: kitchens on a map, dark theme. The restaurant's kitchens pinned on a real map, each with its hours, preparation time, open state, edit and delete.
AI for the menu

Dish photos and listings without a photo studio

The AI studio drafts a dish's name, description and details from a prompt or up to four photos, and restyles a dish photo with Google Gemini in a chosen shot, background and light.

Background removal on your own server

Cutting a dish out of its background runs on the API with a local model. It needs no key and costs nothing per photo, which is how every dish on the menu sits on its own tile.

  • A before and after slider on every result
  • Shot presets for a menu hero, top down, close up or cut-out
  • Optional clips from a dish photo with your own Higgsfield key
AI studio for dish photos, light theme
AI studio for dish photos, light theme. A dish's photo with background removal on the server, background and lighting choices and a prompt for a restyled version.
AI studio for dish photos, dark theme
AI studio for dish photos, dark theme. A dish's photo with background removal on the server, background and lighting choices and a prompt for a restyled version.

An assistant that knows the restaurant

Ask how many orders came in today or which dishes sell best this week. The assistant answers from the restaurant's own data through MCP tools, limited to what the person asking may see, and draws a chart when the question is about a trend.

  • Changes proposed with a before and after, applied only once confirmed
  • Google Gemini models with your own key
  • The same 56 tools open to coding agents at the MCP endpoint
AI assistant answering a question, dark theme (clip). A question typed into the staff dashboard's assistant, answered from the restaurant's own orders with a revenue chart for the last 7 days.
Bilingual

English and Arabic, in both directions

Every screen of the website and the dashboard is written in both languages and mirrors for Arabic, and the menu itself is stored in both languages, with prices and figures kept in Latin digits.

Arabic home page, right to left, light theme
Arabic home page, right to left, light theme. The home page in Arabic: the layout mirrored right to left, the photograph on the other side and every word translated.
Arabic home page, right to left, dark theme
Arabic home page, right to left, dark theme. The home page in Arabic: the layout mirrored right to left, the photograph on the other side and every word translated.
Arabic menu, light theme
Arabic menu, light theme. The menu in Arabic, right to left, with the filters, the category bar and the dish cards mirrored.
Arabic menu, dark theme
Arabic menu, dark theme. The menu in Arabic, right to left, with the filters, the category bar and the dish cards mirrored.

The dashboard in Arabic

The same components run right to left, so there is no second layout to maintain.

  • Dishes written in both languages from one editor
  • Charts, tables and menus mirrored for Arabic
  • Figures in Latin digits in both locales
Arabic dashboard overview, right to left, light theme
Arabic dashboard overview, right to left, light theme. The dashboard overview in Arabic: the sidebar on the right, the chart reversed and every figure in Latin digits.
Arabic dashboard overview, right to left, dark theme
Arabic dashboard overview, right to left, dark theme. The dashboard overview in Arabic: the sidebar on the right, the chart reversed and every figure in Latin digits.
Responsive

Made for the phone a hungry guest is holding

The menu, the dish pages, the cart and the checkout are laid out for a narrow screen, with a delivery address row at the top and a navigation bar at the bottom within reach of a thumb.

Home on a phone, light theme
Home on a phone, light theme. The home page at phone width with the delivery address row and the bottom navigation.
Home on a phone, dark theme
Home on a phone, dark theme. The home page at phone width with the delivery address row and the bottom navigation.
Dish page on a phone, light theme
Dish page on a phone, light theme. A dish at phone width: its photo, the ingredients tab and the bottom navigation.
Dish page on a phone, dark theme
Dish page on a phone, dark theme. A dish at phone width: its photo, the ingredients tab and the bottom navigation.
What you get

Everything to run it, not only the screens

Source code for all three apps, the data to start from and the documentation to take it further.

Source code

  • The website, the staff dashboard and the API
  • TypeScript throughout, with exact pinned dependencies
  • A commercial license for your project

Data

  • A seeder with 64 dishes, 8 categories and 4 kitchens
  • Six weeks of orders, reviews and customers
  • An owner, a manager, a kitchen account and a customer

Docs and demo mode

  • A quick start for the stack and for each app
  • A guide per API module and one for branding each frontend
  • A demo mode for public previews, off by default and removed with one command
Under the hood

Build on a familiar full-stack foundation

Next.js 16, React 19, TypeScript, Tailwind CSS 4, and a modular NestJS backend.

Frontend

  • Next.js 16 App Router, React 19, TypeScript
  • Tailwind CSS 4
  • TanStack Query for API data
  • React Hook Form and Zod for forms
  • next-intl for localization, MapLibre for maps

Backend

  • NestJS with per-domain modules
  • TypeORM with SQLite, or MySQL through configuration
  • JWT authentication with roles and permissions
  • Socket.io for live notifications
  • An MCP server behind an API key

Search and media

  • Page metadata, hreflang, a sitemap and robots rules
  • Restaurant structured data
  • Uploads to a local folder or a Cloudflare R2 bucket
Before you launch

What you configure yourself

Food Studio is a source-code template, not a managed ordering service. Configure your hosting, database, media storage, payment accounts and the external services you choose to use.

Hosting and data

  • A Node host for the API and the two Next.js apps
  • SQLite on a persistent disk, or MySQL
  • A persistent folder or an R2 bucket for uploads

Payments and AI

  • Your own Stripe and PayPal accounts
  • Your own Google Gemini key for the studio and the assistant
  • Provider and payment fees are not included

Not included

  • Order confirmation emails
  • Ordering for a later time
  • Tips, tax lines and cash on delivery
  • A review form on the website
Explore

Explore Food Studio before you build

Order from the website as a guest, then open the staff dashboard, whose sign-in page signs you in as your own demo account. What you change in the dashboard is yours alone, and the demo data is rebuilt every night. In the demo, orders are paid with test payments, and the AI studio and the assistant run on your own Google Gemini key. Screenshots use sample data.

Home: popular dishes and the combo offer, light theme
Home: popular dishes and the combo offer, light theme. The popular row with each dish on its own tile, price and add to cart button, and the combo offer below it with its price.
Home: popular dishes and the combo offer, dark theme
Home: popular dishes and the combo offer, dark theme. The popular row with each dish on its own tile, price and add to cart button, and the combo offer below it with its price.
Website demoStaff dashboard demo
Perfect for

Build your restaurant's ordering with Food Studio

Restaurants taking orders onlineBurger, pizza and takeaway brandsRestaurants with several kitchensAgencies building a restaurant's siteFounders launching a food ordering productBilingual menus with Arabic and RTL

Technical Specifications

Framework

Next.js 16.3.6

React Version

React 19.3.0

Styling

Tailwind CSS 4.3.3

TypeScript

Yes

Responsive

Mobile, Tablet, Desktop

Support Period

Lifetime Included

Pro Tip: All templates include comprehensive documentation to get you started quickly.

Frequently asked questions

What do I get when I buy this template?
The complete source code of the package you choose, downloaded from your personal dashboard right after checkout. A business invoice is available for every purchase.
Can I use it for client and commercial projects?
Yes. Every paid template comes with a Commercial licence that covers one commercial project, including work you deliver to a client. To reuse the same template across several projects, choose the Agency licence, which covers unlimited projects.
Do I get updates after buying?
Yes. Updates are free. New versions appear in your dashboard, where you can download every file you own again at any time.
Is support included?
Yes. The assistant on this page answers in seconds, and email support is included with every purchase, at support@aniq-ui.com, with a reply within 4 hours.
Can I try it before I buy?
Yes. This template has a full live demo, linked at the top of this page, so you can click through the real thing before you decide.

Related Templates

Next.js Real Estate Template with Agency Dashboard and AI Staging - Next.js Next.js Real Estate Templates template preview - Aniq-UI

Real Estate

$179
Next.js Real Estate Templates
Full Stack
New
AI

Velra is a full-stack Next.js real estate template: a public website for buying and renting, an agency dashboard for properties, leads and viewings, a NestJS API, AI virtual staging, and English and Arabic with RTL.

View Template
Next.js Fitness & Coaching Dashboard with AI Assistant - Next.js Next.js Health & Fitness Templates template preview - Aniq-UI

Fitness

$149
Next.js Health & Fitness Templates
Full Stack
New
AI
Light & Dark

Kinora is a full-stack Next.js fitness coaching template with a NestJS backend, AI assistant, client roster, workout logger, meal planner, and Arabic RTL.

View Template
Next.js LMS Template with AI & Live Classes - Next.js Education template preview - Aniq-UI

E-Learning

$179
Education
Full Stack
New
AI
Light & Dark

Learnio is a full-stack Next.js LMS template with a NestJS backend, AI assistant, live classes, Stripe checkout, quizzes, certificates, and Arabic RTL.

View Template

Professional Next.js Templates Technical Advantages

Our Next.js templates are engineered with performance optimization, TypeScript integration, and developer-friendly architecture to accelerate your web application development. Ready-to-use UI components save hours of design and coding time.

Responsive Design

Fully adaptive Next.js Templates with responsive breakpoints for mobile, tablet, and desktop viewport optimization.

Accessibility

Semantic HTML, ARIA attributes and keyboard navigation, built with accessibility in mind.

High Performance

Built on the Next.js App Router with server components and optimized assets, so pages stay fast as they grow.

TypeScript Support

Next.js App Router architecture with server components for reduced client-side JavaScript and faster time-to-interactive metrics.

Enterprise-Grade Features Included:

Developer Experience

Enterprise-grade development toolkit

  • TypeScript 5.0+ with strict type checking
  • Server & Client Components architecture
  • Comprehensive JSDoc documentation

UX & Performance

Optimized user experience metrics

  • Mobile-first responsive design system
  • Accessible markup with ARIA and keyboard navigation
  • Fast rendering with server components and optimized assets

Maintenance & Support

Long-term project sustainability

  • Support included with your purchase
  • Regular security & framework updates
  • SEO-optimized semantic structure

All Next.js Templates implement modern React 19 patterns, App Router architecture, and Web Vitals optimization for SEO-friendly performance.

world map

Global User Community

Join thousands of developers worldwide who trust Aniq-UI for their projects. Our templates are being used across the globe to create stunning web experiences.

HomeTemplatesBlog
Aniq-uiAniq-ui

Cookie Preferences

We use cookies to enhance your browsing experience, analyze site traffic, and personalize content. By clicking "Accept All", you consent to our use of cookies for analytics and personalized advertising.