The Challenge
Chaidrive needed a digital menu that:
- Could be updated instantly when prices or items change
- Displayed clear allergy information
- Worked on any smartphone without app downloads
- Looked professional and matched their brand
Paper menus were getting outdated quickly, and generic QR menu solutions didn't offer the flexibility they wanted.
The Approach
We built a Next.js application connected to Stackby — a flexible database platform similar to Airtable but more affordable for small businesses.
The setup:
- Menu items and categories live in Stackby
- Staff update the database directly (add items, change prices, mark unavailable)
- The website fetches fresh data on every load
- Customers see the current menu instantly
How It Works
For Customers
- Scan QR code at the table
- Menu loads in their browser
- Browse categories (Starters, Mains, Desserts, etc.)
- See prices, descriptions, and allergy info
- Order at the counter or flag staff
No app download. No account creation. Just the menu.
For Staff
- Open Stackby on any device
- Find the item to update
- Change price, description, or availability
- Save — the website updates automatically
Training time: about 5 minutes.
Technical Implementation
Data Structure
Categories (Stackby Table) ├── Name ├── Display Order └── Description Menu Items (Stackby Table) ├── Name ├── Description ├── Price ├── Category (linked) ├── Allergens ├── Available (toggle) └── Image (optional)
Fetching Data
The app uses server-side data fetching:
const menuItems = await getMenuItems();
const categories = await getCategories();
// Group items by category
const itemsByCategory = menuItems.reduce((acc, item) => {
const categoryName = item.CategoryId;
if (!acc[categoryName]) acc[categoryName] = [];
acc[categoryName].push(item);
return acc;
}, {});
Fresh data on every request means no stale menus.
Allergy Information
A prominent allergy alert appears at the top of the menu, with specific allergen tags on relevant items. This isn't just good practice — it's a legal requirement for food businesses.
Design Decisions
Category Sections
Items are grouped into collapsible category sections. This keeps the menu scannable without overwhelming users with a massive list.
Mobile-First
Most customers view menus on phones, so the design prioritises:
- Large, readable text
- Touch-friendly controls
- Fast load times on mobile data
- Minimal scrolling within categories
No Ordering Integration
Deliberately kept simple. Chaidrive wanted a menu, not a full ordering system. Customers order at the counter — the menu just helps them decide.
This keeps the system simple and avoids payment processing complexity.
Why Stackby?
Stackby offers:
- Spreadsheet-like interface (familiar to staff)
- API access for website integration
- Much cheaper than Airtable for small businesses
- Reliable enough for menu data
For a restaurant menu, it's the right level of complexity — powerful enough to structure data properly, simple enough that anyone can update it.
The Result
Chaidrive now has a digital menu that's always accurate. Price changes happen in seconds. New dishes appear immediately. Seasonal items can be toggled on and off.
For customers, the experience is seamless — scan, browse, decide. No friction, no downloads, no frustration with outdated information.
Tech Stack
- Frontend: Next.js 14
- Database: Stackby
- Styling: Tailwind CSS
- Deployment: Vercel
- Access: QR code links to menu URL
