Mario's Shake Shack: QR ordering, an in-store arcade and one back-office for a growing cafe brand
A shake and burger cafe in Nagercoil ran on spreadsheets and paper. I built QR table ordering with an arcade lounge that keeps guests entertained while they wait, a phone-number loyalty card, an in-house ad network, and one admin panel for orders, menu, stock, staff and finances, ready for franchise outlets.
4
Arcade games while you wait
2
Outlets on one platform
3
Ad placements with impression and CTR tracking
250+
Automated backend tests
Table of contents
The business problem
Mario's Shake Shack is a shake, burger and quick-bites café at Vetturnimadam, Nagercoil. The food was popular, but the business behind it ran on Excel sheets, WhatsApp messages and paper:
- Orders were taken by hand at the counter. Busy evenings meant queues, missed items and staff running between tables.
- The wait was dead time. Thick shakes and burgers take a few minutes to make, and customers simply sat and scrolled their phones. Nothing about that wait built the brand.
- There was no way to bring people back. No loyalty programme and no record of who the regulars were.
- The owner had no live view of the business. Sales, stock, daily expenses and opening checklists sat in separate spreadsheets, so getting a monthly profit figure meant a weekend of copy-pasting.
- Promotions had nowhere to live except printed posters, and local businesses wanting to reach the café's young crowd had no way to advertise.
The owner wanted one system that would make ordering faster, make the visit more fun, and give a real-time picture of the business, built so that new franchise outlets could be added later without starting over.
Why existing solutions failed
- Off-the-shelf POS systems handle billing well but stop at the counter. They don't offer table-side ordering that feels like the brand, and certainly not games.
- Aggregator dine-in features (Swiggy/Zomato-style) take a commission, own the customer relationship, and look like every other restaurant.
- Generic loyalty apps need customers to download yet another app. Almost nobody does that for a café.
- Spreadsheets were flexible but had no permissions, no audit trail and no live numbers.
The café needed something custom-built around how a small, fast-moving food business actually works: no app download, phone-first, and simple enough for floor staff to learn in minutes.
The solution
I designed and built a three-part platform:
- A customer website reached by scanning the QR code on each table. Guests browse the menu, order and collect loyalty stamps, then step into the Arcade Lounge while the kitchen works.
- An admin panel for the owner and staff. It covers live orders, menu and combos, tables and QR codes, inventory, daily checklists, expenses and income, sales reports, loyalty and ads.
- A Laravel API that powers both, with role-based access. It is franchise-ready from day one: every record belongs to an outlet, so a new branch can be added and given its own manager without code changes.
Ordering in four taps
Every table has its own QR code. Scanning it opens the menu already tied to that table, so there are no logins and no app to install. Customers filter by category, build a cart and place the order. If the loyalty card is switched on, the checkout asks for a mobile number and shows exactly which stamp this order earns.
The Arcade Lounge: turning the wait into the best part of the visit
This is the feature that makes Mario's different. After ordering, customers don't see a boring "please wait" screen. They see the café itself, drawn as an isometric scene, with arcade cabinets along the wall and their own character sitting at their table.
- Pick a character. Six illustrated avatars, saved on the phone for next time.
- Live order status. A progress bar (Received → Preparing → Served) stays at the top of every screen, refreshed every few seconds.
- "Your order is ready!" When the kitchen marks the order ready, a pop-up appears, with vibration on supported phones, even mid-game.
- Play after food, too. The arcade stays open after the order is served, so people keep playing at the table.
Four in-house games, built for one thumb
I built four short, replayable games in HTML5 Canvas, each themed on the menu:
| Game | How it plays |
|---|---|
| 🥤 Shake Stacker | Time your taps to stack scoops sky-high without toppling the cup |
| 🃏 Menu Match | Flip cards and match pairs of real menu items, which quietly advertises the menu |
| 🍔 Burger Catch | Drag the bun to catch ingredients and dodge the burnt patties |
| 🍟 Flappy Fry | Tap to fly a French fry between ketchup and mustard bottles |
All four share one game shell: score, personal best, pause and back. Each game loads only when it is tapped, so the first page stays fast on mobile data. Games pause automatically when the phone locks or the order-ready pop-up appears.
An in-house ad network that pays for itself
Every game screen doubles as advertising space that Mario's owns, with no third-party ad networks and no tracking scripts:
- Three placements: a banner under each game, a card on the game-over screen, and the TV on the lounge wall, which even non-players see.
- Mario's own promos and local partners. Ads run on a schedule and use a weight to control how often each one shows. As the brand grows, they can also target specific outlets.
- Honest numbers. An impression only counts when at least half the ad is on screen for a full second. Clicks are tracked separately, and the admin panel shows impressions, clicks and click-through rate per ad and per day, ready to share with partners.
The ad report above shows demo data.
A loyalty card customers don't have to download
The loyalty programme is a digital stamp card tied to the customer's mobile number. The owner sets the rules in the admin panel: how many visits make a card, whether visits must be on consecutive days, a minimum order value, whether asking for the number is optional or required, and which reward lands on which visit (a free item, a percentage or a flat discount). Rewards are applied to the order automatically, and staff see them on the live orders board.
One back-office for the whole business
- Live orders board. New QR orders appear instantly. Staff accept, mark ready or cancel with one tap, and the customer's phone updates on its own.
- Dashboard. Orders, revenue, top-selling items and trends for the last 30 days.
- Menu, combos and recipes. Each menu item can list the stock items it uses, so inventory is deducted automatically when an order is completed.
- Inventory. Balances, transactions and a bulk import from the café's existing multi-tab Excel sheet, so the spreadsheet history wasn't thrown away.
- Daily checklists. Opening and closing tasks, with a photo required as proof for each item.
- Finance. Expenses, income and a profit and loss report for any date range, plus a sales report with CSV export.
- Three roles. Owner (super admin), outlet manager and staff, each seeing only what they need. This is ready for when Mario's opens more branches.
Key features
- QR table ordering with no login and no app install
- Arcade Lounge: an isometric café scene with your avatar at your table
- Four canvas games: Shake Stacker, Menu Match, Burger Catch and Flappy Fry
- Live order tracking with an "order ready" pop-up, even mid-game
- In-house ads: three placements, scheduling, weighted rotation, viewable-impression and CTR reports
- Loyalty stamp card by mobile number, with configurable rewards applied automatically
- Live orders board for staff, with accept, ready and cancel
- Dashboard, sales and profit and loss reports with CSV export
- Recipe-based stock deduction and inventory import from Excel
- Daily checklists with photo proof
- Franchise-ready: outlets, outlet managers and per-outlet data separation built in
Technical architecture
- Backend: Laravel 12 REST API with Sanctum tokens. A policy layer scopes every query to the user's outlet and role, and form requests validate every input. 250+ automated tests cover ordering, loyalty, ads, inventory, checklists and permissions.
- Customer site: Next.js App Router. Server actions place orders, so the API address never reaches the browser. Games are lazy-loaded Canvas components sharing one game loop and shell, and the lounge scene is drawn as SVG in code, so it stays crisp and tiny.
- Admin panel: Next.js with a component library, charts and data tables, and a session stored in an HTTP-only cookie.
- Hosting: AWS Lightsail for the API with managed MySQL, and AWS Amplify for both Next.js apps. It runs at about $23–30 a month in total, with billing alerts set up before launch.
Challenges
- Making games feel native in a browser. The games had to run smoothly on budget Android phones over mobile data. I wrote them in plain Canvas with a shared game loop that pauses automatically, loaded each game only on demand, and drew the café scene in SVG instead of shipping heavy image sprites.
- Fair ad numbers. Counting every render as an impression would have inflated the reports partners rely on. Impressions only count when at least half the ad is visible for a full second, and stats are rolled up per ad per day so the reports stay fast.
- Interrupting a game politely. The "order ready" alert needed to reach someone mid-game without wrecking their run. The game pauses, the pop-up offers Keep playing or Back to my table, and the arcade stays open after the meal.
- Building for one outlet, ready for many. Mario's has one outlet today, but the owner plans to franchise. Outlet separation lives in one place in the API and is covered by permission tests, so a new branch's manager will never see another branch's sales.
- Leaving spreadsheets without losing history. The inventory importer reads the café's existing multi-tab Excel workbook and reports bad rows instead of failing silently.
The outcome
- Ordering moved to the table. Customers scan, order and get back to their friends instead of queueing at the counter, and staff get a clean live board instead of handwritten slips.
- The wait became part of the brand. Instead of staring at a spinner, guests pick a character, play a menu-themed game and get pinged when the food is ready.
- A new revenue line. The lounge TV, game banners and game-over cards give Mario's space for its own promos and for local partners, with reports the café can share.
- Regulars are now recognisable. The phone-number stamp card builds a customer list with zero app downloads.
- One source of truth. The owner sees revenue, orders, top sellers, expenses and profit in one place, instead of reconciling spreadsheets every month. The same system is ready for the next outlet.
What this means for other businesses
Any business where customers wait, such as cafés, restaurants, salons, clinics or service centres, can turn that wait into engagement and revenue:
- QR ordering or check-in removes the counter queue without forcing an app download.
- Light, branded mini-games and status updates make waiting feel shorter and keep people on your screen.
- Owned ad space turns that attention into income from your own promos or local partners.
- A loyalty card tied to a phone number brings people back.
- One back-office replaces the spreadsheets and grows with you when you open new branches.
If your customers spend time waiting, I can help you turn that time into something they enjoy — and something that pays.