03 / WEB · PRINT COMMERCE
Pacesetter Prints
From custom designs to production handoff. A print-commerce platform connecting customers, proofs, payments and staff operations.
THE PRODUCT
Built around a real need.
I rebuilt a traditional WooCommerce website into a custom-print commerce and operations platform. Starting from Figma designs, I connected product discovery and personalisation with quotes, proof review, customer accounts and protected staff workflows.
- Product customisation and live design previews
- Quotes, proof review and production handoff
- Customer self-service and staff operations
MY CONTRIBUTION
From problem to working product.
Solo project · Full-stack development · System design · Figma-to-code implementation
My work covered the public storefront, product customisation, customer accounts, staff operations, database access controls and payment integration. The goal was to support the real review and production steps behind a custom-print order.
The customer journey
- Browse & customise
- Submit a quote
- Review the proof
- Production
- Delivery
01A guided website experience
The problem
The previous WooCommerce website, hosted through GoDaddy, lacked a modern, guided journey for custom-print products.
What I built
I rebuilt the site from Figma designs with responsive desktop and mobile layouts, shared glass navigation and footer components, and clearer page hierarchy. The public experience covers Products, About, Contact, How It Works, FAQ, Privacy, Terms, Delivery, Quotes, Cart, Checkout and Order Confirmation.
02Product discovery and customisation
The problem
Customers needed clearer ways to find products and personalise their print orders.
What I built
I built category filtering, product cards and detail pages, configurable variants, inventory-aware pricing, colours, sizes, print placement, artwork uploads and a live design-editor preview.
03Reliable colour and placement previews
The problem
Product colour, artwork colour and front/back placement were confusing, and preview updates were initially unreliable.
What I built
I introduced a shared colour-wheel workflow with explicit T-shirt and Artwork selection, black/white options and draggable colour selection. I corrected swatches and live previews, including front, back and detail views.
04From quote to production
The problem
THE TECHNOLOGY
How it comes together.
Application & hosting
Next.js · Vercel
The full-stack application serves customer and staff experiences from Vercel.
Managed backend
Supabase
Auth, Postgres and Storage, with migrations, Row Level Security and protected storage policies.
Payments
Stripe
CAD checkout sessions and signed webhook handling for payment finalisation. Live webhook configuration remains in progress.
Domain routing
GoDaddy DNS
GoDaddy manages domain DNS. The cutover from the previous WooCommerce host to Vercel is in progress.