Jayme VolstadAI Product & Systems Designer
Back to Work Catalog
Workflow Product / Frontend Utility
WORKFLOW UTILITYWORKING PROTOTYPE

GenSort Media Utility

Local-First In-Browser Media Organization & Duplicate Detection Engine

A local-first, browser-based media organization workflow for clustering duplicates, reviewing large asset collections, and structuring exports without requiring server-side processing.

Execution ModelClient-Side Only
Data BoundaryLocal-First Memory
PackagingIn-Browser JSZip
RenderingSplit-Slide WebGL
Stack:React 19TypeScriptJSZipHTML5 CanvasTailwind CSSVite
Live Interface
01 // The Problem

What was difficult, fragmented, or broken?

Content creators, field operators, and individuals frequently accumulate thousands of disorganized photos, project screenshots, and visual assets. Cloud-based sorting tools require uploading gigabytes of private photos over sluggish networks, creating privacy risks and painful latency.

02 // Constraint & Root Cause Analysis

Why the obvious solution wasn't enough

Standard desktop photo viewers lack rapid batch-organization workflows (e.g. quick similarity pairing, instant multi-folder triage), while cloud SaaS photo managers impose subscription walls, ingest personal data, and take minutes to upload large batches.

03 // Ownership & Scope

My Role

Product Designer & Frontend Engineer
04 // Concrete Deliverables & Implementation

What I Built

  • A local-first, 100% client-side React media utility running entirely inside the user's web browser.
  • Drag-and-drop batch ingestion capable of handling hundreds of high-resolution images simultaneously.
  • Interactive before/after split-slider comparator with WebGL clipping masks for microscopic visual inspection.
  • Client-side ZIP compiler (JSZip) that organizes sorted image batches into structured folders and triggers instant downloads.
System Artifacts & Implementation Proof
Local-First Client Pipeline & In-Browser Triage
diagram
Local Media Files (Photos / Screenshots)
       │
       ▼ (HTML5 File API / Drag-and-Drop Ingestion)
Browser Memory Canvas (Zero Server Transit / Complete Privacy)
       │
       ▼ (Web Worker Perceptual Hash Calculation)
Visual Similarity Clustering & Split-Slider Comparison
       │
       ▼ (In-Memory Folder Restructuring)
Client-Side ZIP Bundling (JSZip) ──► Instant Direct Disk Download
Zero-cloud asset triage with client-side canvas perceptual hashing and instant in-memory zip packaging.
05 // Architecture & Methodology

How I Approached It

I architected GenSort around a strict local-first philosophy: your media never touches a server. By utilizing HTML5 File API and browser canvas memory, processing happens at the speed of local hardware with complete user privacy.

06 // Agentic Development & AI Safeguards

AI is an instrument, not an authority.

Used agentic coding environments to optimize canvas render loops, implement perceptual hash comparison algorithms, and stress-test memory cleanup during large batch uploads.

07 // Engineering Judgment & Tradeoffs

Key Decisions & Tradeoffs

Decision 01

Chose browser-native client execution over a cloud backend, trading away cloud sync in exchange for absolute privacy, instant responsiveness, and zero server hosting costs.

08 // Verified Outcome

The Result

Working utility deployed on Context & Muse, used for rapid asset sorting and before-and-after visual proofing across client projects.

Competencies Demonstrated //
0→1 ProductClient-Side EngineeringInteraction DesignPrivacy ArchitectureFrontend Performance
All Case StudiesNext: Context & Muse