Preparation canvas
Users upload artwork, choose product constraints and position the image inside the working area before processing.
English portfolio mockFull-Stack Product Platform
Hobby Print Personalization Platform
A production web platform that lets customers turn their own artwork into embroidery-style designs for clothing. The system combines storefront, access-code onboarding, an interactive browser constructor, image processing and internal administration.
Case study
From product purchase to production-ready design
The project is not a standalone image editor. It connects the customer storefront, paid access, artwork preparation and internal operations into one workflow.
Challenge
Customers need a simple way to prepare a personal image for a physical embroidery-style product without manually working with graphics software.
Solution
A browser-based constructor unlocks with an order/access code, lets the customer position artwork and converts the selected area into a constrained production design.
My role
Product design, frontend, backend, API design, admin tooling, deployment, nginx configuration and production infrastructure.
Customer workflow
A connected product journey
01
Choose a kit
The storefront presents base kits and optional supplies for the physical product.
02
Enter access code
The customer uses the order number/access code to unlock the constructor.
03
Position artwork
The image can be positioned inside the target print/tufting area before processing.
04
Generate design
The selected area is processed into an embroidery-style result suitable for the product workflow.
Interactive constructor
Real production interface
The screenshots below are English visual mockups based on the real production interface, created specifically for the Blazzar Labs portfolio.
Editing & palette refinement
A dedicated modal lets the user inspect the processed result, review palette usage and confirm the final version.
English portfolio mockStorefront
Customer-facing ecommerce flow
Hobby Print includes the commercial layer around the constructor, not only the technical generation tool.
Brand storefront
Landing page and product discovery for personalized tufting/embroidery-style clothing kits.
Access-code onboarding
Paid customers enter an order/access code before entering the constructor.
English portfolio mock
Core kits catalog
Primary kits are presented as purchasable products inside the same platform, each with its own format and price.
English portfolio mock
Optional extras
Additional supplies and helper products extend the customer journey beyond the main kit purchase.
Operations
Internal administration
The project also includes private tools for managing access codes and the operational side of the product.
Access-code generator
Internal administration interface for generating customer access codes by product configuration and exporting them for operations.
Architecture & technology
The public site, constructor and admin tooling are connected through server-side APIs and deployed behind nginx on a Linux server. Sensitive business logic and administration are kept away from the public static surface.
JavaScriptNode.jsREST APINginxLinuxPM2SSL/TLSServer-side validation
End-to-end ownership
I designed and implemented the full product workflow rather than one isolated frontend screen.
Product & UX design
Frontend development
Backend & APIs
Admin tooling
Deployment
Security hardening
Need a custom product workflow?
I build customer-facing applications and the backend systems that support them.