PassportSnap
Offline-first privacy-focused web application for generating, adjusting, and printing passport and visa photos with all image processing performed locally in the browser.
Client-side
Image Processing
Local ONNX/WASM
Background Processing
300 DPI
Print Resolution
Executive Overview
PassportSnap is a client-side passport and visa photo workflow that automatically detects and centers faces, provides manual image adjustments, normalizes backgrounds locally with AI, and generates optimized print sheets without sending user images to a server.
Problem Statement & Objective
Traditional passport photo tools often require uploads, depend on server-side processing, have limited photo-size support, and make precise print-sheet preparation difficult while raising privacy concerns.
System Architecture & Data Flow
Next.js App Router application using TypeScript and Tailwind CSS, with Zustand for application state, IndexedDB persistence for workspace data, MediaPipe for local face detection, and an ONNX/WASM-based background-removal pipeline running entirely in the browser.
Database Design & Schemas
Client-side IndexedDB storage using idb-keyval with custom Zustand persistence middleware for workspace/session data, without requiring a server-side application database.
Key Engineering Features
- Automatic Face Detection, Centering & Passport Ratio Cropping
- Brightness, Contrast, Zoom, Pan, Rotation & Image Sharpening
- Local AI Background Removal with White, Light Blue, Original & Custom Backgrounds
- Multi-Country Passport Photo Size Presets with Custom Millimeter Dimensions
- Automatic A4, A5, 3R, 4R & 5R Print Sheet Tiling
- Manual Grid Slot Control, Copy Management & Print-Safe Gutters
- High-Quality PDF, JPG and PNG Export with Direct Browser Printing
- Offline PWA Support with Local Models and Workspace Reset
Primary Engineering Challenge
Processing large images, AI background removal, canvas operations, and repeated print-layout generation in the browser while preventing excessive memory consumption and maintaining responsive editing performance.
Implemented Technical Solution
Implemented strict object URL lifecycle management, temporary canvas cleanup, ImageBitmap disposal, local caching of transparent cutouts, IndexedDB persistence, and reusable registry-driven print calculations to minimize repeated processing and memory usage.
Security Controls
Designed as a privacy-first client-side application where user photos remain in the browser. No server upload is required for the core processing workflow, reducing exposure of biometric image data.
Scalability Strategy
Client-side processing removes server image-processing costs and allows the application to scale primarily through static application delivery rather than backend compute resources.
Key Technical Takeaways
Building image-intensive browser applications requires disciplined memory management, deterministic physical-dimension calculations, local model caching, and separation of reusable image-processing and print-engine logic from UI components.
Future Roadmap & Improvements
Add multi-subject batching, offline biometric quality checks such as eye-open and symmetry detection, and advanced print cutline styles including bleed lines, scissor paths, and crop marks.