Overview
The Uniform 3D Builder is the core feature of the ASB Sports Uniform Builder, enabling customers to create fully customized sports uniforms through an intuitive step-by-step process.
Features
6-Step Customization Workflow
The builder guides users through :
- Designs - Choose from a library of base templates and uniform styles
- Colors - Select team colors and configure color placement zones
- Text - Add team name, player names, and custom text elements
- Graphics - Upload and position team logos and custom graphics
- Roster - Configure individual player names and jersey numbers
- Review - Final preview with add-to-cart functionality
Builder Architecture
- Context-Based State Management - Centralized state for all builder steps with React Context
- Step Navigation - Progress tracking with ability to jump between completed steps
- Responsive Layout - Three-panel design with sidebar, canvas, and configuration areas
- URL-Based Routing - Deep links to specific products via
/builder/[sport]/[productSlug]
Designs Management (Admin)
Staff users can manage the design library through the admin dashboard:
- Create, edit, and delete design templates
- Associate designs with specific sports and product categories
- Set design status (active/inactive)
- Upload design preview images
Database Schema
- New
designstable with full CRUD operations - Row Level Security (RLS) policies for staff management
- Anonymous read access for public product catalogue
- Integration with existing products and colors tables
Technical Details
- Dynamic route segments for sport and product combinations
- Builder context providers for step state and product data
- Modular step components for easy extension
- Loading states and error boundaries throughout
