How we took the complexity out of shopping and understanding steel components

JNL Steel Components sells across dozens of product lines: beams, purlins, tubing, rebar, custom sheet metal, laser-cut trim, storage buildings. We built their site as a React app with dynamic sidebars, so a contractor can fly between categories, sizes, and specs without a single page reload. Browsing the catalog feels instant.

Metal profiles you can actually see and spin in 3D

Every sheet metal profile on the site (R-Panel, PBR-Panel, U-Panel, PBU-Panel, Pro-Rib, Ag-Panel, Corrugated) renders in an interactive 3D canvas. Customers click and drag to rotate the panel, inspect the rib depth and pitch from any angle, and read the dimensions. No PDF download, no zoomed-in catalog image, just fast information absorbtion by the customer.

A single toggle flips the purlin bearing leg on and off, so a customer can see exactly what a PBR leg adds to the profile. Color swatches re-paint the panel live, so the same model previews in Rustic Red, Galvalume, or any other standard color before they commit.

Drone footage of the facility

Drone footage of JNL's facility is embedded across their site. Exterior passes cover the inventory yard (steel beams, rebar, tubing, and storage buildings) and the dirt-work equipment lot. Interior shots cover the sheet metal fabrication shop, the laser and plasma cutting stations, and the purlin and tubing manufacturing line. This creates a WOW factor for their customers and shows their capabilities for making quality steel components.

From a static PDF brochure to a browsable product catalog

JNL's Color Chart & Fabrication Profiles brochure used to ship as a PDF, with twenty-eight named colors, four profile families, and coating performance data buried past the cover page. We rebuilt it as a live section of the site where a single color picker repaints every metal profile on the page instantly, and gave the product catalog the same treatment.

The whole inventory fits in a single page view. Click a category and a sidebar slides in with that section's products listed out. Click a specific item and the sidebar shows the full spec readout (gauges, lengths, colors, coatings, warranty data), no page reload, no second tab. A buyer can move through the whole inventory as fast as they can click. Before, the same information lived inside a PDF that was never online and never searchable. Now the whole catalog is crawlable and indexable by Google.

A 3D building configurator in the browser

Before the configurator, putting together a building spec meant a phone-and-email loop with sales: a prospect would describe what they wanted, sales would write up dimensions and a price, the prospect would ask to see it with a different door or a different color, and the cycle would repeat. The configurator collapses that loop into a single page. A prospect sets the width, length, and eave height, places doors and windows, adds overhangs, and swaps roof and trim colors from JNL's actual color palette, with the 3D model rendering as they click. The page works on a phone, tablet, or desktop, and the finished spec hands off to sales as a structured record rather than a freeform email.

Five years ago, a tool like this would have taken months of custom development, or required an ongoing monthly software subscription. AI-assisted development can now cut the build down to a few weeks. JNL owns the code and the product data outright, so they can change anything about the tool whenever they want.

A custom quote builder built from the parts catalog

JNL already had every steel component part documented in a CSV: part number, color, and every variation for each item. We loaded that file into a database and built a quote builder on top of it. A contractor picks a part, chooses the color and variation, enters quantity and length, adds the line to the order, and repeats until the order is complete. Submitting the form sends JNL a CSV in the exact format their sales team uses to price orders.