MJS Photobooth
An interactive photobooth web app for events - featuring webcam capture, layout and frame customization, photo filters, and result delivery via email, WhatsApp request, or QR code download.
MJS Photobooth is a browser-based photobooth application designed for MJ Solution event installations. Users go through a guided flow: welcome screen, layout selection, photo capture via webcam, preview with frame overlay composited using html2canvas, and final delivery via QR code, email, or WhatsApp request. The composited photo is uploaded to a Supabase Storage bucket named after the event, and a QR code is generated from the public URL for instant download. Email delivery uses Nodemailer via a Next.js API route. WhatsApp requests are logged to a Supabase database table and managed through a separate admin dashboard page.
Physical photo prints at events require expensive hardware and on-site operators. There was no digital alternative that could deliver a polished, branded photo experience and get results directly into visitors' hands without manual intervention.
A fully browser-based photobooth with a guided multi-screen flow that captures, composites, and delivers branded photos digitally - via QR code scan, email, or WhatsApp - with zero need for physical printing hardware. An admin dashboard lets the team manage and track WhatsApp delivery requests.
- Multi-screen guided flow: Welcome -> Layout -> Photo Capture -> Preview -> QR Delivery
- Webcam photo capture with layout and frame selection
- Final image compositing with frame overlay using html2canvas
- QR code generation from Supabase Storage public URL for instant download
- Email delivery with photo attachment via Nodemailer (Next.js API route)
- WhatsApp request queue stored in Supabase DB with admin dashboard
- Dynamic Supabase Storage bucket per event name
- Centralized session state via React Context (PhotoboothProvider)
- Material UI v6 themed component system