Case Study
MyIconicSelf
Turned a selfie-to-portrait idea into a live e-commerce platform generating sales on autopilot.
The Problem
A client wanted to let people upload a selfie and receive a high-quality personalized portrait -themselves as a Jedi Knight, a Sith Lord, or any iconic character. Simple concept, complex execution. We needed a seamless photo-to-portrait pipeline that felt instant and magical, a checkout flow that maximized conversion without asking users to pay blind, image protection strong enough to prevent theft but subtle enough not to ruin the preview experience, and an architecture that could support multiple themed universes from day one.
The Solution
I built a full-stack Next.js application centered around a multi-step wizard. Users pick a category, choose a character and background, upload their photo, and receive a personalized portrait within seconds.
The critical UX decision was adopting a free-preview model. Instead of a pay-first gate, the system generates a watermarked preview instantly. Users see their portrait before spending a dollar. This removed the biggest friction point -asking someone to pay for something they've never seen.
Server-side watermarking applies a multi-layer protection pipeline (hue shifting, strategic blurring, noise, text overlay) using Sharp. The watermark is robust enough to prevent screenshot theft but subtle enough that the portrait still sells itself. Clean originals never touch the frontend until payment clears.
The image generation pipeline sends user photos to Google's Gemini model with carefully engineered prompts -each refined through dozens of iterations to preserve facial identity while transforming everything else. Character-specific if/then blocks handle costume logic, face anchoring patterns prevent the model from altering features, and safety-filter-aware wording avoids content blocks.
Tech Decisions
Next.js 14 + TypeScript on a Hetzner VPS with PM2 -full server control, no cold starts during generation. Prisma + PostgreSQL with a universe/category/style/background schema designed for multi-theme expansion. Cloudflare R2 for image storage -S3-compatible with zero egress fees, essential when serving 4K portraits. Stripe Checkout with webhook-driven fulfillment, including canvas print upsells with shipping address collection. Resend for transactional emails -portrait delivery, abandoned preview recovery sequences. GA4 + Meta Pixel full-funnel tracking from category selection through purchase.
The Result
The platform launched with Star Wars portraits and has since expanded to a Pet Portraits universe -proving the multi-theme architecture works. New universes launch with just database seeds and preview images, no application code changes. The watermark-based free preview model eliminated the pay-before-you-see barrier entirely. An admin panel gives the client full control over styles, backgrounds, categories, pricing, and order management without developer involvement.