OwnTheJoke.com
E-commerce platform printing custom humor on apparels, wall hangings, and accessories. Features AI-generated product mockups via Google Gemini, interactive 3D visualization with Three.js, Paystack payments, flash sales, an affiliate system, and a content blog with Tiptap editor.
- Full-Stack
- E-Commerce
- 3D
- AI
Tech Stack
React 19 
Vite T Three.js R React Three Fiber G Google Gemini O OpenRouter 
Express 
PostgreSQL 
Prisma 
Paystack 
Zustand T Tiptap 
Tailwind CSS Build Highlights
- 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-2.5-flash-image, gemini-3.1-flash-image-preview, gemini-3-pro-image-preview) with configurable model profiles and OpenRouter fallback
Overview
Project overview
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.
Problem
What it solves
Standard e-commerce platforms cannot deliver the interactive product visualization that physical humor products demand. Customers need to see how a joke will look on a shirt or wall hanging before committing. Static images fail to capture the experience. The platform needed 3D product mockups alongside a robust e-commerce backend.
Build
Implementation details
What I worked on
- Lead Engineer
- 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
Technical implementation
- 01
React 19 frontend with Vite and Zustand for state management
- 02
Three.js with React Three Fiber for interactive 3D product mockups
- 03
AI mockup generation pipeline using Google Gemini image generation models (gemini-2.5-flash-image, gemini-3.1-flash-image-preview, gemini-3-pro-image-preview) with configurable model profiles and OpenRouter fallback
- 04
Express backend with PostgreSQL and Prisma ORM
- 05
Paystack payment integration for African market card and mobile money support
- 06
Flash sale engine with scheduled pricing, countdown timers, and inventory locks
- 07
Affiliate tracking system with unique referral codes and commission calculation
- 08
Tiptap rich text editor for blog content creation and management
- 09
ULID-based identifiers for URL-safe, chronologically sortable entity references
Links
Project links
Live Store Preview
https://ownthejoke.kristianhans.com
More Projects
Continue browsing
Previous Project
MWC Advocates
Professional website for MWC Advocates law firm with custom inbuilt mailers using Resend, Google Sheets integration for lead management, and multiple email service adapters. Clean, professional digital presence for a legal practice.
Next Project
Department of Logistics
Multi-page web experience built as a dual-encoded institution. On the surface, an elite logistics authority with clearance protocols, operations doctrine, and a recovery division. Underneath, a layered inside joke written entirely in deadpan analogy for a private audience.