Photo Booth

Inspiration

We own polaroids and love the feeling of holding a physical photo. But film is expensive, and our wallets are not. So we did what any reasonable person would do: we built our own photo booth app instead of buying more film.

What it does

DigiCam X lets you take photos straight from your webcam, save them to your computer with a custom title and timestamp, and browse them in a retro photobooth-style gallery.

How we built it

Vanilla JavaScript handles the frontend: live webcam streaming via the MediaDevices API, frame capture via canvas, and a POST request to the backend. Flask handles the Python side, receiving the image blob and saving it to disk with a timestamp so nothing gets overwritten. The UI was designed in Figma and brought to life in HTML and CSS.

Challenges we ran into

Integrating Figma Make with our existing frontend files was a journey. The React component we downloaded didn't exactly shake hands with our plain HTML setup, so we had to convert it. We also spent a solid amount of time figuring out why the photos weren't saving. Turns out the backend wasn't running. Classic. On top of that, this was our first time using VS Code, GitHub, and the terminal, so there was a learning curve just getting comfortable with the tools before we could even write code.

Accomplishments that we're proud of

It works! The camera integration was genuinely exciting to get right; streaming live video in a browser and snapping a frame felt like magic the first time it worked. We're also proud that we shipped a real full-stack app: a frontend, a backend, an API, and a gallery, all talking to each other.

What we learned

We went from zero to knowing our way around VS Code, the terminal, Git commits, pushes, and branches, Figma Design/Make, and full-stack web development.