Twee producten voor één zaak. De website, in drie thema’s op de QUEM-huisstijl. En los daarvan een eigen reserveringssysteem waarin gasten een baan, een tafel of beide boeken, met een live personeelsscherm voor het team. Dat systeem gaat verder als product: JABL Reserve.
De vraag
Nieuw concept van de eigenaren van Het Magazijn: bistro, vier jeu-de-boulesbanen en een bar. Eisen: boeken op de telefoon in een paar tikken, zonder account, met de prijs altijd zichtbaar. En minder telefoontjes voor de vloer.
Wat we deden
Drie ontwerprichtingen op de QUEM-huisstijl, gebouwd als wisselbare thema’s in één codebase. Daaronder één domein voor regels, prijzen, beschikbaarheid, Mollie-betalingen, transactionele mails en een realtime personeelsscherm.
Wat we bouwden
Bistro & BoulesDe website
Bistro, boules en bar in drie complete thema’s op de QUEM-huisstijl, gebouwd in Next.js. De kaart staat als echte tekst op de site, met allergenen, en teksten en pagina’s beheert de zaak zelf in Payload CMS.
Boekingsflow zonder account
Tien stappen, één vraag per scherm. Keuzes blijven als chips staan; terugspringen verliest geen state. Tijdens het betalen staat de plek tien minuten op hold.
Regels-engine
Banen worden berekend op capaciteit (max. tien spelers per baan). Daltarief di–do vóór 16:00, gesloten dagen en de groepsdrempel (21+ wordt een aanvraag) zijn configureerbaar. E-mailtypfouten worden herkend.
Betalingen en mails
Mollie met iDEAL, kaart en Apple Pay. Definitief pas na server-side verificatie van de webhook. Bevestiging, herinnering, wijziging en annulering via Resend en React Email, met selfservice via een beveiligde link.
Personeelsscherm
Realtime tijdlijn van banen en tafels op de tablet. Drag-and-drop herplannen, walk-ins en telefonische boekingen invoeren. Login per medewerker met pincode, auto-lock na vijf minuten.
Beheer en CMS
Banen, prijzen, openingstijden, mails, gebruikers en koppelingen achter tweestapsverificatie, met de bezetting per uur per week. Content via Payload CMS 3.
GuestPlan-koppeling
Tafels lopen via de GuestPlan Booking API en blijven in het bestaande systeem. Een eigen tafelmodule draait in schaduwmodus, klaar om over te nemen.
In beeld
Scroll om te bladeren
Het lastigste stuk
Eén boeking, twee systemen: een baan uit ons eigen domein en een tafel uit GuestPlan moeten samen kloppen, ook bij een mislukte betaling of een afgebroken flow. De oplossing: de betaling is leidend. Alles staat tien minuten op hold en wordt pas definitief na de bevestigde Mollie-webhook.
Onder de motorkap
Talen, frameworks en koppelingen- Talen
- TypeScript, SQL
- Framework
- Next.js 16, React 19
- CMS
- Payload CMS 3
- Data
- PostgreSQL, Drizzle ORM
- Integraties
- Mollie, GuestPlan Booking API, Resend + React Email
- Beweging
- Lenis, eigen animaties, reduced motion
- Kwaliteit
- Playwright, Vitest, axe-core, Lighthouse, visuele regressietests
- Hosting
- Eigen VPS in de EU, Docker, Caddy
Dit platform is nu een eigen product van JABL Works.
