Building a Client-Side Batch Image Processor with React Flow and Vercel Edge Functions

The Problem

As an illustrator, I handle hundreds of images for clients every month. Resizing, compressing, converting formats — the usual workflow.

But every tool I tried either:

• Required uploading to cloud (privacy risk for client work)
• Charged monthly subscriptions (Adobe, Canva)
• Was too complex for simple batch tasks

The Solution

I built Image Pipeline — a browser-based batch image processor with a visual node editor.

Key features:

• Drag-and-drop node editor (Resize, Crop, Compress, Format, Watermark, Denoise, Rename, Export)
• Batch processing — run the same pipeline on hundreds of images
• 100% client-side — images never leave your browser
• ZIP export via Web Worker
• Undo/redo for pipeline edits
• No signup required

Tech Stack

• Frontend: React 19, Vite 8, React Flow 12, Zustand 5, Tailwind CSS 4
• Backend: Vercel Edge Functions, Upstash Redis
• Payments: USDT (TRC-20) — no Stripe, no subscriptions
• i18n: English + Russian

Architecture

The pipeline engine runs entirely in the browser:

• Images are loaded via FileReader API
• Processing uses Canvas API and WebAssembly
• ZIP generation happens in a Web Worker (CSP-safe)
• No server-side image processing whatsoever

Rate limiting and payment verification are handled by Vercel Edge Functions with Upstash Redis.

Monetization

Freemium model:

• Free: 10 files per batch, 4 nodes per pipeline, 10 batches per day
• Pro ($10): unlimited files, unlimited nodes, all formats
• Lifetime ($30): everything in Pro + future features

Crypto-only (USDT TRC-20) — no recurring billing, no chargebacks, global access.

Try it

Live: https://imagepipeline.art

Feedback and contributions welcome!