A simple web-based photo booth application built with React that captures images using a webcam, applies filters, and generates a downloadable photo strip!
The name Picapica comes from a mix of:
- "Picture" - representing photography and capturing moments.
- The Picapica is the sound that cameras make.
- Pikachu's playful energy - symbolizing the fun, fast, and energetic photos!
Just like Pikachu, Picapica brings a spark of excitement to your photos! ⚡✨
- Automatic Photo Capture: Capture a series of 4 photos with an integrated countdown timer.
- Filter Application: Choose from various filters, including B&W and sepia, to enhance your photos.
- Photo Strip Generation: Display captured photos in a vertical strip format and download them as a PNG file with a timestamp.
- Frontend: React (with Hooks, Context API)
- Backend: Node.js
- Media API: WebRTC API
- Rendering & Image Processing: HTML5 Canvas
- Styling: CSS Modules
- Deployment: Netlify
- Node.js & npm installed on your system
- A modern web browser
Steps to run locally
# Clone the repository
git clone https://github.com/Agneswei/Picapica
cd picapica/frontend
# Install dependencies
npm install
# Start the development server
npm start- Run the app (
npm start) and openhttp://localhost:3000 - Start the camera: Click the "Start" button to enable your webcam.
- Capture Photos: Press the "Capture 4 photos" button to start the countdown and photo capture sequence.
- Apply Filters: Select a filter to enhance the photos.
- Download Photo Strip: Once captured, click the "Download" button to save the final photo strip to your device.
Try it out live: PicaPica.
- Add more filters (beautify, cute effects, and stickers)
- Implement frame customization (stickers and themed frames)
- Add AI-powered enhancements (background removal/blur, facial beautification)
- Allow users to share strips directly to social media
- Capture a short video during the countdown and include it alongside the photo strip
MIT License © 2025 Agnes Wei
Enjoy snapping fun pictures! 📷✨