Back to portfolio
E-commerceMVPFull Case Study

DesignT

AI T-Shirt Design Studio

DesignT: Design Studio
Design Studio
DesignT: Product Landing
Product Landing

DesignT is a conversational AI t-shirt design studio powered by Google Gemini Pro Vision. Users describe their idea in natural language, optionally upload reference images, and get instant t-shirt mockups rendered in real time. Designs flow into a complete 4-step e-commerce checkout with Razorpay payment.

Gemini

AI Engine

5

T-Shirt Colors

XS–3XL

Size Range

4

Checkout Steps

01

Conversational Design Engine

Users describe their design in plain English and Gemini Pro Vision generates it instantly. Up to 3 reference images can be uploaded per conversation for style transfer and visual grounding. Full design history persists across sessions via Zustand + localStorage, and designs can be refined iteratively through natural dialogue, no design tools required.

02

Product Customization & Preview

Five curated t-shirt colors with live preview that updates instantly across all variants. Complete size range from XS to 3XL with detailed fit guides. Precision positioning controls let users adjust design placement and scale on the mockup before committing. Changes render live without page reloads.

03

E-Commerce Checkout

Streamlined 4-step flow: Design → Customize → Details → Payment. Razorpay handles secure payment processing with multiple payment methods. Prepaid orders receive an automatic discount; COD is available for convenience. Orders are tracked in Supabase with status updates. Cloudinary stores and optimizes all design assets.

Operational Value

Shortens design-to-product cycle. Enables personalized e-commerce without manual designer dependency. Improves conversion through realistic previews.

Tech Stack

FrontendNext.js 15 App Router, Tailwind CSS, TypeScript
StateZustand with localStorage persistence
AIGoogle Gemini Pro Vision: natural language + image input
DatabaseSupabase (PostgreSQL): orders, users, design history
MediaCloudinary: design image storage with optimization
PaymentsRazorpay: prepaid (discounted) or Cash on Delivery
HostingVercel with edge functions
ToolingESLint + Prettier, conventional commits, CI/CD via Vercel

Full Stack

Next.js 15App RouterTailwind CSSZustandTypeScriptGemini VisionSupabaseCloudinaryRazorpayVercel

Related Service