The Challenge

This industrial heating element manufacturer builds custom heaters for commercial and industrial applications. Each heater is engineered to order—customers specify voltage, wattage, dimensions, materials, and mounting configurations. The engineering team calculates resistance values, wire gauges, coil specifications, power densities, and material requirements for every order.

For years, the company relied on complex spreadsheets to perform these calculations. The system had grown over decades, containing hundreds of formulas, lookup tables, material databases, and conditional logic. It worked, but it created several problems:

• Single point of failure - Only a few engineers fully understood the calculations. When they were out, quote generation slowed to a crawl
• No remote access - The tools lived on specific computers. Sales reps in the field couldn't generate quotes for customers on the spot
• Version control issues - Multiple copies existed, each with slightly different formulas. Nobody was sure which was "correct"
• Manual PDF generation - After configuring a heater, someone had to manually create the specification sheet and quote document
• No visualization - Customers couldn't see what their custom heater would look like until it was manufactured
• Training burden - New engineers took months to learn the system's quirks and hidden logic

The company needed a modern solution that would make their engineering expertise accessible to anyone who needed it, while preserving decades of calculation logic in a maintainable, scalable platform.

The Solution

We built a web-based product configurator that faithfully translates the company's engineering logic into an interactive application. Users configure heaters through a guided interface, see real-time 3D visualizations, and generate professional PDF specifications with a single click.

Engineering Formula Implementation

The core challenge was implementing over 200 engineering formulas in JavaScript while maintaining exact calculation accuracy. This wasn't a simple port—it required understanding the engineering logic behind each formula and implementing it in a way that would be maintainable long-term.

We developed a systematic implementation pattern:

• Constants section - Named ranges became JavaScript constant objects with clear documentation
• Calculation functions - Each formula block became a discrete function with inputs and outputs
• Reactive updates - React's useEffect hooks ensure calculations cascade properly with automatic recalculation
• Validation layer - Engineering constraints are checked in real-time alongside calculations

Every calculation was validated against the original results. We ran hundreds of test configurations through both systems to ensure the web application produced identical results.

Multi-Platform Architecture

The company manufactures several categories of heating elements, each with different configuration parameters and calculations:

• Cartridge heaters - Cylindrical heaters inserted into machined holes
• Tubular heaters - Bent and formed heating elements for air and liquid heating
• Defrost heaters - Specialized elements for refrigeration applications
• Ventilated oven heaters - Multi-element configurations for industrial ovens

We built a modular architecture where each heater type has its own configurator component, but they share common calculation utilities, visualization components, and PDF generation logic. This approach keeps the codebase maintainable while allowing each product line to have its unique workflow—and makes it straightforward to add new product types as the platform expands to cover dozens of configurations.

3D Visualization with Three.js

One of the most impactful features is real-time 3D visualization. As users configure their heater, a 3D model updates instantly to show:

• Physical dimensions and proportions
• Terminal and lead wire configurations
• Mounting options and hardware
• Sheath materials with realistic rendering

Customers can rotate the model, zoom in on details, and see exactly what they're ordering before committing. This has dramatically reduced order errors and improved customer confidence in custom configurations.

Real-Time Engineering Validation

Industrial heaters must operate within strict engineering limits. Power density can't exceed material ratings. Resistance must fall within manufacturable ranges. Lead wires must handle the calculated current.

The configurator validates these constraints in real-time:

• Warnings appear immediately when a configuration approaches limits
• Errors prevent users from specifying impossible combinations
• Suggestions guide users toward optimal configurations
• Calculations update instantly as any parameter changes

Users can explore different configurations with immediate feedback, rather than submitting a request and waiting to hear if it's manufacturable.

Bill of Materials and Cost Calculation

Beyond the engineering calculations, the configurator generates complete bills of materials with cost breakdowns:

• Sheath material by length and diameter
• Resistance wire specifications and quantities
• Insulation materials
• Terminals, leads, and hardware
• Manufacturing labor estimates

Material costs are maintained in the system and can be updated without code changes. The BOM feeds directly into the quote generation process.

PDF Generation

With one click, users generate professional PDF specification sheets including:

• Technical specifications and dimensions
• 2D engineering drawings with annotations
• Complete bill of materials
• Cost breakdown and quoted price
• Manufacturing notes and special instructions

The PDFs are generated client-side using jsPDF, so they work offline and don't require server resources. The format matches the company's existing documentation standards.

Manufacturing Process Routing

For internal use, the configurator also generates manufacturing process routings:

• Operation sequences with work centers
• Setup and run time estimates
• Material staging requirements
• Quality check points

This information can be exported for integration with the company's ERP system, eliminating duplicate data entry between sales and manufacturing.

The Implementation

Phase 1 - Core Configurator: Started with the highest-volume product line. Implemented all engineering formulas, built the configuration interface, implemented validation. Extensive testing against original calculation results.

Phase 2 - Visualization: Added Three.js 3D rendering. Built parametric models that update based on configuration. Optimized for performance on standard business computers.

Phase 3 - PDF Generation: Implemented client-side PDF generation. Matched existing document formats. Added 2D technical drawings.

Phase 4 - Additional Platforms: Extended the system to cover additional heater types. Refactored common functionality into shared utilities.

Phase 5 - BOM and Costing: Integrated material databases. Built cost calculation engine. Added manufacturing routing generation.

Ongoing - Platform Expansion: Adding new product configurations, pricing engine integration, and ERP/CRM connectivity for seamless order processing.

The Results

90% reduction in quote time. Configurations that took engineers 30-45 minutes now take sales reps 3-5 minutes in the web application. The engineering team focuses on complex custom work instead of routine quotes.

Remote access for the entire team. Sales reps configure heaters and generate quotes during customer visits. The field team no longer waits for quotes from the home office.

Zero calculation errors. The validated formulas produce consistent, correct results every time. No more hunting for bugs or wondering which version is current.

Faster customer decisions. The 3D visualization helps customers understand what they're ordering. Seeing the heater before manufacturing reduces back-and-forth and order changes.

Easier training. New team members become productive in days instead of months. The guided interface and real-time validation teach them the engineering constraints as they work.

Preserved institutional knowledge. The company's decades of engineering expertise is now documented in maintainable code that can be extended and improved over time.

Technical Highlights

Key Takeaways

Encode expertise in software. Engineering knowledge that lives in spreadsheets or people's heads is fragile. A well-designed configurator captures that expertise in maintainable, scalable code that anyone can use.

Visualization sells. The 3D rendering feature consistently gets mentioned by customers as a key differentiator. Seeing the product before ordering builds confidence and reduces errors.

Real-time validation beats error messages. Guiding users toward valid configurations is more effective than rejecting invalid ones after the fact. The best error is one that never happens.

Client-side processing scales infinitely. By generating PDFs and performing calculations in the browser, the application handles any number of concurrent users without server bottlenecks.

---

Have complex engineering calculations trapped in spreadsheets? Learn about our app development services or contact us to discuss your product configurator project.