WorkCase study 02

Drillcut

A B2B trade-supply e-commerce and procurement portal

React, Laravel, Shopify Storefront API, Algolia

Quick facts

Industry: Trade and construction supplies distribution (Australia): plumbing, copper, brass fittings, hydraulics
Our role: Full stack: React storefront and customer portal, Laravel REST API, Laravel admin panel, CI/CD
Stack: React, Laravel, Shopify Storefront API, Algolia

Summary

A headless e-commerce and procurement platform for contractors, builders and trade businesses. Customers browse a Shopify-powered catalogue at their own account pricing, and manage projects, quotes, carts, approvals, orders and invoices in one portal. Staff manage content and settings from a custom admin panel.

The problem

The client sold thousands of trade products, but a standard Shopify storefront could not handle how B2B customers actually buy. Every account has negotiated, quantity-based pricing held in the client's ERP, not in Shopify. Purchasing happens by project and by team, with shared carts, quotes and approvals per job site. Invoices, statements and price files were requested by phone and email, and site content needed a developer to change.

The storefront is public. The customer portal and admin panel need an account, and we can't share access to the dashboards because of client confidentiality.

What we built

Key features

Headless storefront with account pricing

Catalogue, collections and mega-menus come from Shopify GraphQL; live per-account, quantity-based pricing (with discounts and GST) comes from the Laravel API, which reads the ERP. Algolia powers instant search and autocomplete.

Project-based procurement workspace

Projects hold their own addresses, teams, saved carts, quotes, submittals and requisition orders. Any document converts into another (quote → cart, for example), and can be exported as PDF or CSV, emailed, archived and restored.

Requisitions and approvals

Junior staff raise requisition orders, which are routed to an approver based on order-value limits before becoming a purchase.

Role-based access control

Company admins build custom roles from 75 permissions, each with hide / view / edit / create levels, and manage sub-users, branches and user hierarchies with drag and drop.

Custom checkout and punch-out

Laravel builds a Shopify Draft Order with the account's pricing applied and signs the customer into Shopify checkout with Multipass. Punch-out (OCI) sends carts straight back into a customer's purchasing system.

Self-service account centre and admin panel

Invoices and statements as PDFs, online payment, order history with delivery dockets, price-file exports in 17 accounting and trade formats (Xero, MYOB, QuickBooks, SimPro, AroFlo and more), and a loyalty programme. Staff manage banners, announcements, promos, blog content and maintenance mode without a deployment.

How we solved it

Challenges

01
Challenge
Shopify only knows list prices, but every trade customer has negotiated prices, and checkout had to charge them.
Solution
Shopify holds catalogue and cart state; Laravel is the pricing authority. The storefront fetches live prices per SKU, account and quantity. At checkout, Laravel creates a Draft Order with the account's discounts and returns a Multipass token, so the customer enters Shopify's secure checkout already signed in, at the right price.
02
Challenge
Modelling real B2B purchasing: directors, estimators, site managers and apprentices needing different access across many projects and branches.
Solution
A data-driven permission matrix in Laravel, checked by one shared utility in React for both routes and UI elements. Approvals pick eligible approvers from configurable order-value limits, and one generic convert service handles every document type without duplicate code.
03
Challenge
A client-rendered app gives search engines and social previews almost no metadata, and pricing data needed protecting in transit.
Solution
A lightweight Express server injects Shopify SEO titles, descriptions and images into each page before serving it, and generates the sitemap. Payloads between React and Laravel are encrypted, with token auth managed centrally.

Results

A complete B2B commerce portal: 85+ application routes backed by 140+ Laravel API endpoints.
Invoices, statements, order history, price files and reward claims moved to self-service, so customers no longer contact the office for them.
17 price-file export formats let customers load pricing straight into their accounting and job-management software.
Non-technical staff update content, promos and maintenance mode without a code deployment.
Automated staging → production deployment pipelines.

Stack

Frontend: React 18, React Router 6, Redux Toolkit, React Query, Chakra UI, Framer Motion, TanStack Table
Backend: Laravel REST API with encrypted payloads, Laravel admin panel, MySQL
Commerce: Shopify Storefront GraphQL API, Draft Orders, Multipass checkout
Search: Algolia InstantSearch and Autocomplete
Integrations: Google Maps, Vimeo, Mailchimp, HubSpot, Chameleon, reCAPTCHA, address autocomplete, SimplyPaid
SEO / DevOps: Node.js + Express SEO server, Webpack, Bitbucket Pipelines, Netlify + Lambda functions