Cekrek! Photobooth
An interactive web-based photobooth application that allows users to capture photos, create customizable photo strips with various filters, templates, and text/emoji overlays.
Frontend DeveloperMay 30 – May 30, 2025Solo Project
Next.jsReactTypeScriptHTML5 Canvas APIWebRTC (getUserMedia)ShadCN UITailwind CSSLucide React
Key Features
- Live camera preview with mirroring option.
- Capture single photos or sequences for photo strips (e.g., 4 or 8 photos).
- Real-time image filters (grayscale, sepia, bright, contrast, etc.).
- Diverse photo strip templates (solid colors, gradients, patterns, custom images).
- Custom text and emoji stamp overlays on strips.
- Ability to retake individual photos within a strip.
- Dynamic photo strip preview before download.
- Downloadable final photo strip as a PNG image.
- Responsive design with adaptive video aspect ratio (4:3 on mobile, 16:9 on larger screens).
- Photo capture countdown timer.
What I Learned
Gained significant experience in advanced HTML5 Canvas API usage for dynamic image generation, compositing, and applying filters. Deepened understanding of WebRTC for camera stream management, complex state management in React for interactive UIs, and refactoring large components into modular custom hooks and utilities. Also practiced responsive design for media-rich applications and effective integration of UI libraries like ShadCN UI.
Project Purpose
To develop a feature-rich, interactive photobooth web application, showcasing skills in front-end web technologies, media manipulation, and creating engaging user experiences. Serves as a practical project for applying advanced React and browser API concepts.