This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
What I Built
I built Cozy Photobooth - a little browser-based photobooth made for a friend who loves taking pictures and collecting memories.
The idea was pretty simple :)
Instead of sending someone another boring photo, why not turn the moment into an actual keepsake?
Cozy Photobooth lets you:
📸 Take photos directly from your browser
🎞️ Choose from different photo layouts
🎨 Apply aesthetic filters
🧸 Add stickers, emojis and doodles
✍️ Personalize your photos
🖼️ Create strips, polaroids, collages and postcards
📥 Download the final result in high resolution
No account. No complicated editor. Just open it, take some pictures, make them cute, and save the memory.
Demo
Code
📸 Cozy Photobooth
A premium, aesthetic, browser-based photobooth experience built with Next.js. Capture, style, and download professional-grade photo strips directly from your browser.
Tip
Live Demo: cozy-photobooth.vercel.app
✨ Overview
Cozy Photobooth is a modern reimagining of the classic physical photobooth, designed for the web. Inspired by nostalgic polaroid aesthetics, it provides an immersive and minimal interface for creating digital keepsakes.
Whether you're looking for a vintage film look or a playful sticker-filled collage, Cozy Photobooth offers a seamless, high-performance workflow that feels both familiar and state-of-the-art.
🚀 Features
- 🎯 Intelligent Workflow: Guided experience from layout selection to final capture.
- 🖼️ Iconic Layouts: Choose from classic Strips, Polaroid, Collage, or realistic Postcard formats.
-
🎨 Studio Suite:
- Premium Filters: Real-time filter engine (Warm Vintage, Soft Café, Golden Hour, etc.) with precision intensity control.
- Dynamic Decorations: High-quality stickers and emojis with intuitive drag-and-drop placement.
- Artist Mode: Integrated doodle layer for freehand drawing…
How I Built It
I wanted the experience to feel more like an actual photobooth rather than a web form with a camera attached to it.
The app is built with:
Next.js 14
React
JavaScript
Vanilla CSS
HTML5 Canvas
Browser Media APIs
Vercel
The camera feed runs directly in the browser, while Canvas handles the final composition — filters, decorations, doodles and the different photo layouts.
The whole flow is intentionally simple:
Choose → Capture → Customize → Download
One of my favourite parts was getting the Canvas rendering right so the downloaded image actually looks good instead of being a blurry screenshot.
Why Does Open Innovation Matter?
For something like this, open innovation matters because I didn't need a huge proprietary platform to build a fun, personal experience.
Modern web APIs, open-source frameworks and community-built tooling gave me almost everything I needed:
camera → processing → composition → final image
I could experiment, break things, change the UX and build the experience around the person I was making it for :)
That's what I like about open source you can take the building blocks and turn them into something personal and
This was build for my freind who loves photobooths and yearing got it but the city she lives in didn't have any so made this for her birthday and ofcourse she cried 😭 :)
My Agent Session
I slightly use Gemini for project ratings and debugging and it was basic and simple project so it didn't required extensive AI sprints or coding sessions.
Prize Categories
Hacktoberfest Weekend Challenge: Build for a Friend
Top comments (0)