Site Icon Matthew Raynor
← Back to Portfolio

Production-Grade Photo Capture & Validation

Full-stack platform with real-time camera preview, face/light/blur analysis, and dynamic backgrounds.

Project Overview

I engineered a production-grade photo capture and validation system. It provides live camera preview with positioning guides, in-browser analysis for face presence/alignment, lighting, and blur, plus dynamic backgrounds (solid colors, professional blur, or custom images). This video walks through the architecture and a live demo.

The Challenge

Organizations need consistent, high-quality photos captured quickly with instant feedback—without manual review bottlenecks or server-side latency.

The Solution

Built a browser-first pipeline: real-time camera preview, on-device ML checks for face, lighting, and blur, and a background processor for solid/blur/custom images. Backend manages jobs, submissions, exports, and notifications with Celery/Redis.

Technology Stack

Backend
Django 5.1.6 Django REST Framework PostgreSQL Celery Redis (Upstash)
Frontend
React 18 TypeScript Tailwind CSS
Ai_Ml
TensorFlow.js BlazeFace BodyPix
Cloud
AWS S3 (storage) AWS SES (email)
Deployment
Docker Fly.io (API) Netlify (Frontend)

Key Features

Live camera preview with positioning guides

On-device face detection, lighting analysis, and blur detection

Dynamic backgrounds: solid colors, professional blur, custom images

Configurable rules per job/use case

Async exports/cleanups via Celery + Redis

Cloud storage (S3) and email notifications (SES)

Business Impact

Instant, in-browser quality feedback (no round-trips)

Consistent outputs across different devices/environments

Scalable processing via Celery workers and Redis

Cost-controlled storage and automated cleanups

Technical Achievements

Smooth React + TypeScript camera UX with validation overlays

TensorFlow.js pipeline that feels instant

Robust DRF API + Celery orchestration for scale

Future Enhancements

Add role-based approvals & audit trails

Offline capture mode with background sync

Batch review dashboard and advanced search

Technical Implementation

  • Frontend uses React hooks to manage camera streams and a canvas pipeline for effects.
  • TensorFlow.js (BlazeFace/BodyPix) powers in-browser face/lighting/blur checks for low latency.
  • DRF provides endpoints for jobs, submissions, and settings; Postgres stores artifacts/metadata.
  • Celery + Redis handle exports, cleanups, and notifications without blocking the UI.
  • Deployed with Docker; API on Fly.io, frontend on Netlify; assets in S3, email via SES.

Interested in This Project?

View the source code or see it in action