Two products for one venue. The website, in three themes on the QUEM brand. And separately our own booking system where guests book a lane, a table or both, with a live staff screen for the team. That system lives on as a product: JABL Reserve.
The brief
A new concept from the owners of Het Magazijn: bistro, four pétanque lanes and a bar. Requirements: book on a phone in a few taps, no account, the price always visible. And fewer calls for the floor team.
What we did
Three design directions on the QUEM brand, built as switchable themes in one codebase. Underneath, one domain for rules, prices, availability, Mollie payments, transactional email and a real-time staff screen.
What we built
Bistro & BoulesThe website
Bistro, boules and bar in three complete themes on the QUEM brand, built in Next.js. The menu is real text on the site, with allergens, and the venue edits copy and pages itself in Payload CMS.
Booking flow without an account
Ten steps, one question per screen. Choices stay as chips; going back loses no state. During payment the slot is held for ten minutes.
Rules engine
Lanes are calculated by capacity (max. ten players per lane). Off-peak pricing Tue–Thu before 16:00, closed days and the group threshold (21+ becomes a request) are configurable. Email typos are caught.
Payments and email
Mollie with iDEAL, card and Apple Pay. Final only after server-side verification of the webhook. Confirmation, reminder, change and cancellation through Resend and React Email, with self-service via a secure link.
Staff screen
Real-time timeline of lanes and tables on the tablet. Drag-and-drop rescheduling, walk-ins and phone bookings. Sign-in per staff member with a PIN, auto-lock after five minutes.
Admin and CMS
Lanes, prices, opening hours, emails, users and integrations behind two-step verification, with occupancy per hour per week. Content through Payload CMS 3.
GuestPlan integration
Tables run through the GuestPlan Booking API and stay in the existing system. Our own table module runs in shadow mode, ready to take over.
In pictures
Scroll to browse
The hardest part
One booking, two systems: a lane from our own domain and a table from GuestPlan have to line up, even when a payment fails or a guest abandons the flow. The fix: payment leads. Everything is held for ten minutes and only becomes final after Mollie’s confirmed webhook.
Under the hood
Languages, frameworks and integrations- Languages
- TypeScript, SQL
- Framework
- Next.js 16, React 19
- CMS
- Payload CMS 3
- Data
- PostgreSQL, Drizzle ORM
- Integrations
- Mollie, GuestPlan Booking API, Resend + React Email
- Motion
- Lenis, custom animation, reduced motion
- Quality
- Playwright, Vitest, axe-core, Lighthouse, visual regression tests
- Hosting
- Own VPS in the EU, Docker, Caddy
This platform is now a JABL Works product of its own.
