Online shopping has a fundamental problem. You can’t try clothes on. Size charts lie. “Model is 6’2” wearing size M” tells you nothing about how a shirt will fit your body. Returns are a hassle. Most people either gamble on purchases or stick to brands they already know.
The name Fiu-Fiu comes from the wolf whistle used in Spanish and Portuguese speaking countries to express admiration. Looking good is the idea behind this application.
The Solution
Fiu-Fiu creates a virtual model based on your photos. Not a cartoon avatar - an AI-generated image that reflects your actual appearance, body type, and proportions.
Upload a few photos. The AI builds your model. Then try on any clothing item you want. See exactly how that jacket, dress, or pair of jeans would look on you.
Architecture
The project follows a monorepo structure with three main components: a React frontend deployed on Cloudflare Pages, a Hono backend running on Cloudflare Workers, and a marketing website.
The separation keeps concerns clean. The frontend handles the user interface and image display. The backend manages AI generation, wardrobe data, and subscriptions.
Backend Architecture
The API runs on Hono with Cloudflare Workers. The domain model is organized around core modules: wardrobe item management, virtual model creation, try-on rendering, image processing, user accounts, and subscription billing. Each module follows a clean architecture pattern with controllers, DTOs, and services.
Drizzle ORM connects to D1 for data persistence. The schema tracks users, their virtual models, clothing items, and generated try-on images.
The generation flow retrieves the user’s active virtual model and the selected clothing item, sends them to the AI service for compositing, and stores the resulting try-on image for display.
AI Integration
The try-on generation uses external AI services accessed via aws4fetch for authenticated requests. The process:
- Model Creation: User uploads reference photos → AI generates a consistent virtual model
- Clothing Processing: Uploaded clothing images are processed to extract the garment
- Try-On Generation: The AI combines the model and garment, generating a realistic composite
Google GenAI provides additional capabilities like clothing categorization and style recommendations.
The AI pipeline is async. Users submit a try-on request and get notified when it’s ready. This keeps the API responsive while heavy inference runs in the background.
Frontend Stack
The React app uses modern patterns:
- TanStack Router for file-based routing
- TanStack Query for server state management
- Zustand for client state
- react-hook-form with Zod validation
Image handling uses @jsquash libraries for client-side resizing and format conversion. Photos are processed before upload to reduce bandwidth and storage costs.
Embla Carousel powers the outfit gallery, supporting touch gestures and smooth animations.
Image Processing
Before uploading, images go through client-side processing. Photos are resized to a maximum dimension and converted to WebP format for optimal compression. This reduces upload sizes by 60-80% while maintaining quality sufficient for AI processing.
Digital Wardrobe
Users build a persistent wardrobe over time:
- Upload photos of clothing items they own
- Save items from online stores
- Organize by category, color, or season
- Create outfit combinations
The wardrobe becomes more valuable as it grows. Try on new purchases against your existing clothes to see how they’ll fit your style.
Subscription Model
Stripe handles billing with usage-based pricing. Free users get limited try-on generations per month. Paid plans unlock:
- Unlimited try-ons
- Higher resolution output
- Multiple virtual models
- Priority generation queue
Webhook integration keeps subscription status synced with the backend, automatically updating user entitlements when subscriptions are created, updated, or cancelled.
PWA Support
The app is a Progressive Web App. Users can install it on their home screen and use it like a native app. The PWA approach allows rapid iteration. Web deploys are instant. If the concept validates, native mobile apps come next.
What I Learned
Building Fiu-Fiu taught me about the complexity of AI-powered products. The AI is just one piece - you also need image processing pipelines, storage optimization, async job handling, and a UI that makes the technology accessible.
The Cloudflare stack (Workers + D1 + R2) keeps infrastructure costs low while scaling automatically. For a consumer app with unpredictable traffic patterns, this is ideal.
Client-side image processing before upload is essential. Without it, mobile users on slow connections would have a frustrating experience.
Fiu-Fiu - AI Virtual Try-On & Digital Wardrobe
Transform your wardrobe experience with AI-powered virtual try-ons. Create your digital model and see how any outfit looks on you.
Fashion meets AI. I’m excited to see where this goes.
