Privacy-first browser photo booth with a clean studio UI, curated presets, and static Pages deployment.
Live site: https://thanhnguyxnorg.github.io/Snapbooth/
Browser-only. Count-in shutter. Filters, frames, GIFs, QR share.
Snapbooth is a single-page React app that turns the browser into a photobooth workflow:
- intro screen before the studio
- webcam capture and upload fallback
- count-in shutter delay for manual and auto capture
- live filter preview
- layout, frame, caption, and text-scale presets
- PNG, GIF, boomerang GIF, and QR export
- front/rear camera switching
- demo roll for camera-less preview
The app stays browser-only unless you use the temporary QR share flow.
| Step | What happens |
|---|---|
| 1 | Enter the intro screen and start a roll |
| 2 | Pick layout, frame, filter, and caption preset |
| 3 | Set the count-in delay |
| 4 | Capture manually or run an auto roll |
| 5 | Develop, export, and share from the browser |
| Area | Count | Notes |
|---|---|---|
| Layouts | 5 | single, pair, strip, quad, contact |
| Frames | 19 | from Classic to Polaroid, Zine, and Archive |
| Filters | 24 | daylight, mono, film, mood, and lab groups |
| Captions | 24 | editorial, analog, playful, and minimal groups |
See the full catalog in PRESET_CATALOG.md.
npm install
npm run devFor the Pages build:
npm run buildThe production output is written to docs/, and GitHub Pages is configured from main + docs/.
For a local smoke pass against the preview build:
npm run test:e2e- Rebuilt the old multi-page HTML app into one React/Vite experience
- Added the intro/landing screen before the studio
- Added caption presets, more frames, more filters, and live camera filter preview
- Added front/rear switching, count-in capture, demo roll generation, and boomerang GIF export
- Kept the core booth flow: layout, frame, filter, capture, develop, share
- Added Dependabot automation for patch/minor updates
- Published the app from GitHub Pages
| File | Role |
|---|---|
src/App.tsx |
App flow, presets, capture, export |
src/styles.css |
Visual system and responsive layout |
docs/ |
Generated Pages output |
PRESET_CATALOG.md |
Caption, frame, and filter reference |
CONTRIBUTING.md |
Branch, build, and review workflow |
Ideas were selected from real photobooth projects instead of being invented blindly:
- photobooth-app/photobooth-app
- PhotoboothProject/photobooth
- AungMyoKyaw/photo-booth
- dwolters/photobooth
- reuterbal/photobooth
- Default branch:
main - Pages source:
main+docs/ - Live URL: thanhnguyxnorg.github.io/Snapbooth
The repo metadata now carries the same tags as the product:
photobooth browser webcam countdown gif boomerang frames filters qr-code react vite typescript github-pages privacy-first
Read CONTRIBUTING.md before changing the repo.