Official 3M Dealer · B2B2C Marketplace
BondingCenter
A B2B/B2C e-commerce platform for trading industrial tapes and adhesives online — from AI product recommendations to a CAD cutting-drawing viewer and online payments, delivered to web and mobile apps from a single codebase.
Overview
BondingCenter is an e-commerce platform that sells 3M industrial adhesive and tape (IATD) products online, operated by an official 3M distributor.
It serves both industrial customers (B2B) who need products cut to a drawing and general retail customers (B2C).
It was built to move industrial-goods transactions — previously driven by phone calls and quotes — into a direct sales channel that completes online: product discovery, drawing upload, payment, and delivery tracking.
Web and iOS/Android apps run from a single codebase, providing a consistent experience across every touchpoint.
Role & Contributions
- Designed and built the web frontend and serverless APIs with Next.js 15 (App Router), React 19, and TypeScript
- Modeled the product, order, member, and mileage domains on Supabase (PostgreSQL)
- Integrated a domestic payment gateway (PG) to build the purchase flow from order creation to payment and delivery tracking
- Implemented LLM-based natural-language product recommendations as a two-stage pipeline (fast search / AI message generation) to optimize response time
- Built an in-browser inline CAD drawing viewer (PDF/DXF/DWG) using dxf-viewer and three.js
- Packaged the same codebase into iOS/Android apps with Capacitor and integrated push notifications
- Implemented mileage earn/redeem, a five-tier membership program, real-time support chat, and a TipTap-based content hub
- Established SEO foundations such as a dynamic sitemap and robots
Key Features
AI Product Recommendation Chatbot
Parses natural-language queries with an LLM to recommend top products. Fast search and AI message generation are separated to minimize response latency.
CAD Cutting-Drawing Upload & Viewer
Customers upload PDF/DXF/DWG drawings, preview them inline in the browser, and apply them directly to an order.
Online Payments & Order Management
Covers the full purchase flow — PG payments, order creation, and delivery tracking.
Mileage & Membership Tiers
Mileage earn/redeem and tier benefits across five levels, Bronze to Diamond.
Content Hub
A blog, technical library, and FAQ built on the TipTap rich-text editor to support product discovery and learning.
Real-time Support Chat
Live chat for exchanging product inquiries in real time.
Unified Web/Mobile + SEO
Ships iOS/Android from a single codebase, with a dynamic sitemap and robots for search optimization.
Engineering Challenges
Optimizing AI Recommendation Latency
- Situation
- Recommending products from natural language was slow because of LLM call latency.
- Task
- Improve perceived response time while keeping search accuracy.
- Action
- Split the recommendation pipeline into two stages: a fast product search narrows candidates immediately, and the LLM is used only to generate the recommendation message.
- Result
- Surfaced search results quickly while adding an AI explanation, reducing latency and maintaining recommendation quality.
In-browser CAD Drawing Preview
- Situation
- Industrial customers request cutting using CAD drawings such as DXF/DWG, not only PDF.
- Task
- Let customers view drawings on the web without separate software and connect them to an order.
- Action
- Built an inline browser drawing viewer with dxf-viewer and three.js, supporting PDF/DXF/DWG uploads.
- Result
- Customers preview drawings immediately on upload and order, reducing quote/confirmation round-trips.
Running Web and Mobile from One Codebase
- Situation
- Web and iOS/Android were all required, but separate native development meant high cost and maintenance.
- Task
- Operate three platforms consistently from a single codebase.
- Action
- Wrapped the Next.js web app with Capacitor to package iOS/Android and integrate push notifications, and built a responsive, accessible UI system.
- Result
- Runs web, iOS, and Android from one codebase with consistent features and design.
Tech Stack
Impact
- Moved industrial-goods transactions from phone/quote-driven to an online purchase flow (discovery, drawing upload, payment, delivery).
- Runs web, iOS, and Android from a single codebase for development and maintenance efficiency.
- Manages code quality with strict TypeScript (no any) and ESLint, and improves maintainability by separating modules and service layers per domain.
- Quantitative metrics (catalog size, monthly active users, AI recommendation conversion, Lighthouse scores, etc.) can be added as they become available.