All work WEB PLATFORM / AGRITECH live

23  /  WEB PLATFORM / AGRITECH

IMAGO Engineering

Poultry farms want throughput and payback, investors want the round, and one site had to serve both.

A case study by HM Ammar — Digital Architect & Head of IT, Kuala Lumpur

July 2026 – September 2026Next.js 16 (App Router, Turbopack)React 19TypeScript (strict)Tailwind CSS v4Framer MotionBitrix24 RESTModel Context ProtocolHostinger

The challenge

IMAGO sells industrial bioreactor plants to poultry farms and raises investment at the same time. A farm operator wants throughput, footprint and payback. An investor wants the round and a way to book a call. I had one site to serve both readers, keep the investor pages out of the search index, and absorb dozens of precise change requests arriving as numbered PDFs without regressing.

What I built

A Next.js 16 site of roughly 37,400 lines across 228 TypeScript files: a chrome-wrapped public site plus four investor landing pages that sit outside the shared route group, skip the global layout and smooth scroll, and compose their own chrome. Every form posts to one `/api/lead` route I wrote, which normalises ten form shapes into a single contact record and creates a Contact and a Deal in Bitrix24, routing investor enquiries into their own pipeline. On top of the marketing layer I put an agent-readiness stack: a JSON-RPC MCP server, `.well-known` discovery manifests, and markdown content negotiation on every page.

How it works

WHILE THE VISITOR WAITS Ten form shapesseven components post here /api/leadten shapes, one record Answered at oncethank-you page, no wait AFTER THE RESPONSE Forwarded, unawaiteda long-lived Node server Contact and Dealcreated in Bitrix24 Investor leads into their own pipeline If the handoff fails the whole lead is logged, so a restart can recover it
The mechanism, drawn from the build.

What it looks like

IMAGO Engineering — screenshot
Captured liveWEB PLATFORM / AGRITECH

The detail

01

One lead route

Ten distinct form shapes across seven components post to `/api/lead`: feasibility, poultry qualification, general inquiry, universal contact, four investor landing pages, the investor popup and the vacancy application. My route composes them into one name plus a readable summary of whichever fields were supplied, attached to both the Bitrix24 Contact and the Deal. I catch investor leads two ways, by an exact-match set of `source` strings and by the `contactingAs` value on the shared contact form where an investor is otherwise indistinguishable, and give them the category ID for the dedicated pipeline.

02

Answer, then forward

The thank-you page was taking about thirty seconds. The cause was two sequential Bitrix round trips, with the deal creation firing the account's own automation rules. My route now validates fully, returns immediately, and hands off to the CRM unawaited, which is safe only because this runs as a long-lived Node server rather than a serverless function that would freeze after the response; my catch handler logs the whole lead so a restart mid-flight leaves it recoverable.

03

Readable by agents

My `proxy.ts` serves four discovery manifests that cannot be App Router routes, because dotfolders are not routable: an RFC 9727 api-catalog linkset, an MCP server card, an agent-skills index and a message-signatures directory. Any GET carrying `Accept: text/markdown` receives the page as markdown instead of HTML. I hand-wrote `/api/mcp` as a JSON-RPC 2.0 server exposing four read-only tools, and a small client component registers two site actions with the experimental in-browser agent API, no-opping where it is absent.

04

Cache headers

I serve page routes `private, no-cache, must-revalidate`. The App Router reserves `Vary` for RSC and drops the `Accept` value, so a shared CDN cannot tell the markdown variant from the HTML one, and a stale copy had been pinning old headers. I inline the CSS because PageSpeed showed the 27.6 KiB chunk costing 630 ms on mobile.

05

A design lab

The client called the ROI block the page's main attention grabber, so I built `/lab/roi` to render twelve competing versions of it from one registry: arc gauges, range bars on a shared scale, a scroll-scrubbed ascent, a growth curve, layered depth cards, each with a one-line note on what it encodes. Option 06, the connected flow rail, was chosen, and I promoted it into production; the registry now imports it back from the production component so the lab cannot drift from what shipped. The route is still live, unlinked and noindexed.

The outcome

It is live at www.imagoengineering.com, deployed from main on Hostinger. The production response carries the exact Link header I compose in `proxy.ts` and the cache-control I wrote in `next.config.ts`, so the deployed site is this repository at the tip of main. Every form now creates a Contact and a Deal in the client's Bitrix24 account, investor enquiries land in their own pipeline, and the thank-you page appears immediately instead of after the CRM round trip. I built it over 128 commits with a second developer, who wrote the four site forms, one of the investor landing pages and the investor data room; I wrote the lead route, the proxy and cache layer, the MCP server and the ROI design lab, and did the integration.