The goal
Let business customers order printed work wear online on their own - pick garments, colors, sizes and quantities, upload their logo, see how the print will look, and pay - instead of going back and forth by phone and email for every order.
The solution
A Vue 3 + Express + MongoDB platform with a mobile-first Hebrew order wizard: product and category selection, a color x size x quantity matrix, separate front and back graphics per item with free in-browser background removal, a visual mockup of the print on every chosen color, an order summary and Cardcom v11 LowProfile payment with an optional tax-invoice document. Customers get accounts with order history, one-tap reorder and password reset. The business gets an admin panel for orders, customers, products, categories, a reusable print-position library with an interactive zone editor, inventory with low-stock alerts, SMTP settings and Excel exports.
Highlights
- Customers design, preview and pay for a printed order without talking to anyone
- Free in-browser logo background removal - no paid image API
- Live mockup of the print on every color the customer picked
- Cardcom payment hardened with server-side price checks and verified callbacks
- Admin runs catalog, print positions, inventory and orders without a developer
The challenge
Customers upload logos as JPGs with white or off-white backgrounds, which look like a white box when printed on a dark garment - and a paid background-removal API would add a per-order cost.
Wrote a free in-browser background remover on Canvas: it detects the dominant color around the whole image border, skips images whose border is not a solid color (photos), and flood-fills only edge-connected background to transparent, so white areas inside the logo survive. Vector files (PDF/AI/EPS) are passed through untouched.
Print positions (chest, back, sleeve and so on) and their sizes differ per product type, and entering them by hand on every product does not scale as the catalog grows.
Built a reusable position library with sizes in cm and display order, linked categories to positions so new products are populated automatically, added a sync that backfills existing products, and an interactive zone editor that shows each position on a real product image.
Taking real payments from a browser-built cart means the client could tamper with prices, and the payment callback could be spoofed or replayed.
Prices and stock are recalculated and checked on the server before a Cardcom session is opened, the session id is stored on the order so the callback is verified against that exact session, and orders get a per-order access token against IDOR. Uploads are restricted by extension and MIME type, and SVG uploads were removed to close an XSS path.
After a client meeting the order model changed substantially - multi-color lines and separate front and back graphics - while orders in the old shape already existed.
Moved the Order schema to variants[] and {front, back} graphics with backward-compatible reads, so invoices, stock deduction and the admin keep working on both old and new orders without a data migration.
What was delivered
- Customer-facing order wizard (Vue 3, mobile-first, RTL)
- Express REST API with MongoDB models for products, categories, positions, orders, customers and settings
- Cardcom payment integration with optional invoice document
- Admin panel with Excel exports and email alerts
- Serverless deployment configuration with file storage
Results
7
Admin screens
End-to-end
Order wizard
Cardcom
Payment
Hebrew RTL
Layout
What it taught me
- For a print business the mockup is the product - investing in the preview step mattered more than any admin feature
- A simple, well-scoped algorithm (border color + edge flood fill) covers most real logo uploads without an external service
- Designing the order schema with backward-compatible reads made a mid-project requirements change cheap