Context
The Problem
Biro Sales is a thermal label distributor serving primarily commercial grocery stores — the labels printed at meat counters, produce scales, and for UPC/safe-handling compliance. Their catalog spans 171+ SKUs across multiple manufacturers.
Their existing WooCommerce site was outdated in design, navigation, and mobile experience. WooCommerce's plugin ecosystem added unnecessary complexity, and the storefront didn't reflect the straightforward, utilitarian experience their B2B customers needed.
Fulfillment was handled through a patchwork of WooCommerce's built-in tools, QuickBooks for accounting and inventory, and UPS for shipping — with no unified view.
Before vs. After
Before
- • WooCommerce with excessive plugins
- • Outdated design, poor mobile UX
- • Product data scattered across spreadsheets
- • No unified order management view
- • Manual fulfillment coordination
After
- • Clean, mobile-optimized storefront
- • Amazon-style ordering and reordering
- • Centralized admin dashboard
- • Automated email flows via HubSpot
- • Multi-method checkout via Stripe
Walkthroughs
Customer & Admin Experience
Customer Experience
Full storefront flow — browsing, filtering, cart, and Stripe checkout with multiple payment methods.
Admin & Store Managers
Order fulfillment view, product management, integration shortcuts to Stripe, QuickBooks, and Vercel dashboards.
Approach
Architecture Decisions
Why Next.js + React
Next.js provided the most open-ended architecture for connecting external services via API routes — no plugin lock-in like WooCommerce or Shopify. Combined with AI-assisted development through Cursor, this stack allowed rapid iteration while maintaining full control over the checkout flow, admin tools, and third-party integrations.
Why Supabase
Supabase offered a fast setup with a clean API, built-in auth for customer and admin accounts, and real-time capabilities. Cursor's Supabase skills gave the AI models direct context for efficient integration — making database operations, RLS policies, and auth flows straightforward to implement.
Stripe over PayPal
The client initially wanted crypto payment capabilities. Stripe won over PayPal because it offered Apple Pay, Google Pay, direct ACH, credit card, and crypto via USDC stablecoins — all with lower surcharge fees. Stripe's Acodei plugin for QuickBooks also solved the accounting sync challenge without building a custom invoice payment route.
QuickBooks Integration
QuickBooks was the client's existing accounting and product database system. Rather than building a direct QuickBooks payment integration (which proved unfriendly for UX), Stripe's Acodei plugin provided automatic sync between Stripe transactions and QuickBooks — keeping the client's accounting workflow intact.
Architecture
Integration Data Flow
Key integrations
Storefront
Next.js + React
Supabase
Auth, DB, Storage
Stripe
Checkout + Payments
QuickBooks
Acodei Sync
Order Placed
Customer
HubSpot
Email Automation
Admin Dashboard
Fulfillment View
UPS Tracking
Manual Entry
Webhooks sync order status between Stripe, HubSpot, and the admin dashboard. Tracking numbers entered by fulfillment staff trigger automated customer emails.
Key Details
Deep Dives
AI-Assisted Development Velocity
Cursor carried the development efficiency on this project. AI agents (Composer 2 with Opus 4.6 for heavy coding tasks requiring large code contexts) wrote the vast majority of the code, while Claude and Claude Code handled research and solution evaluation.
Time estimate without AI: 4 months for design alone, 12+ months for full development.
Actual time: 4 months total — design, development, and deployment.
The biggest accelerators were API route generation (reading third-party API docs and integrating them within the codebase context), managing 171 products across scattered data sources, and debugging middleware for production auth security — separating admin accounts from customer accounts using environment-level email validation.
A custom Cursor script was even used to generate placeholder product images from SKU data for early wireframing, which later prompted the client's team to photograph all missing labels and share them via Dropbox.
Admin Dashboard
The dashboard splits into two core functions: order management and store management — matching the client's real-world workflow of processing orders and maintaining product data.
Order Management: View all orders including incomplete ones (captured customer info, unpaid). Each order displays product SKUs for warehouse fulfillment, with a dedicated field for entering UPS tracking numbers. Once entered, HubSpot automations trigger customer notifications — order confirmation, shipping updates, and delivery confirmation.
Store Management: All 171+ products organized, filterable, and editable — images, descriptions, SKUs, stock counts, and admin notes. Smart search finds products by name, SKU, size, type, or any detail. This replaced the scattered spreadsheet/QuickBooks workflow the client had been using.
Admin access is secured via environment variables containing authorized email addresses, enforced through middleware — a practical cybersecurity approach for a small team.
AI Video Production
Utilized Google's Vertex AI Studio (Veo 3.1) during the free $300 trial to produce studio-grade video content showcasing thermal labels in commercial grocery environments — labels on scales from various manufacturers, bulk case ordering visuals, and brand storytelling.
The creative direction aligned with the owner's vision: utilitarian, “present and sell labels plainly,” at an Amazon-level customer experience. This bridged AI content generation with real product marketing — producing assets that would typically require a production team and on-location shoots.
Brand keywords from the pitch deck: Manufacturing Professionalism, Quick-Access Ease, Transparent Filtering, Streamlined Ordering, Improved Customer Experience, Expanded Payment Capability, Efficient Order Management.
Product Data Migration
With 171 products and data scattered across QuickBooks, multiple spreadsheets, and internal storage systems, migration was a significant challenge. Rather than waiting for perfect data, products were imported iteratively as data and images became available.
This “progressive import” approach was unconventional but practical — it avoided the bottleneck of traditional bulk imports (like Shopify CSV or WooCommerce exports) and naturally led to building the store management dashboard as a better long-term solution for maintaining product data.
Outcome
Results & Reflection
The site is live at birolabels.com. Client feedback has been consistently positive — “this is awesome, exactly what I envisioned, great work.”
The fulfillment workflow now flows from browser-based order review to warehouse packing to UPS tracking entry, with automated customer emails at every stage. The designated UPS computer at the warehouse integrates naturally — staff enter tracking numbers in the admin dashboard, and the system handles the rest.
Development was broken into 3 phases:
- Phase 1: Discovery — architecture planning, wireframes, integration selection (Next.js over WooCommerce, Supabase, Vercel)
- Phase 2: Core build — storefront, product catalog, auth, admin dashboard
- Phase 3: Integrations — switched from PayPal to Stripe, HubSpot email flows, Google Merchant for SEO
What I'd improve in v2
The iterative product import approach was creative and efficient, but it caused friction when managing images and SKUs across 171 products before the admin dashboard was fully built. In v2, I'd build the product management UI first, then import.
UPS API integration was explored but proved extremely difficult to custom-integrate — their developer experience is notably poor. The manual tracking-number workflow ended up being pragmatic for this client's scale, but a direct API integration would reduce steps.
HubSpot configuration for timed reorder reminders (e.g., emailing customers when they're likely running low on labels) is set up but could be refined with better purchase frequency data over time.
Stack