Next.js restaurant website · menu, table booking, delivery
Restaurant with delivery
A restaurant delivery customer usually knows not the name of the dish but the situation: “two of us, gluten-free, under two thousand”. The site answers such a request with a ready set and honestly explains why it chose it. Table booking isn’t a “call me back” form but a floor plan showing which tables are free at 8 pm. After ordering, the guest sees where their courier is and doesn’t call the restaurant asking “where’s my food”.
Scenario: Pech restaurant in Yekaterinburg — fictional: a wood-fired oven and grill, 22 dishes, 14 tables in five zones, three delivery zones and three couriers.
Open the demo
Start with dish selection: write a request or pick an example — the set can be rebuilt and added to the cart with one button. A placed order opens the tracking page; speed up demo time to see the courier on the way. Orders, bookings and reviews appear in the owner dashboard.
Leads from the demo website are visible only to you, in the “Owner dashboard”: the server validates the form and stores nothing.
What the demo shows
How to try it
Choose a dinner
In the “Dish selection” block, press “For two, gluten-free, under ₽2,000” — see how the request is parsed into chips and why the dishes were chosen.
Place an order
Press “Add everything to cart”, enter a street — for example, Kuybysheva — and apply the promo code ПЕЧЬ10.
Follow the courier
After checkout the order page opens: turn on ×120 and watch the courier drive across the map.
Book a table
In the “Booking” block, choose an evening and the number of guests, click a free table on the floor plan and send the booking.
Test the filters
In the menu, turn on “Gluten-free” and “Nut-free” — dishes are filtered by ingredients, not by name.
No paid neural networks
There are no paid neural network requests: dish selection is done by rules in the browser that parse the request (guests, budget, diets, exclusions) and assemble a set from the menu. In a production version the phrase is parsed by a language model, with the menu, stop list and allergens given to it as tools — it can’t suggest a dish that doesn’t exist. Table availability and courier movement are simulated; the restaurant, dishes and reviews are fictional.
The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.
What a production project adds
- Menu, stop list and orders from the POS system (iiko or r_keeper) via API; the order goes to the kitchen without manual re-entry
- Dish selection by a language model (YandexGPT or GigaChat) with the menu and allergens as tools; the guest’s restrictions are checked after the model
- Booking based on real table availability from the reservation system, with confirmation and a reminder via SMS or Telegram
- Delivery zones as polygons on Yandex Maps, address geocoding, the courier’s position from their app
- Card and SBP payment via acquiring with a fiscal receipt under 54-FZ
Stack
- All demos by stack:
- Next.js
- React
- TypeScript
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Server Actions
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- Picking by phrase removes the main delivery barrier — “I don’t know what to choose”: guests get a ready set within budget and add it with one button.
- The free delivery threshold and “Goes well with” right in the cart raise the average bill without intrusive banners.
- The floor plan and the courier page eliminate “is there a table at eight?” and “where’s my order?” calls — the host is busy with guests in the dining room.
For developers
- Query parsing, set selection, cart calculation, free tables and delivery stages are pure functions with tests; selection randomness is seeded, so “Another option” is reproducible.
- Cyrillic and regular expressions: \b and \w in JavaScript don’t see Russian letters, so word boundaries are defined via lookbehind and lookahead.
- The cart, orders and bookings live in localStorage via useSyncExternalStore; table occupancy is deterministic from the date and table, so the plan doesn’t “flicker” between reloads.
Tips
Tip 01
Filter allergens by the dish’s ingredients, not by a word in the name: “burrata” doesn’t say it contains milk.
Tip 02
Don’t stack discounts silently: if the promo code is smaller than the pickup discount, show that the larger one was applied — otherwise the guest will think the promo code didn’t work.
Want the same for your business?
Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.
Other demos in this section
All demos- live
Next.js website · service landing page
Dental clinic landing page
A one-page clinic website that brings in patients: a quiz suggests a treatment, a calculator prices the plan with installments, online booking shows doctors’ free time, and an AI consultant answers from the price list. The headline is A/B-tested; leads and goals are visible in the owner dashboard.
- Next.js
- React
- TypeScript
- live
Next.js website · B2B, multi-page
Manufacturing company website
A multi-page website for a steel structures plant that sells on its own: a calculator prices a building with a live drawing, a builder assembles a technical specification, case studies filter by industry, you can apply for a job with a CV, and site search understands queries in plain words.
- Next.js
- React
- TypeScript
- live
Next.js website · catalog, map, comparison
Real estate catalog with smart search
A real estate agency’s apartment catalog: type “two-bedroom near the metro under 12 million” and the search sets the filters itself, shows apartments on a city map, compares up to four and sends new ones to Telegram.
- Next.js
- React
- TypeScript
- live
Next.js website · AI translation, per-language SEO
An export website in four languages
A website for an Altai honey exporter in Russian, English, Chinese and Arabic: translated page URLs, per-language SEO, a wholesale price calculator with delivery and a translation studio that checks the neural network’s draft against a glossary.
- Next.js
- React
- TypeScript
- live
Next.js website · customer account, AI assistant, Telegram
Customer account portal
A print shop’s customer account: orders with production stages, layout approval with comments right on the layout, invoices paid via SBP, documents with an electronic signature, a new order with a price calculation, a chat with an AI assistant and a manager, notifications in Telegram.
- Next.js
- React
- TypeScript
- live
Next.js website · Python in the browser, AI mentor
Online school with a student account
An online analytics school: a landing page with a Python task checked right in the browser, a level test with a personal curriculum, installments with a tax deduction estimate, a student account with homework and AI review, an AI mentor that answers from course materials and a certificate verified by QR code.
- Next.js
- React
- TypeScript
- live
Next.js website · booking by plate number, photo report, approval
Car service with booking and repair status
A car service website: booking by plate number or VIN into free bay slots, a “what’s knocking?” diagnosis with likely causes and a price range, repair status with a photo report, approval of extra work and payment by link, and a garage with service history and a forecast of the next maintenance.
- Next.js
- React
- TypeScript
- live
Next.js website · case analysis, claim letters, calculators
Law firm with AI case analysis
A law firm website: describe your situation in your own words right in the hero, get an AI analysis with an assessment of prospects, a claim letter in Word, court fee, penalty and limitation period calculators, a document checklist, case progress in a client account, a price builder and booking with a lawyer.
- Next.js
- React
- TypeScript
- live
Next.js SaaS website · sandbox, dashboard, API
SaaS: AI replies to WB and Ozon reviews
The website and dashboard of a SaaS service that replies to Wildberries and Ozon reviews: a sandbox with review analysis and checks, autopilot by rating, a queue with approval, topic analytics, plans with a payback calculator, store connection by key, an invoice by tax ID and API documentation with a live console.
- Next.js
- React
- TypeScript
- live
Next.js fitness studio website · booking, memberships, account
Fitness studio
A small-group fitness studio website: a weekly schedule with spots and two-click booking, a waiting list that moves you into the group automatically, memberships you can freeze from your account, an AI 4-week training plan from five questions and a personal account with attendance stats.
- Next.js
- React
- TypeScript
- live
Next.js IT conference website · program, tickets, networking
Conference website
A two-day conference website: a program by room and track with a personal schedule, AI selection of talks without overlaps by role and free text, tickets in price waves with promo codes and a team discount, a QR code for every attendee checked at the entrance, and networking with matching and meetings during breaks.
- Next.js
- React
- TypeScript
- live
Next.js corporate logistics website · calculator, tracking, AI request
Transport company website
A transport company’s corporate website: a calculator that compares groupage and a dedicated truck at once, shipment tracking with the truck on a map, AI parsing of a request from an email or waybill with missing fields highlighted, a map of warehouses and terminals with a storage calculation, a carrier application with an eligibility check, and company details with checksum validation.
- Next.js
- React
- TypeScript