Brandbit
A unified commerce platform replacing six fragmented tools
The Project
Growing brands were juggling too many disconnected tools. Inventory lived in spreadsheets, content in one CMS, orders in another dashboard, and marketing in third-party platforms. Every product launch meant manual syncing, duplicated effort, and broken assumptions. Brandbit was built to replace that fragmentation. It is a full-stack, multi-tenant platform where products, orders, content, campaigns, and customer interactions live in one place. The focus was operational clarity rather than feature sprawl, resulting in a system merchants rely on daily to run their businesses.
The Problem
- 01
Enable non-technical content teams to build and update pages independently without risking broken layouts or invalid state
- 02
Support complex product variant structures with accurate pricing and inventory across multiple attributes
- 03
Build an order pipeline that integrates payments, shipping, notifications, and inventory updates without manual intervention
- 04
Design an influencer program with reliable attribution, discount code tracking, and automated commission calculation
- 05
Unify customer interactions across reviews, comments, and contact forms with moderation and spam filtering
- 06
Reduce system fragmentation by consolidating CMS, catalog, orders, and marketing workflows into a single multi-tenant architecture
How I Tackled It
Data Architecture First
The project started by mapping relationships before building interfaces. Products connect to variants, which belong to categories and collections. Orders reference products, customers, addresses, and shipments. Pages are composed of blocks that reference shared media assets. These relationships were encoded into strict TypeScript interfaces early and guided both frontend and backend development.
Schema-Driven Design
The content builder was designed around JSON schemas defining block types, editable fields, and validation rules. The same schema powers the form generator and the renderer, ensuring consistency and preventing invalid layouts while allowing new block types to be added through configuration.
Modular Architecture
Each component and service was built with a single responsibility. Frontend logic lives in composables and domain-specific stores, while backend routes, middleware, and utilities are separated by concern. This structure made it possible to add new features mid-project without restructuring the system.
Performance and Multi-Tenancy
Large datasets were expected from the start. Virtual scrolling, debounced search, optimistic UI updates, and tenant-aware routing were implemented early. Media uploads use direct-to-S3 workflows to avoid server bottlenecks while supporting multiple storefronts efficiently.
What I Built
Visual Page Builder
A schema-driven content system that allows non-technical users to assemble pages from predefined blocks using structured inputs.
- Recursive renderer that converts JSON schemas into Vue components
- Expandable block library that grows with business needs
- Live preview with immediate editing feedback
- Reusable blocks shared across pages and storefronts
Product Management System
A flexible catalog system designed to handle complex product structures at scale.
- Variant matrix editor for multi-attribute combinations
- Bulk editing tools for pricing, categories, and images
- Collection and category hierarchy management
- Real-time inventory tracking across tenants
Order Fulfillment Pipeline
An automated order flow that moves purchases from payment confirmation to delivery.
- Shipping label generation through Shiprocket integration
- Webhook-driven order state updates
- Automated customer notifications
- Clear handling of exceptions requiring manual review
Influencer Program
An affiliate system built directly into the platform rather than added as an external tool.
- Discount code creation with attribution tracking
- Real-time performance metrics
- Automated commission calculation
- Self-service dashboards for influencers
Media Library
A centralized asset system designed for scale and reuse across the platform.
- Direct uploads using pre-signed S3 URLs
- Automatic thumbnail generation
- Fast search with tagging support
- Assets reused across pages, products, and campaigns
Customer Interactions Hub
A unified view of all customer touchpoints across the platform.
- Reviews, comments, and contact submissions in one feed
- Moderation and spam filtering tools
- Direct links to related products and orders
- Fast response workflows for support teams
Screenshots
Clean interface designed to support complex workflows without overwhelming users
Secure multi-tenant authentication with role-based access control
Centralized media library with tagging, search, and direct S3 uploads
File manager style interface built to handle thousands of assets efficiently
Order management view showing status, shipment details, and customer context
Tenant-level configuration for branding, payments, and shipping providers
Product creation flow supporting complex variant matrices and bulk actions
Schema-driven visual page editor with structured inputs and live preview
The Impact
Scaled from early launch without performance degradation
Organized in a shared, searchable library across tenants
Handled increased demand without architectural changes
Maintained responsiveness as system complexity grew
Reusable components built with strict typing
Domain-specific state management across the application
What I Learned
This project reinforced that the most valuable features are often not part of the original requirements. The content builder became the most-used feature after repeated requests for simple page changes revealed a deeper operational need. Using strict TypeScript from the start slowed early development but paid off as relationships between products, variants, orders, customers, and media grew. Strong typing reduced regressions and made refactoring safer. The recursive content renderer was challenging to build and intentionally invisible to users. Merchants can nest content freely without needing to understand how it works internally. If starting again, a shared type package in a monorepo would reduce drift between frontend and backend. Analytics would also be designed into the core architecture instead of being added later. The biggest win was modularity. When the influencer program was introduced mid-project, it fit naturally into existing patterns. Multi-tenancy was treated as a consistent constraint rather than a special case. This is software that real teams use daily to run their businesses, and that outcome mattered more than shipping features quickly.
Key Highlights
Brandbit
A unified commerce platform replacing six fragmented tools