A retro-inspired digital photobooth experience — capture, customize, and create.
Snap. Style. Export. Repeat.
FilmFare is a browser-based digital photobooth built for the nostalgic at heart. Powered by React, Vite, and Fabric.js, it lets users capture photos directly from their webcam, layer them with stickers and text, apply retro-themed layouts, and export finished creations in multiple formats — all without leaving the browser.
No installs. No accounts. Just vibes.
Generated with FilmFare — Retro Digicam layout
- Live webcam capture with a countdown timer before each shot
- Single-photo and multi-photo layout support
- Upload existing photos from your device
- Drag-and-drop sticker system
- Custom text overlays with full positioning control
- Multiple visual themes to set the mood
- Real-time editing canvas powered by Fabric.js
| Layout | Status |
|---|---|
| Classic Polaroid | ✅ Available |
| Retro Digicam | ✅ Available |
| 3-Photo Film Strip | ✅ Available |
| 5-Photo Film Strip | 🔜 Coming Soon |
| Format | Best For |
|---|---|
| PNG | High-quality archiving |
| JPEG | Easy sharing |
| WEBP | Compressed, web-optimized |
- Mobile-friendly interface with full touch support
- Sticker dragging and canvas editing work on touch devices
- Optimized for all modern browsers
| Layer | Technology |
|---|---|
| Frontend Framework | React + Vite |
| Canvas & Editing | Fabric.js |
| Styling | CSS3 + Custom Retro UI Components |
| Camera | WebRTC Camera API |
| Rendering | HTML5 Canvas |
| Language | JavaScript (ES6+) |
FilmFare/
├── public/
│ ├── stickers/ # Sticker asset library
│ └── retro_camera_frame.png # Decorative camera overlay
│
└── src/
├── assets/ # Static assets
├── components/
│ ├── CameraCapture.jsx # Webcam capture + countdown logic
│ ├── EditorStudio.jsx # Fabric.js editing workspace
│ ├── LayoutPicker.jsx # Template selection UI
│ ├── LoadingExport.jsx # Export progress handler
│ └── MarqueeHeader.jsx # Animated retro header
├── utils/
│ ├── audioManager.js # Sound effects manager
│ ├── layoutConfig.js # Layout definitions and config
│ └── stickerStore.js # Sticker registry and state
├── App.jsx
└── main.jsx
- Node.js v18+
- npm or yarn
# Clone the repository
git clone https://github.com/sammmiksha/Photobooth.git
cd Photobooth
# Install dependencies
npm install
# Start development server
npm run dev# Production build
npm run build
# Preview production build locally
npm run preview- Interactive Fabric.js workspace with real-time sticker and text editing
- Retro Digicam template with decorative overlays baked in
- Multi-format export pipeline (PNG, JPEG, WEBP)
- Layout-based photo workflows for consistent framing
- Draggable sticker system with touch support
- 5-Photo Film Strip template
- Photo filters and effects
- Animated stickers (GIF support)
- Custom frame marketplace
- QR code sharing
- Cloud save functionality
- Social media export presets
Samiksha Patil BSc Information Technology — Mumbai University
Full-Stack Developer • Backend-Focused • AI-Integrated Systems
This project is licensed under the MIT License.
Built with care, a lot of CSS, and an unhealthy love for retro aesthetics.