Optimizing Print-on-Demand Production at Riverr.app

Client: Riverr.app (OH / full remote)

Stack: Node.js, React, Canvas API, Material UI

Building a Custom Bin-Packing System

One of the central workflows involved arranging multiple uploaded images onto fixed-size printable sheets used in DTF production. In print-on-demand production, every unused area on a printable sheet represents wasted material and increased manufacturing cost.

At small scale, manual placement is manageable. At production scale, it becomes expensive very quickly: inefficient placement wastes material, poor packing increases production costs, and manual adjustment slows order processing.

The platform needed a layout engine capable of automatically arranging arbitrary user artwork while respecting sheet boundaries, image margins, rotations, varying asset dimensions and multi-sheet overflow behavior.

This was not a theoretical bin-packing exercise running offline. The complexity came from the fact that the algorithm had to operate interactively inside a product experience where users expected immediate visual feedback and predictable results.

My approach

I designed and implemented a custom bin-packing workflow in Node.js using canvas-based rendering logic.

A major consideration was balancing packing efficiency against determinism and usability.

Pure optimization approaches can produce layouts that are technically dense but difficult for users to understand or edit. In practice, production tooling benefits from layouts that remain visually predictable and easy to manipulate manually afterward.

Instead of pursuing maximal algorithmic complexity, I focused on stable placement behavior, understandable layout rules and reliable handling of edge cases. Particular attention was given to overflow handling between sheets, avoiding clipping caused by compounded margins and preserving responsiveness as the number of uploaded assets increased.

The system also introduced rotation-aware placement and support for multiple bins, allowing larger batches of artwork to flow naturally across several printable sheets.

The updated nesting engine significantly improved sheet utilization and reduced wasted printable area while making the interface much easier for non-technical users to operate.

Product & UX Considerations

The technical layer alone was insufficient. Operators needed visibility into the physical dimensions of the output and the structure of uploaded assets.

To support this, I reworked parts of the interface by introducing:

• ruler-based measurement guides,
• a layered asset sidebar,
• improved mobile responsiveness,
• and a reorganized workflow better suited to production-oriented usage.

These changes reduced visual friction and made the system easier to use during high-volume preparation tasks.

The UI work was intentionally tied to operational workflows rather than cosmetic redesign. The objective was to reduce ambiguity during print preparation and help users understand spatial constraints directly inside the editor.

Automatic Sticker Generation

The client wanted users to upload PNG assets and automatically generate “die-cut” style stickers with borders and shadows — similar to commercial sticker customization platforms.

The core challenge was reliability.

Users were uploading highly inconsistent artwork — transparent PNGs, low-contrast images, partially open shapes, noisy edges, varying resolutions — and expecting production-ready sticker previews in real time. Existing implementations worked for “ideal” images but failed on edge cases: outlines contained gaps, internal holes could not be filled correctly, borders scaled inconsistently depending on image dimensions, and some exports became unusable for downstream printing.

Rather than treating the problem as a purely visual one, I approached it as a preprocessing and normalization pipeline.

I built an image-processing pipeline centered around contour extraction, SVG mask generation, edge cleanup, and automated border rendering. The implementation relied on Canvas-based processing and SVG post-processing techniques to stabilize generated shapes before rendering sticker outlines and shadows.

A key engineering challenge was handling malformed or noisy contours produced during vectorization. Rather than relying exclusively on raw tracing output, I introduced preprocessing and cleanup stages to improve consistency across different image types.

The emphasis throughout the implementation was robustness rather than perfect mathematical precision. In a production environment, reliability across thousands of imperfect user uploads matters more than achieving ideal outputs for a narrow set of examples.

Operating Within Real-World Constraints

The work required navigating ambiguous requirements and refining solutions incrementally with the client as operational realities became clearer.

A recurring pattern throughout the project was translating loosely defined production problems into concrete software behavior:

• how margins should interact with nesting,
• how overflow should propagate across sheets,
• how users perceive spatial constraints,
• or how imperfect uploaded assets should degrade gracefully.

This work reinforced a pattern I often see in product engineering engagements: the hardest problems are rarely isolated technical problems.

The sticker-generation feature was simultaneously a computer vision problem, a rendering problem, a performance problem, a UX problem, and a manufacturing problem. Improving one dimension in isolation often degraded another. Better contour fidelity increased compute cost. More aggressive filtering improved fill quality but reduced detail retention. Highly optimized layouts became difficult for operators to visually validate.

The value came from balancing those tradeoffs in a way that aligned with the actual business workflow.

The final system prioritized reliability, clarity, and operational usefulness over unnecessary technical complexity.