Boothlev V2.0 📸✨

Boothlev is a privacy-first web application that brings the authentic photobooth experience directly to your browser. The core editor runs fully client-side, and all AI features run on a self-hosted standalone backend. No app installations, no external APIs, and no hidden data collection. What happens on your device, stays on your device!

Built with Next.js, Zustand, and TailwindCSS.

🚀 Features

• 📸 Webcam Capture with manual/auto shutter and realistic shutter sound
• 🎨 Neo-Brutalism UI that is vibrant, bold, and distinct
• 🎶 Global 8-bit BGM relaxing Mario-style music across the app
• 🎞️ Visual Filters Add B&W, Sepia, and Brutal filters to your photos
• 📱 QR Code Sharing Easily share your collages to mobile devices via QR (Photos automatically deleted from server after 1 day)
• 🔒 Enterprise-Grade Security API endpoints are protected by global x-api-key header authentication, rate limiting (anti-spam), and use crypto.randomBytes(8) for unguessable share IDs.
• 🧩 Templates with automatic resizing and layout positioning
• 🪄 Drag-and-Drop Editor: Rearrange photos within slots
• ✨ Self-Hosted AI Background Removal: Upload custom images, and the standalone backend will remove the background using transformers.js (No external API Keys needed!).
• 🖌️ Interactive Manual Masking: A powerful built-in mask editor allows you to manually refine the AI background removal by painting parts to keep or remove.
• 📦 100% Static Frontend: The frontend builds to raw HTML/JS/CSS (output: "export").
• Advanced Interactive Editor:
  • Drag & Drop: Easily swap photo positions between slots.
  • Pan & Zoom: Crop and adjust your photos perfectly within their frames.
  • Custom Frame Colors: Change the background color dynamically with a Neo-Brutalism color palette.
  • Interactive Stickers (Emojis): Decorate your photobooth results with dozens of emojis. You can freely drag, resize, and delete stickers across the canvas.
  • Custom Uploaded Stickers: Upload any image or custom waifu as a sticker and save it to your local storage for future use!
• High-Res Export: Uses html-to-image to generate high-quality, print-ready PNG files (scaled 3x natively) that preserve all your edits, stickers, and custom fonts.
• Auto-Save: Accidentally refreshed the page? No problem. State is persisted in your browser so you won't lose your captured photos.

🛠️ Tech Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS
• State Management: Zustand with persist middleware
• Image Editing: react-easy-crop
• Rendering: html-to-image
• Icons: lucide-react

Boothlev uses a lightweight Monorepo-style architecture separated into two projects:

• frontend: The main frontend, 100% static React (Next.js) app.
• backend: The standalone Node.js Express server that handles AI processing locally.

1. Setup the Frontend

Create a .env.local file in the frontend directory:

NEXT_PUBLIC_API_URL=http://localhost:4000
NEXT_PUBLIC_API_KEY=your-secret-api-key

Then run:

cd frontend
npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

2. Setup the AI Backend

Create a .env file in the backend directory (or export it):

API_KEY=your-secret-api-key

Then run:

cd backend
npm install
node server.js

The API server will run on http://localhost:4000 and require the x-api-key header.

3. Deploy to aaPanel (or any VPS)

• For the frontend, run npm run build inside frontend. Upload the resulting out folder as a standard Static HTML website.
• For the backend, setup a Node.js project for backend in aaPanel (via PM2) running on your desired port.
• Don't forget to point the frontend fetch call in editor/page.js to your backend's public domain.

🎨 Design Philosophy

Boothlev utilizes a Neo-Brutalism design language inspired by modern, playful web trends. It features:

• High contrast colors and thick, stark borders (brutal-border).
• Sharp, prominent shadows (brutal-shadow-lg).
• Heavy typography (using Archivo Black and Inter).
• Playful emoji integrations and overlapping elements that embrace a raw, unpolished, yet highly aesthetic feel.

---

📝 Changelog

v2.0 - The Interactivity Update (August 2026)

• Global 8-bit Music: Relaxing Mario-style BGM now plays across all pages.
• Visual Filters: Added color filters (B&W, Sepia, Brutal) for photo customization.
• QR Code Sharing: Support for instant file sharing via QR Code scanning (offline-first).
• Shutter Sound: Camera shutter sound effects added to Photobooth mode.
• API Security: API Key (x-api-key) authentication to prevent AI server abuse.

v1.0 - Initial Beta (July 2026)

• Initial release of Boothlev.
• Support for capturing photos using WebRTC.
• Simple editor with Drag & Drop support.
• Integration of AI background removal.
• High-resolution image export.

---

Boothlev is an Open Source Project proudly brought to you by PT Lembur Demi Waifu 💖