The latest articles on DEV Community by Mohammad Moiz M (@moizz_). https://dev.to/moizz_ https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4158325%2F9a51d4e5-e52a-4dd7-b48d-0959e7bf4deb.jpg https://dev.to/moizz_ en Mohammad Moiz M Sun, 04 Oct 2026 17:52:19 +0000 https://dev.to/moizz_/i-built-a-cozy-little-photobooth-for-someone-special-9ij https://dev.to/moizz_/i-built-a-cozy-little-photobooth-for-someone-special-9ij <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <h2> What I Built </h2> <p>I built Cozy Photobooth - a little browser-based photobooth made for a friend who loves taking pictures and collecting memories.</p> <p>The idea was pretty simple :)</p> <p>Instead of sending someone another boring photo, why not turn the moment into an actual keepsake?</p> <p>Cozy Photobooth lets you:</p> <p>📸 Take photos directly from your browser<br> 🎞️ Choose from different photo layouts<br> 🎨 Apply aesthetic filters<br> 🧸 Add stickers, emojis and doodles<br> ✍️ Personalize your photos<br> 🖼️ Create strips, polaroids, collages and postcards<br> 📥 Download the final result in high resolution</p> <p>No account. No complicated editor. Just open it, take some pictures, make them cute, and save the memory.</p> <h2> Demo </h2> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://cozy-photobooth.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">cozy-photobooth.vercel.app</span> </a> </div> </div> </div> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/M0izz" rel="noopener noreferrer"> M0izz </a> / <a href="https://github.com/M0izz/Cozy-Photobooth" rel="noopener noreferrer"> Cozy-Photobooth </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">📸 Cozy Photobooth</h1> </div> <p>A premium, aesthetic, browser-based photobooth experience built with <strong>Next.js</strong>. Capture, style, and download professional-grade photo strips directly from your browser.</p> <div class="markdown-alert markdown-alert-tip"> <p class="markdown-alert-title">Tip</p> <p><strong>Live Demo:</strong> <a href="https://cozy-photobooth.vercel.app/" rel="nofollow noopener noreferrer">cozy-photobooth.vercel.app</a></p> </div> <div class="markdown-heading"> <h2 class="heading-element">✨ Overview</h2> </div> <p><strong>Cozy Photobooth</strong> 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.</p> <p>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.</p> <div class="markdown-heading"> <h2 class="heading-element">🚀 Features</h2> </div> <ul> <li> <strong>🎯 Intelligent Workflow:</strong> Guided experience from layout selection to final capture.</li> <li> <strong>🖼️ Iconic Layouts:</strong> Choose from classic Strips, Polaroid, Collage, or realistic Postcard formats.</li> <li> <strong>🎨 Studio Suite:</strong> <ul> <li> <strong>Premium Filters:</strong> Real-time filter engine (Warm Vintage, Soft Café, Golden Hour, etc.) with precision intensity control.</li> <li> <strong>Dynamic Decorations:</strong> High-quality stickers and emojis with intuitive drag-and-drop placement.</li> <li> <strong>Artist Mode:</strong> Integrated doodle layer for freehand drawing…</li> </ul> </li> </ul></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/M0izz/Cozy-Photobooth" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <p>I wanted the experience to feel more like an actual photobooth rather than a web form with a camera attached to it.</p> <p>The app is built with:</p> <p>Next.js 14<br> React<br> JavaScript<br> Vanilla CSS<br> HTML5 Canvas<br> Browser Media APIs<br> Vercel</p> <p>The camera feed runs directly in the browser, while Canvas handles the final composition — filters, decorations, doodles and the different photo layouts.</p> <p>The whole flow is intentionally simple:</p> <p>Choose → Capture → Customize → Download</p> <p>One of my favourite parts was getting the Canvas rendering right so the downloaded image actually looks good instead of being a blurry screenshot.</p> <h2> Why Does Open Innovation Matter? </h2> <p>For something like this, open innovation matters because I didn't need a huge proprietary platform to build a fun, personal experience.</p> <p>Modern web APIs, open-source frameworks and community-built tooling gave me almost everything I needed:</p> <p>camera → processing → composition → final image</p> <p>I could experiment, break things, change the UX and build the experience around the person I was making it for :)</p> <p>That's what I like about open source you can take the building blocks and turn them into something personal and <br> <em><strong>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 😭 :)</strong></em></p> <h2> My Agent Session </h2> <p>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.</p> <h2> Prize Categories </h2> <p>Hacktoberfest Weekend Challenge: Build for a Friend</p> devchallenge weekendchallenge hf26challenge