The Photobooth Project is a fully client-side image capture and processing application designed to protect user privacy. All captured images, filters, and generated outputs are processed entirely in-browser on the user’s device. No third-party servers are involved, and all temporary data is cleared automatically when the session ends.
- Client-side image processing only (no data leaves your device)
- Webcam capture and file upload support
- Real-time CSS-based filters
- Customizable photo strips (background color, footer text, layout)
- 1–4 image strip generation
- GIF generation from captured images
- Session gallery in memory (cleared on page refresh or exit)
- Export as PNG or GIF, or print directly from the device
- All generated content is copyright-free for user use
- Cross-browser support on modern browsers
- Framework: Next.js
- UI: ShadCN
- Styling: Tailwind CSS
- Image Generation: html-to-image
- GIF Generation: gifshot
- Filters: CSS filters using CSSGram by Una
- Node.js: v24.12.0+
- Package Manager: pnpm
- Browser: Modern browser with Canvas API support
- Note: Camera permissions may need to be enabled differently depending on the browser being used.
git clone [REPOSITORY_URL]
cd the-photobooth-project
pnpm install
pnpm run devApplication runs at:
http://localhost:3000
pnpm run dev # Run development server
pnpm run build # Build for production
pnpm run start # Start production server
pnpm run lint # Run linter- Open the application
- Select input method: webcam or upload an image
- Apply filters in real-time
- Capture 1–4 images
- Customize strip layout, background color, and footer text
- Generate a PNG, GIF, or print directly
- Session gallery allows previewing images, stored only in memory
- The
<video>feed or uploaded image is rendered into a hidden node element, styled and filtered the same way as the preview element. - Filters are applied to both the preview and hidden node via CSS classes
html-to-imagecaptures the hidden node as a PNG blob URL.- Images are compiled into strips or GIFs entirely in-browser.
- Blob URLs are revoked after use to ensure no data persistence.
- All processing happens locally—nothing is sent to external servers.
Supported: Chrome, Edge, Firefox, Safari, modern mobile browsers
Caution: Legacy browsers or those without Canvas API or modern JS support may not function correctly.
Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for more information.
This project uses copyright-free materials. See the ATTRIBUTIONS file for detailed credits.