Custom Cap Platform
Multi-Brand E-Commerce Platform Deployed Across 5 Websites
Building the future of
custom cap manufacturing
An end-to-end multi-workspace commerce platform powering custom-cap manufacturing — Buyer, Supplier, and CustomCapBD ops each get their own dashboard. SVG-first product customizer outputs production-ready vectors under 100KB. Artwork approval, shipment tracking, advanced accounting + invoicing, Excel + PDF order exports, an invite-only private B2B network, and WhatsApp AI agents that handle order status, generate invoices on demand, and collect supplier updates. Deployed across 5 brand websites with unified architecture.
This enterprise-grade platform handles the entire lifecycle of custom cap production—from initial design through 3D visualization, order management, supplier coordination, and delivery tracking. Built with performance and scalability at its core, it serves multiple user types with tailored experiences.
Multi-Brand Deployment
This unified platform architecture powers 5 distinct brand websites, each with customized branding and market positioning:
Three.js powered
4 user roles
Gemini + OpenAI
RLS + CSRF + Auth Guards
Project Details
Custom Cap BD
2023-2025
2+ years
Multi-Brand Platform
Project Scale
The metrics that demonstrate the complexity and scope of this enterprise-grade platform.
API Endpoints
Well-structured RESTful API routes covering admin, products, orders, tracking, quotes, Discord integration, and more.
The Big 12
Core features that power this enterprise platform, each designed with scalability and user experience in mind.
SVG Product Customizer
Production-ready vector designs under 100KB
SVG-first customizer with full panel customization — crown, visor, button, eyelets, sweatband. Layer system for decals, text, and artwork. Real-time preview with buyer-facing interactivity. Every output is a clean, production-ready vector file under 100KB — drops straight into the factory cutting/printing pipeline with no re-work.
Production Approval Workflow
Artwork + sketch sign-off before production
Buyers review and sign off on artwork, vector sketches, and mockups before the factory cuts a single unit. Approval state is tracked on the order timeline, comments are threaded against the artwork, and only approved versions move to production. Eliminates the "we made the wrong thing" recall loop.
WhatsApp AI Agent Concierge
Order status, invoices, supplier comms — over WhatsApp
A private RedClaw-based agent stack with full project file access serves customers and suppliers in WhatsApp groups. Buyers ask for order status, get live updates, request a fresh invoice or PDF — the agent runs the generation script and posts the file back. Suppliers send shipment updates through the same channel; the agent ingests, updates the order record, and notifies the buyer. Same architecture as the public RedClaw deployment, run as a private instance for factory ops.
Multi-Role Platform
4 distinct dashboards for different user types
Comprehensive role-based access control with tailored experiences for Admins, Suppliers, Wholesalers, and Members. Each role has unique features and permissions.
Bento Grid Homepage
Drag-and-drop homepage builder
Server-first architecture with zero JavaScript for static cards. Performance optimized with lazy-loaded animation islands, reducing initial JS evaluation from 7.7s to under 2s.
AI-Powered Processing
Gemini & OpenAI Vision integration
Intelligent logo processing, vector conversion, delivery estimation, and image validation. Automated artwork analysis and enhancement.
Canvas/Artwork Editor
Fabric.js-powered design tools
Full-featured canvas editor with layers panel, text controls, object arrangement, rulers, zoom controls, and product options panel.
Animation Builder
Visual SVG animation creator
Admin tool for creating complex anime.js animations. Visual layer tree editor, real-time preview, animation property controls, and frame-by-frame sequencing.
Order + Shipment Tracking
Visual order journey with Excel + PDF exports
Public order tracking without authentication. Full lifecycle — design approval → production → quality → shipment → delivery. Animated journey visualization with timestamps and next-step indication. Order status exportable to Excel and PDF for buyers, suppliers, and ops handoffs.
Invoice/Quote System
PDF generation with React PDF
Professional invoice and quote templates with line item editors, financial calculations, and automated email delivery via Resend.
Accounting Dashboard
Complete financial management
Journal entries, invoice tracking, payment recording, bill management, supplier payments, and financial metrics dashboard with ledger sheets.
Discord Integration
Real-time bot notifications
Discord.js bot with command system for orders, quotes, reports, and help. Company Discord linking, real-time notifications, and admin control panel.
Form Builder
Dynamic forms with conditional logic
Create complex forms with conditional logic engine, schema generation, submission handling, and validation chains.
Supplier Onboarding + External Catalog
Self-serve product enlistment for new suppliers
New suppliers enroll into the network and add their own products to the catalog through a dedicated onboarding flow. External SKUs flow into the unified inventory with their own pricing tiers, lead times, and quality tags. Admin gating ensures only approved suppliers go live.
Private B2B Network
Invite-only VIP wholesale tier
Gated commerce surface for wholesale + VIP partners. Pricing, MOQs, and catalogs are invisible to the public — only invited accounts see them. Separate auth flow, separate dashboard, separate quote rails. Built for high-trust B2B where pricing transparency would hurt the deal.
API Architecture
348+ well-structured endpoints
RESTful API design covering admin, products, orders, tracking, quotes, Discord, artwork, and more. Proper error handling and authentication.
Built with modern tools
A carefully selected stack combining performance, developer experience, and scalability for enterprise-grade applications.
Next.js 16
App Router with Server Components
React 19
Latest React with Compiler
TypeScript
Full type safety across codebase
Radix UI
Accessible component primitives
Tailwind CSS 4
Utility-first styling
ShadCN
Beautiful component patterns
Three.js
3D product customizer engine
React Three Fiber
Declarative 3D for React
Recharts
Data visualization & charts
Konva.js
2D canvas graphics library
Fabric.js
Interactive canvas editor
vtracer
Raster to vector conversion
Supabase
PostgreSQL with Row Level Security
Sanity CMS
Headless content management
TanStack Query 5
Powerful server state management
Zustand
Lightweight client state
Framer Motion
Production-ready animations
anime.js
Complex SVG animations
Google Gemini
AI-powered logo processing
OpenAI Vision
Image analysis & validation
Discord.js
Real-time bot notifications
Resend
Transactional emails
PWA
Offline-capable progressive app
React Hook Form
Performant form handling
Zod
TypeScript-first validation
4 Distinct Platforms
Each user role has a tailored dashboard with specific features, permissions, and workflows designed for their unique needs.
Full platform control with analytics and system configuration
Security & Performance
Built with security-first architecture and optimized for production workloads.
CSRF Protection
Token-based cross-site request forgery prevention
Rate Limiting
API throttling and abuse prevention
Auth Guards
Role-based access control middleware
Row Level Security
PostgreSQL RLS policies for data isolation
Deployed on Vercel with auto-scaling, edge caching, and global CDN distribution for optimal performance worldwide.
Project Timeline
The evolution of Custom Cap BD from concept to enterprise platform.
Architecture & Planning
Tech stack selection, database schema design, and multi-role architecture planning
Core Platform
Multi-role authentication, dashboard foundations, and product catalog
3D Customizer & Canvas
Three.js integration, real-time customization, and canvas editor with Konva.js
AI & Automation
AI-powered features, Discord integration, and automation tools
Enterprise Features
Accounting system, advanced analytics, and performance optimization
Platform Gallery
Explore the different screens and interfaces of the platform.
AI Quote System
3D Artwork Designing
Shipping Tracking System
Order Tracking System
Product Artwork Creation Suite
Ecommerce/Product Page
Ready to build something
extraordinary?
Whether you need a complex B2B platform, e-commerce solution, or custom application — let's discuss how we can bring your vision to life.
Related Projects
Part of a connected ecosystem of cap manufacturing and distribution platforms.
