Snapify

Snapify is a full-stack photobooth web application that captures webcam images, processes them via external APIs to apply stylized effects (such as sepia filters), and composes the results into a photostrip. The app features a countdown-based capture sequence, secure image uploads, and a dynamic UI built with modern web technologies.

Features

• Webcam Capture:
  Capture images from your webcam with a built-in camera component.
• Countdown Timer:
  Automatic photo capture every 5 seconds with a visible countdown.
• Image Processing:
  Uses external APIs to convert images into stylized formats (e.g., sepia, cartoon).
• Photostrip Generation:
  Combine three images into a single photostrip using HTML Canvas, with custom branding ("Snapify") added at the bottom.
• Download Options:
  Download individual original and processed images, or a combined photostrip.
• Secure API Integration:
  Uses server-side API routes and environment variables to securely handle API keys.

Screenshots

Here are some screenshots showcasing the app:

• Photostrip:
  
• Photostrip (Sepia):
  
• User Interface:
  

Technologies Used

1. Frontend:

   • Next.js: Framework for building server-rendered React applications.
   • React: Library for building user interfaces.
   • Tailwind CSS: Utility-first CSS framework for rapid UI development.

2. Backend / Cloud Services:

   • Cloudinary: Service used for secure image uploads and hosting.

3. External APIs:

   • Pixelixe API: Used for applying sepia or cartoon effects to images.

4. Utilities:

   • HTML Canvas: Used to generate combined photostrips from processed images.

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/snapify.git
   cd snapify
   

2. Install Dependencies:

   npm install
   

3. Configure Environment Variables:

   PIXELIXE_API_KEY=your_pixelixe_api_key_here
    CLOUDINARY_URL=your_cloudinary_upload_url_here
   

4. Run the Development Server:

   npm run dev
   

Usage

1. Capture Session:

   • Click "Start Capture" to begin a photo capture session. The app will automatically capture a photo every 5 seconds.
   • After three photos are captured, the session stops automatically.
   • The original captured images are displayed in one column, while the processed (sepia/cartoon) images are shown in another column.

2. Download Options:

   • Use the "Get photos" button to download individual original images under the respective photostrip.
   • Use the "Get photostrip" button to download a combined photostrip image that displays all three processed images with the word "Snapify" in bold at the bottom.

API Integration

1. Image Upload:

   • The app uploads captured photos (as Data URIs) to a backend endpoint (e.g., /api/upload), which returns a public URL for each image.

2. Processing:

   • The public URL is URL-encoded and passed to the Pixelixe API (or another image processing API) along with parameters (e.g., width, height, prompt, etc.) to apply a stylized filter.

3. Output:

   • The processed image is returned as binary data, converted into an object URL, and then displayed in the UI.