Product configurator. Shelter quote and visualization in one tool

01. Starting point

The client manufactures garage and garden shelters made to order. Every structure differs in dimensions, number and placement of wall panels, roof covering, and color scheme. There is no catalog of finished products you can simply flip through.

Quotes were prepared by hand. The person building the offer calculated material demand separately for every order: profile lengths, covering area, fasteners. The result depended on the estimator’s experience and attention, and with unusual dimensions it was easy to over-order material or, worse, under-order and discover shortages only on the production floor.

Color was a separate problem. The client looked at colors on a physical swatch, a sample a few centimeters across, and from that tried to imagine the effect on a structure of several dozen square meters. The gap between expectation and the finished build caused disappointment and sometimes complaints.

02. Solution

We built a configurator where a single set of parameters produces visualization, material takeoff, and pricing at once.

The manufacturer sets structure dimensions, adds optional elements such as wall panels, chooses roof covering, and picks colors for individual parts. The shelter model rebuilds live with every parameter change, so the client sees a specific structure in specific colors, not a color sample torn out of context.

In parallel with the visualization, material demand and order cost are recalculated. At the end of the process the system generates a PDF offer ready to hand to the client.

03. Process flow

1. Enter the structure dimensions.
2. Select add-ons, including wall panels and their placement.
3. Choose roof covering and colors for individual elements.
4. Review the material takeoff and cost.
5. Generate a PDF offer for the client.

Live-updating visualization

The structure is shown as a spatial model you can rotate and view from any side. Changing a dimension, adding a wall panel, or picking another color rebuilds the model immediately, without reloading the page or waiting for a render.

Colors are rendered in near-real conditions, including gloss and material texture. The color conversation stops relying on the client’s imagination, and the decision is made before production starts, not after it finishes.

Material takeoff instead of estimates

Behind the numbers sits a rule-described construction model: from the given dimensions and selected options the system derives a full parts list with lengths and areas. The takeoff includes cutting layouts for profiles and sheets into the needed segments, so waste is kept down.

The result is a material order based on calculation, not a cautious buffer. The same list underpins pricing, so offer cost and production cost come from one source.

Offer at the end of the process

The client document is built from the same configuration shown on screen. It includes the structure specification, selected materials and colors, visualization, and price. It does not require retyping data into a separate document, so the offer cannot drift away from what was agreed.

Technologies used

The stack below matches the nature of this solution:

• Frontend: React, TypeScript, Vite, Tailwind CSS
• 3D visualization: Three.js with react-three-fiber, parametric model generated from entered dimensions
• Configuration state: Zustand, parameter validation with Zod
• Backend: Node.js, Fastify, TypeScript
• Database: PostgreSQL, Prisma ORM
• Pricing logic: material rules engine with a cutting algorithm
• Offer generation: React and Puppeteer, PDF document with visualization
• Deployment: Docker, nginx, Let’s Encrypt certificate

Why a dedicated application

A solution of this class is hard to base on a ready-made shop plugin, because the product does not have a finite number of variants. Combinations of dimensions, add-ons, and colors number in the thousands, and each must map to a correct material takeoff. That requires a custom construction model and custom pricing rules maintained on the manufacturer’s side.

04. Results

Quoting stopped being a separate task done after talking to the client. It happens during configuration, together with the visualization, and rests on the same material takeoff that later goes to production.

Material orders come from calculation, not from buffer. Less waste translates directly into unit cost, and in made-to-order production that cost decides margin.

The client decides on colors while seeing the finished structure, not a swatch sample. The sales conversation moves from describing to showing, and misunderstandings about the end result drop.

The offer is handed over during the meeting or right after it, as a document that matches what the client saw on screen.