Ram Builder
Overview
Hydrapower's cylinder-sizing spreadsheet and CADENAS configurator, brought together as Ram Builder. It's a fast, static Astro microsite where engineers and resellers can size an R210 series hydraulic ram, configure the exact part and request a quote.
Web Design & Development
Hydrapower manufactures and supplies hydraulic cylinders to industry across New Zealand, selling direct and through a network of resellers. Specifying one of their R210 series rams used to mean two separate jobs. First, work out whether a cylinder would do the job with a spreadsheet. Then build the actual part in a CADENAS PARTsolutions configurator somewhere else. Ram Builder puts both steps on one site at rambuilder.co.nz. You check the numbers, build the exact cylinder, download 2D and 3D drawings and request a quote, all without losing your place.
We deliberately kept it small. The calculator is pure arithmetic, and accounts, CAD downloads and quote requests already live inside CADENAS. That means there's no CMS, database or server code to look after. Ram Builder is a static Astro site of three pages, with a small amount of TypeScript for the parts that respond to input. It's served from New Zealand by nginx, and the content-hashed assets are cached for a year. It loads instantly whether someone's in an office or standing in a workshop with a phone.
The calculator
The calculator was ported from Hydrapower's own spreadsheet, cell by cell. We transcribed the formulas exactly as written instead of re-deriving them, so the site agrees with numbers Hydrapower's team already trusted. That even includes the spreadsheet's habit of using two different values of pi. Unit tests check the site against Hydrapower's worked example. Enter pressure, flow, bore, rod and stroke, and it returns input power, extend and retract force, volume, time and speed. It also gives an Euler buckling factor for tube rear and front mounts. Anything below Hydrapower's 2.4 threshold is flagged in red, with a clear prompt to seek expert advice.
The visual design treats the page like a spec sheet you can operate. Every number is set in IBM Plex Mono, and results sit in datasheet rows divided by hairline rules, which is how engineers already read this information. Hydrapower's brand orange is too light to carry text on a pale background, so it fills the main actions while a deeper orange handles links, labels and focus states. We checked every colour pair against WCAG AA, both on paper and in the rendered page.
The configurator
The configurator is Hydrapower's CADENAS PARTsolutions portal, embedded at full height so the whole parameter list scrolls with the page. On phones and small tablets, Ram Builder offers to open it in a new tab instead, because CADENAS warns that its portal doesn't always work well inside a cross-domain frame on iOS.
Resellers matter here. When a reseller sends a customer to Ram Builder, a source tag in the address follows that customer through every page and into the configurator's reporting. We deliberately carry it in the URL rather than in browser storage. If the site is ever embedded on a reseller's own page, modern browsers partition or block that storage. A storage-only tag would quietly disappear and credit the reseller's lead to Hydrapower, which is exactly what the feature exists to prevent.
Search engines and AI assistants get the same care as people. Every page has structured data describing the tool and the R210 range, plus a sitemap, robots rules and an llms.txt file. Every figure comes from Hydrapower's own spreadsheet and configurator. Nothing has been padded to look impressive.
Technology
TypeScript elevates JavaScript with powerful type checking that catches errors before they reach users. We implement this superset when building complex applications that demand exceptional reliability. Its intelligent tooling accelerates development through immediate feedback and enhanced documentation, delivering robust solutions that withstand changing requirements.
TailwindCSS revolutionises frontend development with its utility-first approach that accelerates the creation of distinctive, responsive designs. We leverage this framework to build interfaces with perfect visual consistency across devices. This approach results in faster development cycles and leaner code – delivering websites that look brilliant and perform exceptionally well.
Astro builds websites that arrive as finished HTML rather than a JavaScript bundle the browser has to assemble first. Interactive pieces load only where a page needs them, so a content-heavy site stays fast without giving up the modern component tooling we use everywhere else. Static output also means fewer moving parts to host, patch and keep secure.
Got a project in mind?
Have a chat with The Caretakers.
We’re based in Auckland and work remotely with businesses across New Zealand. Tell us what you’re building, and let’s make it fast, secure, and a pleasure to use.
Call us, or use the form – we promise not to make it weird.