Limgro
Case studyIn production since 2026RentalConstruction

Porter Bud

A site for construction plant hire

Porter Bud hires out construction plant with an operator: tower cranes, 15–30 tonne excavators, a dozer, rollers, a grader and hydraulic breakers. We built the site around the two questions a customer actually asks — which machine fits the job, and what it costs — and around an admin panel where the owner edits the fleet, the services and the texts themselves.

Next.js
React
TypeScript
T
Tailwind
PostgreSQL
G
GSAP
The numbers
17
Machines in the catalogue
38
Pages on the site
100
Lighthouse: SEO and accessibility

Challenge

Plant is chosen by numbers: weight class, bucket volume, digging depth, the carrier class a breaker needs. Those figures end up in a contract, so they have to be right — and filterable, not buried in a description. And the catalogue is read on a phone, in daylight, on a site, by someone who wants a price today.

What we built

We built a catalogue where specifications are structured data rather than text on a card: the same values drive both the filters and the table on the machine page. Every figure was checked against the manufacturer's data sheet. Rates are shown where they are known and plainly say “price on request” where they are not. The interface is dark with a single accent colour, laid out for a screen in the sun, and every enquiry goes straight to the manager.

Result

A live site the owner runs themselves: machines, categories, services, texts, SEO and contacts are edited in the admin and appear on the site without a developer. Thirty-eight pages, 100/100 for SEO and accessibility, and a form that collects enquiries instead of an inbox.

What it does

Every screen below is the live product, captured this week.

Home — a crane, a headline and two steps onward.
Module 01

First screen

Plant hire is searched for on a phone, from the site itself, so the storefront is dark, carries one accent colour and offers two moves: look at the fleet, or get a price.

  • Exactly one screen, ending on the hazard stripe
  • Fleet brands as a moving strip
  • The figures below it are counted from the catalogue, none hard-coded
Crawler excavators — facets on the left, sorting above the grid.
Module 02

Catalogue and filters

Filters are built from the same characteristics as the table on the machine page: manufacturer, weight in bands, undercarriage. Every count is calculated without its own group, so switching an option is never shown as zero.

  • Filter state lives in the URL, so a filtered view can be shared
  • An empty group is not drawn at all, rather than a heading over nothing
  • On the phone: a dock with filters and sorting, fixed to the bottom
Liebherr R 924 Litronic — gallery, specifications and the form beside them.
Module 03

Machine page

What matters in hire is seeing the condition of the machine and knowing it will cope. So photographs open full screen in their real proportions, and the specifications sit in a table with a note that the figures are the model's, from the data sheet.

  • Full-screen viewing with arrows, swipe and keyboard
  • A shift rate, or “price on request” — no invented numbers
  • The enquiry form sits beside the price, not at the end of the page
Services — a bento of twelve jobs, from pits to drainage.
Module 04

Services

Customers rarely search for “Liebherr R 924” — they search for “dig a foundation pit” or “break out a slab”. Twelve services lead from the work to the machine that does it.

  • Every service links into the catalogue, to the machines that do it
  • A shared tone turns very different photographs into one set
  • Icons and texts are changed in the admin
On a phone

The same catalogue in one hand: filters and sorting live in a dock fixed to the bottom of the screen, where a thumb can reach them.

Under the hood

The stack, and the engineering decisions behind the build.

Front end
Next.js 16 · React 19 · TypeScript · Tailwind v4 · GSAP
Back end
Admin panel for the fleet, services and texts
Data
PostgreSQL · media storage with WebP variants
Rendering & i18n
Static pages with instant refresh after an edit
Integrations
Site analytics · enquiries delivered to the manager
Engineering highlights
  • Specifications are structured data: the same values power the filters and the table on the machine page.
  • Every figure was checked against the manufacturer's data sheet before it went live.
  • Rates are published only where they are genuinely known; the rest of the catalogue says “price on request”.
  • Fleet, services, texts and SEO are changed in the admin — the site updates without a developer.

Have a Similar Project?

Let's talk about how we can build something great for your business. We love a good challenge.

Start a Conversation

Let's Build Something Great Together

Have a project in mind? Tell us about it. We'll get back to you within 24 hours with a clear plan of action.