Notorious Brand
Jersey Configurator
Design picker with 3D-rendered jersey and 18+ design options
Real-time 3D viewer with design applied to custom Blender model
5-zone color editor with 12 preset colors and gradient support
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 18 + Vite + TypeScript |
| 3D Engine | React Three Fiber + Three.js + Drei |
| State | Zustand (configurator + auth stores) |
| Animation | GSAP (transitions, stagger effects) |
| Forms | React Hook Form + Zod validation |
| Payments | Stripe (PaymentElement + webhooks) |
| Backend | Node.js + Express + TypeScript |
| Database | PostgreSQL via Prisma ORM |
| Auth | JWT + bcrypt + TOTP 2FA |
| Resend (transactional) | |
| Storage | Cloudinary CDN |
| 3D Model | Custom GLB built in Blender |
The Problem
Notorious Brand needed a full-stack platform where customers could design custom sports jerseys in 3D, build team rosters, and place orders with payment processing. Their existing process was entirely manual - customers emailed design requests, the team mocked them up by hand, and orders were tracked in spreadsheets. This bottleneck caused miscommunication, delayed turnaround, and limited their ability to scale.
The Approach
I mapped the entire customization flow from the customer's perspective, breaking it into a 5-step wizard: design selection, zone coloring, graphics placement, roster building, and checkout. I modeled the jersey in Blender as a 62MB GLB with 5 base meshes, overlay placeholders, and a design layer system to prevent z-fighting between textures. On the backend, I designed a full order lifecycle (pending, payment verified, in production, shipped, delivered) with Stripe webhook integration, email notifications, and a production spec sheet generator for the print team.
The Solution
The result is a full-stack 3D jersey customization platform. Customers step through a guided wizard to pick from 18+ designs, color 5 jersey zones (including multi-stop gradients), place stickers and custom text with 40+ fonts using UV-based positioning, upload team rosters via Excel, and pay with Stripe. The 3D viewer renders everything in real time using canvas-based textures with a render order system (base, design, overlays). The backend handles JWT auth with TOTP 2FA for admins, order management, 4-angle screenshot capture to Cloudinary, and transactional emails via Resend. An admin dashboard manages orders, users, email templates, and generates plain-text production spec sheets for the print team.
The Results
The platform transformed Notorious Brand from a manual operation to a self-service e-commerce business. Customers design and order jerseys independently with full 3D visualization. The admin dashboard gives the team complete control over orders, production workflows, and customer communications. Designs can be saved to accounts, shared via URL, and reloaded later.
Key Features
Custom 3D jersey model built in Blender with 5 base meshes and layered texture system
5-step wizard: Design, Colors, Graphics, Roster, Checkout
Real-time 3D rendering with React Three Fiber and canvas-based textures
5-zone color editor with solid and multi-stop gradient support
40+ font options for text/number placement with UV-based positioning
Excel roster upload with XLSX parsing and downloadable template
Stripe PaymentElement with webhook-driven order status flow
4-angle jersey screenshot capture (front, back, left, right) to Cloudinary
Shareable designs via base64 URL encoding with read-only viewer
Admin dashboard: orders, users, email templates, production spec sheets
JWT auth with TOTP 2FA for admin accounts, rate limiting on all routes
Transactional email system with DB-stored templates and variable interpolation
Key Outcomes
6 months
Build Duration
Custom Blender GLB
3D Model
5-step guided flow
Wizard Steps
Stripe integrated
Payment
Full order management
Admin Panel
JWT + 2FA + rate limiting
Security