How good software took the complexity out of shopping for 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 to 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 to buying.

We Took Drone footage of the facility

Drone footage of JNL's facility is embedded across their site. Exterior passes cover the inventory yard of steel beams, rebar, tubing, and storage buildings, along with the dirt-work equipment lot. Interior drone footage covers 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 used to only be available as a PDF brochure, with twenty-eight named colors, various metal profile families, and accessories and parts. We rebuilt it as a live interactive section on their site so a customer can browse all products and colors without refreshing the page.

The whole inventory fits in a single page view. Click a specific product and the sidebar shows the full spec readout of gauges, lengths, colors, coatings, and warranty data, no page reload, no second tab. Select a color and the 3D metal profiles are repainted instantly. A buyer can move through the whole inventory as fast as they can click.

A 3D building configurator in the browser

The configurator gives buyers a way to see what they want before they ever talk to sales. A buyer 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. Visualizing the building up front is much easier for the customer, and the page has driven more email submissions from potential buyers.

AI Makes Building 3D Configurators 10 Times Faster, at a 10th of the Cost

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. And they pay no monthly subscription fee.

A custom SQL database, designed around JNL's parts catalog and powering their quote builder

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. Customer accounts tie every quote to the buyer's email, so you get a per-customer order history you can pull up at any time.

A really easy visual installation guide that a first-time installer can follow

We were asked to make installing sheet metal roofing so easy "that any Tom, Dick, or Harry could easily understand and follow." JNL didn't have a guide of their own yet, so we built one from scratch using CAD software. Our software team includes mechanical and civil engineers trained on CAD, and we regularly bring on college engineering interns, which means we can take on CAD work for other companies at a much lower rate than your company hiring a staff engineer.

The 3D instructional document we produced for JNL is easy enough now that someone picking up panels for the first time can follow it from a glance. The challenging part was making the instructions visual with minimal wording. Substrate prep, fastener spacing, panel overlap, and trim details all had to be drawn clearly enough that someone with no prior experience could open the guide on a phone at the jobsite, scan a page once, and get a working sense of what to do next. Diagrams do the explaining; the text only labels what the drawings already show.