Grand Bistro - QR Menu And Order SystemGrand Bistro - QR Menu And Order System
A modern restaurant web application that streamlines the ordering experience for both customers and staff. Customers scan a single Recently UpdatedGrand Bistro - QR Menu And Order System
A modern restaurant web application that streamlines the ordering experience for both customers a...
Overview
Grand Hotel — QR Menu & Order Management System
Overview
Grand Bistro is a modern, full-stack restaurant ordering web application built to eliminate physical menus and manual order-taking from the dining experience. Designed for hotels and restaurants of all sizes, it connects customers directly to the kitchen through a simple QR code scan — no app download, no registration, and no waiter interaction needed to place an order. The system is fast, paperless, and built for real-world restaurant operations.
What the application does
The application serves two audiences simultaneously — the customer dining at the table and the admin or kitchen staff managing the restaurant. On the customer side, a single QR code placed anywhere in the restaurant gives instant access to the full digital menu. Customers browse, select their food and drinks, review their cart, enter their table number at checkout, and place their order in seconds. On the admin side, every order appears instantly on a live dashboard where staff can track, manage, and update each order through to delivery. Beyond daily operations, the system also provides restaurant owners with powerful revenue analytics covering daily, weekly, monthly, and yearly performance, all exportable as professional PDF reports.
Core features
Digital menu with QR access
One QR code is generated for the entire restaurant. Scanning it takes the customer directly to the live menu with no barriers. The menu is organized into categories — Starters, Main Course, Grills, Desserts, and Drinks — and each item displays a high-quality photo, name, description, and price. The menu is fully managed by the admin and updates in real time for customers.
Smooth customer ordering flow
Customers browse and add items freely. Each item added shows quantity controls for easy adjustments. A sticky cart bar at the bottom of the screen tracks the running total at all times. When ready, the customer opens the cart summary, reviews their order, enters their table number in a required field, and confirms. A success message confirms the order has been sent to the kitchen immediately.
Real-time order management
The admin live orders panel receives every new order instantly via WebSocket technology — no page refresh needed. Each order card shows the table number, ordered items with quantities, total price, timestamp, and current status. Staff move orders through four stages — New, Preparing, Ready, and Delivered — with a single button click. Audio and visual alerts notify staff the moment a new order arrives.
Menu management
Admins have full control over the menu through a dedicated management panel. New items can be added with a name, category, description, price, and photo. Existing items can be edited or deleted. Each item has an available/unavailable toggle so sold-out items are instantly hidden from the customer menu without deleting them permanently.
Revenue and analytics dashboard
The analytics dashboard gives owners and managers complete visibility into business performance. Switchable between Daily, Weekly, Monthly, and Yearly views, it displays total revenue, total order count, average order value, a visual bar chart of revenue over time, a ranked list of top-selling items by quantity and revenue, and a full breakdown of orders and revenue per table. Every report can be downloaded as a PDF with one click.
Technology stack
| Layer | Technology |
|---|---|
| Frontend | React.js — mobile-first, fully responsive |
| Backend | Node.js with Express.js |
| Database | MySQL |
| Real-time communication | Socket.io (WebSockets) |
| Authentication | JWT (JSON Web Tokens) |
| PDF generation | Server-side PDF export library |
| QR code generation | Built-in QR code generator |
Security
The customer-facing menu is fully public and requires no login. The admin panel is protected by JWT-based authentication, ensuring that only authorized staff can access order management, menu editing, and revenue reports. All sensitive routes on the backend are secured and inaccessible without a valid token.
Design and user experience
The customer interface is designed for speed and simplicity on mobile devices. The layout is clean and uncluttered, with large touch-friendly buttons, clear item cards, and a persistent cart bar so customers always know what they have selected. The admin dashboard uses a flat, professional design with color-coded order statuses — red for new orders, amber for orders being prepared, and green for orders ready to deliver — making it easy for staff to read the room at a glance even during busy service hours.
Ideal for
- Hotels with in-house restaurants
- Standalone restaurants and cafes
- Food courts and multi-table dining venues
- Any food service business looking to digitize and streamline operations
Features
Features
Customer side
- Instant menu access via a single QR code scan — no app download, no registration, no login required
- Clean mobile-first menu interface optimized for all smartphone screen sizes
- Menu organized into categories — Starters, Main Course, Grills, Desserts, and Drinks
- Each menu item displays a photo, name, short description, and price
- Add to cart with a single tap
- Quantity controls (+ and −) for each item directly on the menu
- Persistent sticky cart bar showing live item count and running total at all time.
- Cart summary screen showing all selected items, quantities, and final total before confirming
- Table number input field at the checkout stage — required before order can be submitted
- Order validation — the Place Order button is disabled until the table number is filled in
- Instant order submission to the kitchen upon confirmation
- Success confirmation message displayed to the customer after placing the order
- Unavailable menu items are automatically hidden from the customer view
Admin side — live orders
- Secure admin login protected by JWT authentication
- Real-time order notifications — new orders appear instantly without page refresh via WebSockets
Admin side — menu management
- Add new menu items with name, category, description, price, and photo upload
- Edit any existing menu item at any time
- Delete menu items permanently
- Toggle items as available or unavailable without deleting them
- Unavailable items are instantly hidden from the customer menu in real time
- Organize items across multiple categories
Admin side — revenue & analytics
- Revenue dashboard switchable between Daily, Weekly, Monthly, and Yearly views
- Total revenue displayed for the selected period
- Total number of orders for the selected period
- Average order value for the selected period
- Bar chart showing revenue performance over time
- Top-selling menu items ranked by quantity sold and revenue generated
- Revenue and order count breakdown by table number
- Automatically calculated and updated from live order data — no manual entry needed
- One-click PDF export of the full revenue report for any selected period
Requirements
Technical requirements
For the customer
- Any smartphone or tablet
- A working camera to scan the QR code
- Mobile data or WiFi connection
- Any modern mobile browser (Chrome, Safari, Firefox)
For the admin
- Any smartphone, tablet, or computer
- A stable internet connection
- Any modern browser (Chrome, Safari, Firefox, Edge)
- Valid admin username and password
Instructions
How to use the application
Customer instructions
Step 1 — Scan the QR code
Locate the QR code placed on your restaurant table or anywhere visible in the restaurant. Open your smartphone camera and point it at the QR code. Tap the link that appears on your screen to open the menu in your browser.
Step 2 — Browse the menu
You will land directly on the restaurant menu. Browse through the categories — Starters, Main Course, Grills, Desserts, and Drinks — by tapping the category tabs at the top. Scroll through the items and read the descriptions and prices.
Step 3 — Add items to your cart
Tap the Add button on any item you want to order. The item will be added to your cart. Use the + and − buttons to increase or decrease the quantity of any item. The cart bar at the bottom of the screen will update automatically showing your total items and total price.
Step 4 — Review your cart
When you are ready to order, tap the cart bar at the bottom of the screen. An order summary will open showing all your selected items, their quantities, and your final total. Review your order carefully before proceeding.
Step 5 — Enter your table number
At the bottom of the order summary you will see a field asking for your table number. Look at the number on your table and type it into the field. This is required — you cannot place your order without entering a table number.
Step 6 — Place your order
Tap the Place Order button. Your order will be sent instantly to the kitchen. A confirmation message will appear on your screen saying your order has been received. You do not need to do anything else — simply wait for your food to be delivered to your table.
Admin instructions
Step 1 — Log in to the admin panel
Open your browser and go to the admin login page of the application. Enter your admin username and password and click Login. You will be taken to the main admin dashboard.
Step 2 — Monitor live orders
On the live orders page you will see all incoming customer orders in real time. Each order card shows the table number, items ordered, quantities, total price, and the time the order was placed. A sound and visual alert will notify you every time a new order arrives.
Step 3 — Update order status
When you start preparing an order, click the Preparing button on that order card to update its status. When the order is ready to be served, click the Ready button. Once the food has been delivered to the customer's table, click the Delivered button to mark the order as complete. Always keep the status updated so the team stays informed.
Step 4 — Manage the menu
Go to the Menu Management section from the navigation. To add a new item, click Add Item and fill in the name, category, description, price, and upload a photo, then save. To edit an existing item, click the Edit button on that item, make your changes, and save. To remove an item, click the Delete button. To temporarily hide an item without deleting it, toggle the availability switch to unavailable — it will be hidden from the customer menu instantly.
Step 5 — View revenue reports
Go to the Revenue Dashboard section from the navigation. Select your preferred time period — Daily, Weekly, Monthly, or Yearly — using the tabs at the top. The dashboard will display total revenue, total orders, average order value, a bar chart of performance over time, top-selling items, and revenue by table number for the selected period.
Step 6 — Export a report
To download a report, select the time period you want and click the Export PDF button. A PDF report will be generated and downloaded automatically to your device. You can save it, print it, or share it as needed.
you can access the Admin panel:
https://hotel-menu-kmjb.onrend...
Email | Username: [email protected]
password: admin123
QR code: https://hotel-menu-kmjb.onrend...
| Category | Scripts & Code / NodeJS |
| First release | 21 May 2026 |
| Last update | 26 May 2026 |
| Files included | .css, .html, .sql, Javascript .js |
| Tags | MySQL, analytics, real time, admin dashboard, Mobile friendly, restaurant menu, react, qr code, node.js, order management, menu management, pdf export, hotel system, live orders, revenue report |








