// Project case study
Z Tees E-Commerce
An editorial storefront for an Indian streetwear brand, built around fast product discovery, real product detail, and a direct WhatsApp order journey.
- Role
- Lead software engineer · Velocity Web
- Duration
- 2026
- Stack
- React 18TypeScriptViteReact RouterFramer MotionTailwind
The Problem
A streetwear brand needed fast product discovery and a checkout that matches how its customers already buy.
The Approach
Editorial collection pages, rich filters and galleries, with WhatsApp order confirmation and UPI payment.
The Outcome
A live storefront at ztees.store handling drops, catalogue browsing and direct orders.
Who it's for
Shoppers looking for graphic and heavyweight oversized tees, especially visitors who prefer a quick, conversational order confirmation over a long checkout funnel.
The challenge
The store needs to feel like a considered brand while making decisions easy: find a collection, compare products, understand fit and price, select a size, and complete the order with confidence.
What I built
The live storefront combines an editorial Mirzapur event drop with product galleries, collection/category navigation, filters by size, colour, and price, product detail pages, WhatsApp confirmation, UPI payment messaging, and delivery/trust signals.
Why it matters
Small commerce brands do not always need a heavyweight checkout stack to create a credible buying experience. The product demonstrates how art direction, information hierarchy, and a low-friction order path can work together.
How it works
- 01Start with a collection or category and narrow the catalogue by size, colour, price, or product type.
- 02Open a product to inspect the artwork, fit, price, availability, and supporting details.
- 03Choose the size and send the order through the WhatsApp-first confirmation flow.
- 04Complete payment through the supported UPI path and receive dispatch/delivery guidance.
System Architecture
- 01
Shoppers
Mobile-first
- 02
Storefront
React · React Router
- 03
Catalogue
Typed product data
- 04
Ordering
WhatsApp · UPI
- React, TypeScript, Vite, React Router, Tailwind CSS, and Framer Motion.
- Slug-based product routing and multi-image galleries for product confidence.
- Cart state and WhatsApp-first ordering rather than an invented payment-gateway claim.
- Editorial light visual system adapted to a 240 GSM heavyweight collection and mobile discovery.
Screenshots
// Learnings
What this project taught me
- 01Meet customers in the channel they already trust.
- 02Filters are the product for a fashion catalogue.
- 03Drop pages need to load fast on mobile data.
// Related work
Next project
TraceSphere