Online ordering and kitchen screens for a restaurant

The restaurant wanted online ordering on a system it owns: one menu shared by the website and the kitchen, a kitchen screen that shows every order as it arrives, and customer records it can export whenever it wants.

1. 01

   A menu built for phones

   Customers browse the full menu with category tabs that follow the scroll, instant search and a featured row. Prices appear once a size and extras are picked, so the dish comes first.

2. 02

   Custom item builder

   Items come in several sizes, with extras on the whole item or on either half, extra prices that change with the size, and ready-made combinations to start from. Rules such as halves only on the larger sizes are enforced automatically.

3. 03

   Options with a running total

   Required and optional choices like size, extras and sides open in a panel from the bottom of the screen, and the total updates with each pick.

4. 04

   Pickup, delivery or later

   Customers choose pickup or delivery, as soon as possible or a set time up to a week ahead. Opening hours, holiday closures and kitchen pauses are checked in the restaurant's own time zone.

5. 05

   Delivery fee by distance

   Address suggestions from Google fill in a clean delivery address, and the fee is set by the driving distance, up to the delivery limit.

6. 06

   Add-on suggestions

   A row in the cart suggests a drink, a dessert and a side to share, based on what is already in it.

7. 07

   A checkout that rechecks every price

   The server prices every line again from the real menu and rejects a total that was changed in the browser. It adds sales tax, tips, coupon codes and automatic offers such as a first-order discount, and blocks an order that was tapped twice. Online card payment is not switched on yet.

8. 08

   Accounts or guest checkout

   Customers can create an account or check out as a guest without typing their details twice. The first-order discount is kept for customers with an account.

9. 09

   Order tracking for customers

   After ordering, customers watch the order go from received to preparing, ready and out for delivery, updated about a second after the kitchen taps a button.

10. 10

    Kitchen order screen

    New orders appear on a kitchen tablet right away, with a repeating chime until someone accepts them. Orders sit in New, In kitchen and Ready or out for delivery columns, and one tap moves an order along. No printer needed.

11. 11

    Kitchen controls

    Staff can close for today or tomorrow, pause new orders when the kitchen is swamped, turn delivery off, or add a delay that updates every customer's ready time at once.

12. 12

    Staff and manager logins

    Staff see only the live orders and kitchen controls. Managers also get the menu, deals, customers and reports.

13. 13

    Sales dashboard

    Sales, orders and customers with the change from last week, plus charts for daily orders, new customers, top sellers, where orders came from, pickup versus delivery, and phone versus computer.

14. 14

    Menu editor

    Managers edit items, photos, sizes, the days an item is offered and what is featured, and can mark an item sold out. Changes reach the ordering page within seconds.

15. 15

    Save drafts, publish once

    Menu, extras and branding edits wait as drafts until the manager presses Update Website, which shows how many changes are pending and publishes them together.

16. 16

    Logo and name in one place

    The manager can change the logo, store name and tagline, and the change shows on the ordering page, the kitchen screen and the back office.

17. 17

    Coupons, deals and banners

    Managers create coupon codes and automatic discounts, every use is logged, and rotating banner messages can be posted for customers.

18. 18

    Holiday calendar

    A date added here blocks both as-soon-as-possible and scheduled orders for that day.

19. 19

    Customer list and reports

    A searchable customer list with order history, coupons used and saved addresses. Reports cover best customers, guest orders, and orders by date range and by pickup or delivery.

20. 20

    Spreadsheet import and export

    Every table downloads or uploads as a CSV spreadsheet file, so customer records and the menu can be backed up or moved whenever the restaurant wants.

21. 21

    Its own visitor stats

    Counts visits by device and by the link or ad they came from (the UTM tags on a link), and how many carts turn into orders. Abandoned carts are saved; nothing is sent to those customers yet.

22. 22

    Private by default

    Customer and order data is visible only to signed-in staff, repeated requests are limited, and everything typed into a form is checked before it is used.

• ServiceOnline ordering→Let customers order online from your own website, with no commission per order. Card fees go to a payment account in your name.
• ServiceCustom software→Business software built around how you work: a customer list (CRM), an employee time clock app, job scheduling and automatic reports.
• ServiceWeb development→Custom websites that do a job: booking and request forms, online price calculators, links to your other tools and large sets of pages.

Next.js

The framework the screens and the server code are written in.

React

Draws the screens and updates them as the data changes.

TypeScript

JavaScript with types, so many mistakes are caught before the code runs.

Tailwind CSS

Styles the screens, with large tap targets for use on a phone.

PostgreSQL

The database where every record is kept.

Live updates

Pushes new orders and status changes to open screens without a refresh.

File storage

Keeps uploaded photos and images.

Google Places Autocomplete

Suggests the full address as a customer types it.

Google Distance Matrix API

Real driving times between addresses, used to match trips to drivers and to set delivery fees.

Zod

Checks every piece of incoming data before it is used.

Cloud hosting

Hosts the app.

• In productionOffice software for a home-exterior contractor→One phone app for leads, estimates, customers, the calendar and the crew time clock, plus storm alerts that plan when roof ads run.
• In productionTrip scheduling and staff time clock for a medical transport company→Books patient rides and round trips, assigns them to drivers using real drive times, and runs the staff time clock and weekly timesheets.
• In developmentAn AI that answers a restaurant's phone and takes the order→A working prototype that picks up, takes a pickup or delivery order in plain conversation, and sends it to the same kitchen screen as online orders.
• IndexAll client work→Published websites and every private system.