Working on an apparel customization lab inside a Rails storefront
About the product
Design Lab is the customization flow on Jiffy's Made path. Customers upload artwork, pick a blank and color, choose sizes, place the design on front and back, refine it, and add the project to cart.
I worked on this lab as a full-page React app inside the Rails storefront. Rails still owns session and checkout. The lab is React. Artwork prep runs in server jobs. Transfers Lab uses the same React mount on a sibling route.
Engineering decisions
1. A React lab inside the Rails storefront
Catalog pages on Jiffy use Rails HTML and Vue islands. Design Lab is a multi-step tool with its own routing, a large TypeScript codebase, and providers for artwork and processing. Putting that on a normal storefront page as another Vue island would have been a bad fit.
The lab needs its own app. The store still needs Rails for session and commerce.
The lab lives on a dedicated /design-lab route and layout. Rails still owns auth, experiments, AI credits, project access, and session analytics. The view dumps that config into a mount node. The jiffy/react pack boots a Feature-Sliced React app with its own router, desktop and mobile shells, and XState for create, resume, or continue a project.
Dedicated React page
- Own routing and Feature-Sliced structure
- Rails still supplies session and config
- Clear boundary from Vue catalog islands
- Transfers Lab can share the same mount
Vue island on a catalog page
- Matches cart and PDP patterns
- Weak fit for multi-step client routing
- Harder to isolate a large TypeScript app
- Too much work for a Vue island
I shipped lab features in that Feature-Sliced tree while Rails stayed the host for session and checkout. React Aria and Tailwind cover the UI around the canvas. That stack is separate from the catalog's Vue.
2. Artwork prep behind the artboard
Uploading a file is not enough for Made. Artwork has to be validated, processed, priced, and prepared. That can take a while. A single blocking request would freeze the lab on a heavy file.
Artwork prep cannot freeze the lab.
The artboard talks to an ActionCable DTF channel. Steps run in this order:
- Upload
- Validate
- Process
- Lighter process pass
- Background metadata
- Price
- Delivery
- Preview
Progress comes back over the cable. Server jobs do the heavy work. The browser tracks progress. It does not run the print algorithms.
ActionCable + server jobs
- UI stays usable during long jobs
- Steps stay ordered and visible
- Heavy work stays on the server
- Frontend has to handle progress and failure
One sync request
- Easier to think about
- Timeouts on heavy artwork
- Frozen UI while waiting
- Poor fit for multi-step prep
Frontend work meant progress, failure states, and coming back to a project. Save and resume go through GraphQL. A UUID URL lets someone leave and pick the project up later.
3. WYSIWYG placement with Konva
Customers need to see the design on the blank before cart: printable area, sizing, front and back. That needs a canvas with transforms and refine tools. A static preview is not enough.
Placement has to show print limits. It does not need to be a full graphics editor.
The artboard uses Konva and react-konva for the stage, layers, artwork group, transformer, and printable area. Refine tools cover crop, erase, and pan. Some extra tools sit behind experiments. Controls around the canvas use React Aria. The canvas itself stays Konva.
Konva / react-konva
- Solid React bindings for 2D placement
- Fits transform and refine overlays
- Mature enough for a production artboard
- Another specialized dependency to keep
DOM / CSS only
- No canvas library
- Weak for erase, crop, and print overlays
- Harder printable-area rules
- Not enough for Made placement
Most of my work was keeping placement inside the printable area, stopping refine tools from fighting the main transform, and keeping the artboard on the same GraphQL project and cart path.
Outcome
Design Lab is one guided Made flow: intake, product, sizing, placement, and cart. Artwork is prepared through a stepped pipeline while the UI stays usable, and placement is WYSIWYG on the blank before checkout.
Projects can be resumed from a UUID URL through GraphQL. Transfers Lab is a sibling route on the same React app. I worked inside that setup. The catalog Vue islands were not the place for this.
Packs, WebView, and Vue islands on the catalog are covered in the Jiffy storefront case study.
Testimonials
I worked with Parmeet for half a year, and I can highly recommend him as an experienced front-end developer and a responsible team member. He can quickly understand an issue or a new codebase and provide a solution.
I worked with Parmeet at Jiffy, and he is a dependable frontend developer who delivers high-quality work. He writes clean and easy-to-maintain code and always focuses on good user experience and performance. Parmeet is skilled in JavaScript, TypeScript, React, and modern CSS (SCSS, Tailwind). He works well with the team, takes ownership of his tasks, and can be trusted to deliver. He would be a strong addition to any frontend team.
Parmeet is an all-star frontend developer and a great teammate. I've worked with him on multiple features, and he consistently delivers thoughtful ideas, timely solutions, and pixel-perfect, scalable UI. I'd gladly work with him again!
Let's bring your nextbig idea to life
Whether you're brainstorming ideas, looking to bolster capabilities, rapidly expanding your team, or delegating projects, count on us to meet your needs effectively any or every step of the way
Available for new engagements