Project 04 / Personal
Photobooth.
A photo booth that runs in your browser.
I built the camera flow, photo-strip layouts, and canvas editor, including stickers, backgrounds, and language selection.
- Focus
- Browser camera & canvas
- Built with
- Next.js / React / TypeScript / Fabric.js / Canvas
- Status
- Public web app · Personal project
01
Overview
Photobooth is my browser photo-booth app. You can take photos, arrange them in a strip or grid, add stickers, and download the result.
The camera, photo layouts, and canvas editor need to work together so someone can make a strip without switching tools.
02
My work
I built the application, camera utilities, strip templates, canvas controls, and language-selection flow.
- Built photo capture and media-stream cleanup.
- Added strip and grid layouts, canvas composition, and image export.
- Added stickers, background and frame controls, and translated interface text.
03
Technical decisions
The app uses Next.js and React. Camera hooks manage the browser media stream; Canvas captures frames; Fabric.js handles the editable photo strip and export.
- Kept camera acquisition and stream cleanup separate from editing.
- Calculated strip sizes and photo positions from the chosen layout.
- Kept language selection in a shared provider and saved the browser preference.
04
Scope & status
The app is public, and its source is available on GitHub. It includes photo capture, an editable strip, and image export.
- Camera capture depends on the browser’s permissions and device support.
- Sample photos are explicitly selected and labeled. They let someone try the editor without granting camera access; physical-camera testing remains separate.