Challenge
Flex Cards needed parents, coaches, and teams to design real, professional-grade trading cards for their athletes (baseball, football, soccer, wrestling, cheer) directly in the browser, not by picking from a handful of static templates. Every card needed a real athlete photo, cleanly cut out of its background, dropped into a foil-style frame with name and team text. Off-the-shelf ecommerce or design-tool plugins don't talk to physical print production hardware; this had to be built as real software, end to end.
Approach
We built Flex Cards as a full-stack application: a Next.js front end with a Konva-based canvas editor for live card design (frame color, athlete photo placement, name and team text) with AI background removal so a phone photo becomes a clean cutout automatically. Stripe handles checkout on the customer-facing side. On the backend, a custom WordPress/WooCommerce plugin processes orders and hands off production-ready files directly to physical hardware (a Canon Arizona printer via ONYX and a Zünd cutter), so a completed order becomes a printed, die-cut trading card without a designer touching a single file by hand.
Deliverables
- Next.js + Konva canvas trading card design editor (frame color, photo placement, text)
- AI-powered background removal for uploaded athlete photos
- Stripe checkout integrated directly into the design flow
- Custom WooCommerce plugin as the order-processing backend
- Direct hardware pipeline to ONYX (Canon Arizona printer) and Zünd cutter
- End-to-end flow from browser design to a physical, die-cut card with no manual file handoff
Results
- Shipped end to end: browser design to printed, cut card
- A complete pipeline shipped from browser canvas to physical print hardware, proof this isn't templated plugin work
