💜 Dreamy PhotoBooth

A beautiful, interactive photo booth web application built with Next.js that lets you capture memories with customizable frames and stickers.

✨ Features

• Live Camera Feed: Access your webcam to take photos in real-time
• 4-Photo Sessions: Capture 4 photos with a countdown timer between each shot
• 9 Unique Frames: Choose from various themed frames including:
  • Lavender Doodle
  • Bear Polaroid
  • Film Vintage
  • New Year Kawaii
  • Sky Cloud
  • Y2K Glitter
  • Blue Stars
  • Pink Hearts
  • Panda Cute
• Draggable Stickers: Add and position 10+ cute stickers on your photo strip
• Custom Captions: Add personalized text to your photo strips
• High-Quality Export: Download your creation as a PNG image

🚀 Getting Started

Prerequisites

• Node.js 20.x or higher
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

git clone <repository-url>
cd lavender-booth

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

🎨 Usage

1. Allow Camera Access: Grant permission when prompted to use your webcam
2. Select a Frame: Choose your favorite frame from the right panel
3. Start Session: Click the "Start 💜" button to begin
4. Pose: Get ready for 4 photos with a 3-second countdown between each
5. Customize: Add stickers by clicking them, drag to reposition
6. Add Caption: Type a custom message in the text field
7. Download: Click "Download ✨" to save your photo strip

🛠️ Tech Stack

• Framework: Next.js 16 with App Router
• UI Library: React 19
• Language: TypeScript
• Styling: Tailwind CSS 4
• Image Export: html-to-image
• Draggable Elements: react-rnd

📁 Project Structure

lavender-booth/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Main page component
│   └── globals.css         # Global styles
├── components/
│   ├── CameraView.tsx      # Webcam capture component
│   ├── FrameSelector.tsx   # Frame selection UI
│   ├── PhotoStrip.tsx      # Photo strip with stickers
│   ├── TimerOverlay.tsx    # Countdown timer
│   ├── StickerPanel.tsx    # Sticker selection
│   └── BackgroundSelector.tsx
├── lib/
│   └── generateStrip.ts    # Photo strip generation logic
├── public/
│   ├── frames/             # Frame images
│   ├── stickers/           # Sticker images
│   └── backgrounds/        # Background images
└── package.json

🎯 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

🌐 Browser Compatibility

This application requires:

• Modern browser with WebRTC support
• Camera/webcam access
• JavaScript enabled

Tested on:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🙏 Acknowledgments

• Frame and sticker assets from various sources
• Inspired by classic photo booth experiences
• Built with love and lavender vibes 💜

📞 Support

For issues or questions, please open an issue on the repository.

---

Made with 💜 by the Dreamy PhotoBooth team