EuroChem
A speculative rebuild of an agricultural chemical catalogue, where every efficacy claim is lifted verbatim from the approved label.
Overview
An unaffiliated rebuild of eurochem.com.au, crawled 10 August 2026 and built as a pitch. The product catalogue is generated rather than written: every product name, active constituent, use statement, pack size and PDF link is EuroChem’s own published wording, unedited. Two things are layered on top and both are visible in the source. Crop navigation is derived by matching crop names inside EuroChem’s own use statements, and the site says plainly that it is a navigation aid rather than a registration claim. CPPU 10 carries verified regulatory data because it is the only product whose technical brochure has readable text. That restraint is a legal requirement as much as an editorial one: advertising a registered agvet chemical inconsistently with its approved label is an offence under the Agvet Codes, so there are no invented APVMA numbers, rates, withholding periods or pack sizes, and no testimonials at all. One correction is applied in code rather than baked into the generated data, so it stays reviewable: EuroChem’s product page reads Srobilurin where their own listing page reads Strobilurin. Measured against the current site on a throttled mid-range Android, this build loads in 0.9 s against 20.1 s, at 93 KB against 2.7 MB, over 6 requests against 79. Available to license or commission.
Screenshots
What I Delivered
- A product catalogue of 112 routes generated from the supplier’s own published data.
- Category and crop browsing, product detail pages, downloads, about and contact.
- A browser-measured audit of the existing site, published as AUDIT.md with evidence.
- A written design direction produced before any code.
- Before-and-after screenshot pairs and full-page captures of both sites.
- A generated sitemap and a robots file that blocks indexing until a real launch is approved.
Key Features
- Generated catalogue where every product string is the supplier’s own published wording, unedited.
- Crop-based navigation derived from the use statements themselves, and labelled on the page as a navigation aid.
- Verified regulatory block on the single product whose brochure text could actually be read.
- Label-faithful product pages carrying directions for use, restraints and general instructions as separate components.
- Placeholder rendering for anything unverified, so no rate or withholding period is ever implied.
- A single reviewable correction applied in code rather than in the generated data.
Stack & Tooling
- React 18 with Vite 6 and react-router-dom.
- Tailwind CSS 3 with tailwind-merge and an OKLCH token palette.
- lucide-react for iconography.
- No UI kit and no animation library in the page itself.
- A scripted SEO step generating sitemap.xml and robots.txt at build time.
- Vercel hosting.
Integrations & Backend
- Product data generated from a crawl of the live site, with the crawl date recorded in the source.
- Direct links to the supplier’s own label and brochure PDFs.
- No analytics and no third-party embeds in the concept build.
Performance / SEO / Accessibility
- Lighthouse mobile: 99 performance, 100 accessibility, 100 best practices, 100 SEO, with SEO measured under a crawlable build.
- Throttled mid-range Android: 0.9 s load, 93 KB and 6 requests, against the current site at 20.1 s, 2.7 MB and 79 requests.
- Contrast checked on every text node across 13 pages at three widths, resolved through canvas pixels because the tokens are OKLCH. Zero failures.
- The C4 footer badge and its animation library load only as the footer approaches the viewport, keeping the measured page weight intact.
Challenges & Constraints
- Advertising a registered agvet chemical inconsistently with its approved label is an offence, so the build could carry no invented figure anywhere. Every claim had to be traceable to a label or brochure, which set the content model before any design work started.
- Only one product brochure had machine-readable text, so verified regulatory data exists for exactly one product and the rest had to visibly say so.
- Deriving crop navigation from use statements without turning it into an implied registration claim, which is handled by labelling it on the page.
What I'd Improve Next
- Transcribe the remaining technical brochures so more than one product can carry verified regulatory data.
- Confirm the derived crop mapping with someone who holds the registrations.
- Wire the contact form to a live endpoint.
- Flip the build to a crawlable robots file only if the supplier approves a real launch.