OwnTheJoke.com
An online shop for original jokes printed on clothing, accessories, and wall art, with interactive product views and a complete checkout experience.
React 19 · Vite · Three.js · React Three Fiber · Google Gemini · OpenRouter · Express · PostgreSQL · Prisma · Paystack · Zustand · Tiptap · Tailwind CSS
Live Store
01 Product overview
What the product does
OwnTheJoke is a humor-driven e-commerce platform where customers can browse and purchase printed items including apparel, wall hangings, and various accessories. The platform features two distinct product visualization systems: interactive 3D mockups powered by Three.js and React Three Fiber for real-time rotation and inspection, and an AI-powered mockup generator that uses Google Gemini image generation models to synthesize product visuals from text prompts. The backend runs three configurable Gemini model profiles (Nano Banana, Nano Banana 2, Nano Banana Pro) with optional OpenRouter fallback. Beyond visualization, the platform includes a full e-commerce stack with inventory management, a flash sale system, an affiliate program, and a Tiptap-powered blog.
02 Problem and context
What it needed to solve
Customers needed a clear way to see how each original joke would look on clothing, accessories, and wall art before buying. The shop combined interactive product views with the catalogue, promotions, affiliate tracking, and checkout.
03 My contribution
What I worked on
- Built the complete e-commerce stack from storefront to payment processing
- Implemented 3D product visualization with Three.js and React Three Fiber
- Built the AI mockup generation system with Google Gemini integration and configurable model profiles
- Built the flash sale engine with time-based pricing and inventory management
- Developed the affiliate tracking system for referral-based growth
- Created the blog system with Tiptap rich text editor for content marketing
05 Engineering and outcomes
Implementation details
System
- React 19 frontend with Vite and Zustand for state management
- Three.js with React Three Fiber for interactive 3D product mockups
- AI mockup generation pipeline using Google Gemini image generation models (gemini-3.1-flash-image-preview, gemini-3.5-flash-image-preview, gemini-3-pro-image-preview) with configurable model profiles and OpenRouter fallback
- Express backend with PostgreSQL and Prisma ORM
- Paystack payment integration for African market card and mobile money support
- Flash sale engine with scheduled pricing, countdown timers, and inventory locks
- Affiliate tracking system with unique referral codes and commission calculation
- Tiptap rich text editor for blog content creation and management
- ULID-based identifiers for URL-safe, chronologically sortable entity references
Verified results
- AI Mockup GenerationGoogle Gemini image generation pipeline with three configurable model profiles, aspect ratio and image size controls, and optional OpenRouter fallback for cost management.
- 3D Product MockupsInteractive Three.js visualization allowing customers to rotate, zoom, and inspect printed products in real time.
- Flash SalesTime-based promotional engine with automatic pricing adjustments, countdown timers, and inventory lock management.
- Affiliate ProgramReferral tracking system with unique codes, commission calculation, and payout management.
Lessons
- AI image generation for product mockups requires a configurable model tier system. Faster, cheaper models work for iteration; higher-quality models are reserved for final assets. Hard-coding a single model creates cost and flexibility problems.
- Interactive product views need careful mobile optimization because the same 3D scene competes with product media, pricing, and checkout for bandwidth.
- Flash sale systems need atomic inventory operations. Race conditions during high-traffic sales windows can oversell products.
- Humor products have unpredictable demand curves. The inventory system needs to handle sudden viral spikes.