Table Experience
Source:apps/frontend/app/[locale]/audience/page.tsx
Doc Status: Excellent | ✓ Clear summary | ✓ Easy to read | ✓ Matches code | ✓ Good structure | ✓ Professional look | ✓ Visual components
Why This Matters
Once a guest is seated, the evening shifts from anticipation to experience. They have a QR code at their table, and scanning it unlocks a mobile companion that puts everything at their fingertips — the menu, tonight’s photos, the lucky wheel, the review challenge. No flagging down servers, no leaving the table. The table becomes an entertainment hub.How It Works
Scan the QR Code at Your Table
Guest opens their phone camera and scans the QR code positioned at their table. The code contains
tableId and profileId parameters that route to /audience?tableId=X&profileId=Y. If they try to access the page without scanning first, they see an error asking them to scan at their table.Confirm Your Table
After scanning, the page loads and the header immediately confirms which table they’re seated at — a gold “Table seated” badge appears. They know they’re in the right place.
See What's Coming Up
If there’s an upcoming show scheduled, a notification banner appears at the top showing the show title, date, and time. A “Book Now” button lets them reserve tickets for a future event without leaving the current experience.
Browse the Five Tabs
The main content area has five tabs. Guests tap to switch between them:
| Tab | What You’ll Find |
|---|---|
| Menu | Food and beverage menu (only if you have an open order) |
| Guests | Who’s here tonight — see other guests checked in |
| Photos | Guest photos from tonight’s experience |
| Spin | Lucky wheel with prizes (only if you have an open order) |
| Review | Google review challenge and rewards |
Play Minigames
If they have an active order, guests can spin the lucky wheel to win prizes like free drinks or discounts. Prizes get added directly to their bill. They can also upload photos to appear on the Photo Wall and see who else is at the venue tonight.
Table Experience Flow
Tab Access Rules
Some tabs require an active order to use:- Menu — Requires active order (staff or guest submitted)
- Guests — Always available
- Photos — Always available
- Spin — Requires active order (prizes go to your bill)
- Review — Always available
Booking Without Leaving
The page includes aBookingModal that opens when guests tap “Book Now” on an upcoming show notification. They can reserve future shows without navigating away from the Table Experience.
Technical Details
Route
Query Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
tableId | string | Yes | Unique table identifier |
profileId | string | Yes | Guest profile identifier |
tab | string | No | Active tab (default: menu) |
Tabs State
Usesnuqs for URL-based tab state:
Components
Components
Components
| Component | File | Purpose |
|---|---|---|
MenuGrid | components/table/menu-grid.tsx | Food/beverage menu display |
GuestWallContentLoader | components/minigames/guest-wall.tsx | Tonight’s guests feed |
PhotoWallContent | components/minigames/photo-wall.tsx | Guest photos gallery |
SpinWheelContent | components/minigames/spin-wheel.tsx | Lucky wheel minigame |
GoogleReviewContent | components/minigames/google-review.tsx | Review challenge UI |
BookingModal | components/booking/booking-modal.tsx | Inline booking for future shows |
Convex Queries
| Query | Purpose |
|---|---|
domains.payments.getOpenOrderByTable | Fetch active order for the table |
domains.events.listUpcoming | Get next upcoming show |
Error States
IftableId is missing or invalid, a full-page error displays:
- Warning icon
- “Invalid QR Code” heading
- Explanation to scan the QR code at their table
Tab Details
| Tab | Component | Purpose |
|---|---|---|
| Menu | MenuGrid | Full food and beverage menu (requires active order) |
| Guests | GuestWallContentLoader | Live feed of checked-in profiles |
| Photos | PhotoWallContent | Guest-uploaded photos from tonight |
| Spin | SpinWheelContent | Lucky wheel minigame (requires active order) |
| Review | GoogleReviewContent | Google review challenge and rewards |
See Also
Photo Wall
Public guest photo gallery with auto-rotation
Lucky Spin
Spin wheel minigame details
Review Challenge
Google review reward system
Booking
How to reserve tickets