A digital calculator for Hebei Guanjia Ltd.—from hangar dimensions and a WebGL model to specifications, logistics from China and a complete commercial proposal.
When purchasing prefabricated buildings, clients expect quick answers: what the building looks like, how much steel and paneling it requires, how many trucks are needed and what the total cost will be. These parts of a proposal were previously calculated separately and could become inconsistent after a parameter changed. We created a unified parametric system in which one configuration controls geometry, specifications, packing, routing and commercial calculations.
Changing the width, frame spacing or panel type requires several spreadsheets to be updated manually.
We linked every calculation to a single parametric model, ensuring that geometry, weights, areas and fasteners update consistently.
The visualisation is disconnected from the bill of materials, so the client sees one configuration while the commercial proposal calculates another.
React Three Fiber builds the WebGL scene from the same parameters used by the calculation engine.
Panel packing, the number of lorries and the border crossing require manual reconciliation and repeated data entry.
We added a batching algorithm, drag-and-drop allocation across vehicles and route comparison via Khorgos, Maikapchagai and Bakhty.
A spreadsheet cannot show the future structure, and calculation versions get lost in correspondence.
We produced a branded Excel file and a short link to an interactive 3D model, with the option to restore the JSON configuration.
The architecture was verified using the supplied documentation, application structure and genuine product screens.
Managers configure dimensions, sections, roof layout, steel type, panels, gates and windows. The system immediately recalculates frames, trusses, columns, bracing, purlins, areas, fasteners and accessories. In the same session, they can check vehicle loading, select a route and apply exchange rates, duty, VAT, customs clearance and margin.
Width, height, roof, sections, frame spacing and steel type
Walls, roof, layout, windows, gates and finishing elements
Lengths, Areas, Weights, Quantities, and Fasteners
Bundles calculated by type, length, thickness, pallet and truck limits
Product price, exchange rate, duty, VAT, clearance, logistics and margin
JSON, LZ-String, short URL, visits and project recovery
Camera rotation, zoom and movement
Frame, panels, openings and joints with independent visibility
Instant geometry and bill of materials updates
Automatic packing and manual drag-and-drop
The calculator runs in the browser and as a Windows application. Configurations are saved as JSON, compressed with LZ-String for sharing by link and restored without re-entry. The static web build is ready for Vercel, Netlify or PHP/Plesk, and the desktop build generates an NSIS installer. The administration module displays published links and visits.
Calculations are presented as preliminary estimates for preparing proposals. They require engineering verification and do not replace structural design, load-bearing calculations or construction documentation. Figures shown in the administration screen are demonstration data.
Costs are assembled step by step: products, fasteners, accessories, customs duty, VAT, clearance, logistics and profit. Managers can adjust rates and areas, compare routes and generate a document from a branded template without moving data to an external spreadsheet.
Light and heavy steel, mono-pitch and dual-pitch roofs, internal columns and sections.
At widths above 20 m, the design switches to heavy steel; the interface limit is 40 m.
Economy and standardized options for end walls.
Bundles account for length, thickness, pallet and vehicle restrictions.
Customs duties, VAT, clearance, logistics and profit are calculated in sequence.
ExcelJS populates the XLSX template, while JSON restores the original configuration.
The product reduces manual work and the risk of discrepancies between the visualisation, specification and price. Actual time savings and conversion growth should be measured during live operation.
We will analyse the audiences, content, integrations and search demand, then design the structure and technical architecture before visual design begins.
Discuss the Project ↗Back to Case Studies