Premium photo editor PWA with AI background removal, real-time camera filters, Dudu & Bubu stickers, text overlays, and stunning effects — all running entirely in your browser.
| Feature | Description |
|---|---|
| 📷 Live Camera | Full-screen camera viewfinder with front/rear camera switching |
| 🎨 14 Real-time Filters | Normal, B&W, Sepia, Vintage, Warm, Cool, Dramatic, Bright, Fade, Noir, Vivid, Soft, Retro, Cinema |
| 🖼️ Decorative Borders | SVG-based border overlays rendered on the live viewfinder |
| 🐻 264 Dudu & Bubu Stickers | Animated GIF stickers organized into 4 categories: Bear (Dudu), Panda (Bubu), Couple, and Dudu & Bubu originals |
| ✂️ AI Background Removal | Client-side background removal powered by @imgly/background-removal — no server uploads needed |
| 🔤 Text Overlays | Drag-to-position text with customizable fonts, colors, and sizes |
| 🌈 Photo Effects | Post-capture effects for additional photo editing |
| 📤 Export & Download | Save your edited photos in multiple formats |
| 📱 PWA (Installable) | Install as a native app on Android & iOS via Serwist service worker |
| 🌙 Dark Mode Design | Premium glassmorphism UI with animated gradient backgrounds |
- Framework: Next.js 16 (App Router, Webpack)
- UI: React 19 + TypeScript 5
- Styling: Tailwind CSS 4 + Custom CSS Design System
- Icons: Lucide React
- AI: @imgly/background-removal — runs in-browser via WebAssembly
- PWA: Serwist (Service Worker for offline support)
- Font: Inter via
next/font - Stickers: Dudu & Bubu Collection
photobooth/
├── app/
│ ├── camera/
│ │ └── page.tsx # Full-screen camera with filters, borders & stickers
│ ├── editor/
│ │ ├── page.tsx # Photo editor (background removal, text, effects)
│ │ └── components/
│ │ ├── BackgroundPanel.tsx
│ │ ├── CanvasPreview.tsx
│ │ ├── EffectsPanel.tsx
│ │ ├── ExportDialog.tsx
│ │ ├── TextPanel.tsx
│ │ └── ToolBar.tsx
│ ├── hooks/
│ │ ├── use-camera.ts # Camera access & capture hook
│ │ └── use-photo-editor.ts # Editor state management hook
│ ├── lib/
│ │ ├── border-overlays.ts # SVG border definitions
│ │ ├── canvas-utils.ts # Canvas export utilities
│ │ ├── sticker-defs.ts # 264 Dudu & Bubu sticker definitions
│ │ └── types.ts # Shared TypeScript types
│ ├── globals.css # Design system (glassmorphism, animations, buttons)
│ ├── layout.tsx # Root layout with Inter font & PWA metadata
│ ├── manifest.ts # PWA Web App Manifest
│ ├── page.tsx # Landing page with hero & feature cards
│ └── sw.ts # Service worker source
├── public/
│ └── stickers/ # 264 animated GIF stickers
│ ├── bear-*.gif # Bear (Dudu) stickers
│ ├── panda-*.gif # Panda (Bubu) stickers
│ ├── bubu-*.gif # Bubu originals
│ ├── dudu-*.gif # Dudu originals
│ └── couple/ # Couple stickers
├── docs/
│ └── screenshots/ # App screenshots for README
├── package.json
├── next.config.ts # Next.js + Serwist config
└── tsconfig.json
- Node.js >= 18
- npm >= 9
# Clone the repository
git clone https://github.com/amirisback/photobooth.git
cd photobooth
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm start- Take a Photo — Tap "Take a Photo" to open the full-screen camera
- Apply Filters — Swipe through 14 real-time camera filters
- Add Borders — Switch to the Borders tab for decorative frame overlays
- Place Stickers — Browse 264 Dudu & Bubu GIF stickers, tap to place, drag to reposition
- Capture — Press the shutter button to capture with all overlays applied
- Edit — Use the editor for background removal, text overlays, and effects
- Export — Download your finished photo
The app features a premium dark mode design with:
- Glassmorphism cards with
backdrop-filter: blur(20px) - Gradient accents — Purple (
#a855f7) → Pink (#ec4899) → Orange (#f97316) - Smooth animations — fadeIn, slideUp, pulseGlow, float, shimmer
- Safe area support — Proper padding for notched devices (iPhone, etc.)
- Touch-optimized — 48px minimum touch targets,
-webkit-tap-highlight-color: transparent
264 animated GIF stickers from the Dudu & Bubu collection:
| Category | Count | Description |
|---|---|---|
| 🐻 Bear (Dudu) | 120+ | Solo bear character stickers |
| 🐼 Panda (Bubu) | 33+ | Solo panda character stickers |
| 💕 Couple | 100+ | Bear & Panda together stickers |
| 🎭 Dudu & Bubu | 5 | Original character stickers |
Copyright 2026 Muhammad Faisal Amir
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Contributions are welcome! Please read the Code of Conduct and Security Policy before contributing.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Made with ❤️ by Muhammad Faisal Amir