Photospark 📸

A modern photo booth application built with Next.js and Socket.IO that offers real-time photo capture, custom frames, Instagram-style filters, and direct printing to Canon SELPHY CP1500 printers.

Features • Tech Stack • Getting Started • Troubleshooting

---

📖 Introduction

Photospark is a feature-rich photo booth application designed to capture memories with style. Built specifically for the Vinschool Central Park Student Council's PROM event, it's engineered to handle large-scale gatherings with up to 600 attendees. The application integrates high-quality photo capture with a Canon camera with instant printing capabilities using the Canon SELPHY CP1500. With a custom frames, filters, and live video recording.

🎥 Demo

📷 Gallery

Some beautiful, heartfelt memories captured by the app — bringing the countless smiles to students and teachers before and on the event 🥰📸:

✨ Features

Photospark is packed with features to create the perfect photo booth experience:

• 🎨 Creative Themes: Apply beautiful single or double layouts to your photos.

• 📸 Real-time Photo Capture: High-quality webcam/camera support with real-time preview, allowing users to strike the perfect pose.

• 🖼️ Photo selection: User can chose their favorite photos after the capture is completed.

• 🎞️ Custom filters: Choose from over 30 Instagram-style filters to match the event's vibe.

• 🖨️ Direct Printing: Seamless integration with Canon SELPHY CP1500 printers for instant physical keepsakes. Supports Japan Hagaki postcard size.

• 🎥 Video Recording: Capture moments in motion with video recording capabilities, processed automatically with FFmpeg.

• 📱 Smart QR Codes on Prints: Each printed photo includes an embedded QR code that links to a personalized web page where users can:

  • Edit Images: Re-edit and adjust photos with different filters and frames
  • Download: Save full-resolution images or videos to their devices
  • Share: Generate and download QR codes or copy direct links for easy sharing with friends

• ☁️ Cloud Integration: Securely store images using Cloudflare R2 and manage data with Neon PostgreSQL.

🛠️ Tech Stack

Photospark is built using modern web technologies for performance and reliability:

• Frontend: Next.js 16 (App Router), React 19, Tailwind CSS, Framer Motion
• Print server backend: Socket.IO (Real-time communication), Node.js
• Database: Neon (Serverless Postgres) with Drizzle ORM
• Storage: Cloudflare R2
• Processing: FFmpeg (Video processing)
• Hardware: Canon SELPHY CP1500 Printer

🧩 Project Components

This project consists of multiple components working together:

• 🖥️ Client (port 8080): The main photo booth interface where users can take photos, apply filters, and send them to be printed.
• 🖥️ Print server (port 6969): Socket.IO server that handles printing requests and video processing.
• 🌐 Web: Additional web interface component.
• 🛠️ Extras: Administration tools and additional features.

Getting Started

Prerequisites

• Node.js 18+ (Node.js 20 recommended)
• npm or another package manager (yarn/pnpm/bun)
• Neon PostgreSQL database account
• FFmpeg (for video processing)
• Windows OS (required for printing functionality)
• Canon SELPHY CP1500 printer (Amazon Link)
• CP1500 ink & paper (Amazon Link)
• Webcam with 720p or higher resolution
• Modern browser (Chrome or Firefox recommended)

Installation

1. Clone the Repository

   git clone https://github.com/caocchinh/photobooth-cp1500.git
   cd photobooth-cp1500

2. Environment Setup Copy the example environment files:

   # Root directory
   cp copy.env .env
   
   # For each subdirectory
   cd client && cp copy.env .env && cd ..
   cd server && cp copy.env .env && cd ..
   cd extras && cp copy.env .env && cd ..

   Configure the environment variables in each .env file:

   # Main environment variables to set
   CLOUDFARE_ACCOUNT_ID=
   R2_ACCESS_KEY_ID=
   R2_SECRET_ACCESS_KEY=
   NEON_DATABASE_URL=
   NEXT_PUBLIC_QR_DOMAIN=https://photospark.online
   NEXT_PUBLIC_SOCKET_URL=http://localhost:6969
   NEXT_PUBLIC_ADMIN_PASSWORD=999999999
   NEXT_PUBLIC_R2_PUBLIC_BUCKET_DEVELOPMENT_URL=
   NEXT_PUBLIC_R2_PUBLIC_BUCKET_PRODUCTION_URL=
   R2_PUBLIC_BUCKET_DEVELOPMENT_NAME=
   R2_PUBLIC_BUCKET_PRODUCTION_NAME=

3. Install Dependencies

   # Install root dependencies
   npm install
   
   # Install dependencies for all components
   cd client && npm install && cd ..
   cd server && npm install && cd ..
   cd web && npm install && cd ..
   cd extras && npm install && cd ..

4. Start Development Servers

   # Start all services at once
   npm run dev

   This will concurrently start:

   • Client application at http://localhost:8080
   • Socket.IO server on port 6969
   • Web interface
   • Extras interface

📊 Database Management

# Generate database migrations
npm run db:generate

# Apply migrations
npm run db:migrate

# Launch Drizzle Studio for database management
npm run db:studio

🖨️ Printer Setup

Hardware Requirements

• Canon SELPHY CP1500 printer connected via USB-C
• KP-108IN paper cassette and ink loaded

Setup Steps

1. Connect the Canon SELPHY CP1500 to your Windows PC via USB-C cable.
2. Install the official Canon SELPHY CP1500 drivers from the Canon website.
3. Ensure the printer name contains "CP1500" for auto-detection.
4. Configure the printer for "Japan Hagaki postcard (148x100mm)" paper size.
5. Test the printer using Canon's utilities before using with the photo booth.

Important: The printer must be connected via USB-C cable (wireless printing not supported) and requires Windows OS.

🎥 Video Processing

The application uses FFmpeg for processing recorded videos:

• Speeds up videos by 2x
• Compresses for faster loading
• Converts WebM to MP4 format
• Applies H.264 encoding

Note: Make sure FFmpeg is installed and accessible in your system PATH.

🛠️ Development Workflows

Client Development Only

cd client
npm run dev

Server Development Only

cd server
npm run dev

Building for Production

npm run build

📁 Project Structure

• /client - Next.js frontend application
• /server - Socket.IO backend print server
• /web - Additional web interface
• /extras - Admin tools and utilities
• /client/src/components - Reusable React components
• /client/src/lib - Utility functions and shared logic
• /client/public - Static assets including frames and images

🔧 Troubleshooting

Common Issues

Webcam Not Working

• Ensure browser has camera permissions
• Refresh the page
• Check if webcam is being used by another application
• Verify webcam drivers are up to date

Printer Not Detected

• Verify printer name contains "CP1500"
• Check USB connection
• Restart Windows Print Spooler service:

  net stop spooler
  net start spooler

• Reinstall printer drivers

Socket.IO Connection Issues

• Check that both client and server are running
• Verify port 6969 is not blocked by firewall
• Check for any CORS issues in browser console

Hardware Requirements

• Windows PC or laptop with USB-C port
• Minimum 8GB RAM (16GB recommended)
• Intel i5/AMD Ryzen 5 or better processor
• Stable internet connection
• External webcam (1080p recommended for best quality)
• Canon SELPHY CP1500 printer and supplies

⚠️ Important Notes

• This application does not support mobile devices for capturing (yet).
• Enter full screen mode for the best experience.
• Designed to work with Canon SELPHY CP1500 printer only.
• Requires Windows OS for printing functionality.

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Made with ❤️ by Cao Cự Chính