By Khanh Nguyen (Nguyễn Đình Khánh Nguyên) · Updated
From camera access to a finished photo strip
Mini PhotoBooth turns a browser camera session into a four-photo strip. Users choose a capture mode, set the countdown, review the sequence and export a PNG. The flow has a clear end product, so the interface needs to make each stage understandable before users begin capturing.
This project is a useful example of stateful frontend work. Camera readiness, countdown, capture and preview are different states, and the next action depends on the current one. Designing those transitions is more important than simply adding a camera component to a page.
Capture workflow and UI structure
The current public repository uses Next.js 16, React 19, TypeScript, React Webcam, Tailwind CSS 4 and HeroUI. Its capture route separates components, hooks, workflow logic, presets and shared types. The README documents manual and automatic capture, countdown selection, a four-photo preview and rounded-corner PNG export.
Camera access depends on the browser environment and permission granted by the user. The project README calls for HTTPS or localhost. That prerequisite belongs in the capture experience because a camera permission problem should be distinguishable from an incomplete capture sequence.
What this work adds to the portfolio
The demo and source show an interactive product beyond a standard content page. It complements File Uploader: one project produces a file in the browser, while the other manages file selection and sharing through a server API. Both require understandable state transitions and clear feedback around asynchronous work.
Related work and evidence
- Explore the capture, preview and export flow. Try the Mini PhotoBooth demo.
- Review the route structure and capture workflow organization. Mini PhotoBooth source repository.
- See how another project handles files after they are created. File Uploader and QR sharing case study.
- For my broader skills and background, view my CV. Khanh Nguyen — Fullstack Software Engineer CV.
