Retro Photobooth

Inspiration

We love the nostalgia of sticker/photo booths—but they’re rare, pricey, and not exactly dorm-friendly. We wanted a pixel-aesthetic, web-native version that friends can use anywhere, then pin their photostrips to a “bulletin board.” Think retro photobooth meets modern AI.

What it does

In Retro Photobooth, you step into a virtual booth and pick Photo or Video. Video lets you record a 5-second clip or record indefinitely until you hit Stop, then download the result. Photo gives you live face-tracked props, toggleable filters, and a choice of three retro borders; hitting the shutter starts a 5-second pre-roll followed by a 3-shot burst with 5 seconds between shots, and you can cancel mid-sequence. Afterward, your shots are auto-composed into a bordered photostrip and added to the bulletin board, where you can download or delete any strip.

How we built it

We built Retro Photobooth with React + TypeScript (Vite), using getUserMedia for the camera and MediaRecorder for video capture/downloads. For photos, MediaPipe FaceLandmarker (WASM) runs each frame and we draw props onto an HTML5 Canvas with scale/rotation and lightweight canvas/CSS filters, coordinated by a small state machine that handles modes, the 5s pre-roll, and the 3-shot burst using timers and requestAnimationFrame (with refs to avoid stale state). After each burst, we composite the three frames into predefined slots, overlay a pixel border PNG, and post the strip to a simple bulletin board (persisted in app state/localStorage) for download or deletion. All pixel-art frames, props, UI elements, and micro-animations were hand-drawn in our drawing software and exported as transparent PNGs/sprite sequences.

Challenges we ran into

We started with a big vision—retro aesthetic, AI face tracking with props, auto-music/video edits via GenAI, a shared bulletin board with invites, multi-API mashups, and AI captions—but hit several blockers that forced us to pivot to a tight MVP. First, a GitHub access bug (despite collaborator status) burned ~2 hours and 5 mentors, knocking our schedule off track. Then Gemini’s API couldn’t reliably analyze our videos to generate music (a platform limitation outside our control). We tried the Spotify API next, but OAuth redirect rules don’t play well with localhost; even after moving to a hosted domain and then GitHub Pages, we still couldn’t pair analysis with track selection—hard-coding songs wasn’t compelling, so we dropped the music feature. Finally, collaborating on a single page led to merge-conflict headaches; coordinating branching and splitting features by component became essential to keep momentum while shipping a polished core (Photo/Video modes, face-tracked props, filters, 3-shot burst, and the bulletin board).

Accomplishments that we're proud of

We’re proud of how Retro Photobooth combines nostalgia with modern web tech. Our app features real-time face-tracked props that follow the user’s movements, along with live filters and themed frames for a retro look. Users can capture a 3-shot burst with a 5-second timer in between, cancel mid-sequence, and have their shots automatically composed into a pixel-art photostrip. All photostrips are added to a bulletin board where they can be downloaded or deleted. Achieving smooth, interactive functionality using React, MediaPipe, the Canvas API, and modern web APIs in a tight hackathon timeline was challenging, but it resulted in a polished, playful, and nostalgic experience we’re excited to share.

What we learned

Through building Retro Photobooth, we gained hands-on experience with React and TypeScript, including component-based architecture and state management. We also learned how to implement real-time face tracking using MediaPipe Tasks Vision, applying props and filters dynamically on an HTML5 Canvas. Additionally, we practiced managing and storing data in arrays to keep track of photos and organize them on the bulletin board. This project strengthened our understanding of modern web APIs and interactive UI development.

What's next for Retro Photobooth

For future improvements, we’d like to expand face tracking and props to the video mode, including support for multiple people in a frame. We also plan to add more filters, props, and virtual backgrounds, as well as a sharing feature on the bulletin board so friends can see each other’s photostrips. Additionally, we want to implement invite functionality so users can take photos together and have their pictures appear on the shared board. On the video page, we had originally planned to use Gemini to analyze recorded videos and recommend songs, but ran into technical limitations; integrating this feature remains a key goal for future iterations. Finally, we hope to leverage generative AI to automatically create new props and frames based on user input, reducing the need to manually draw all assets and enabling endless creative possibilities.