Araco and Araco Fire

Two bilingual sales websites with a full back office, one codebase lineage.

Role: Designed and built
Period: Oct 2026 – present
Built with: PostgreSQL (Supabase)Row-level securitySecurity-definer functionsSupabase Auth and StorageNext.js 16React 19TypeScriptTailwind 4

Araco International supplies dewatering pumps, layflat hoses, fittings and wellpoints across the UAE; Araco Fire & Safety supplies and installs fire protection. Each has a bilingual public website and a staff admin that runs the whole sales cycle. The fire-safety site started as a fork of the first one's admin on 5 November 2026.

28k
lines of TypeScript across both sites: 2
legal entities, each with its own number series: EN + AR
public sites, with right-to-left layouts: 0
service keys needed for the core admin

What's in it

Public sites in English and Arabic: English at the existing URLs, Arabic under /ar with right-to-left layout and Arabic fonts. Per-page metadata with hreflang, JSON-LD, sitemap, llms.txt and generated share images. The Araco site replaced a Framer build.
The whole sales cycle: RFQs from the website form, then quotations, proforma and tax invoices with payments and balances, linked together so each quotation shows how much has been invoiced.
Two registered companies in one admin: Each with its own gapless number series, stamp, bank details and logo. Araco Fire is the single-company variant with its own trade licence and TRN on every document.
Procurement: Suppliers and purchase orders, and a price list of products and services (Araco Fire's Google Merchant feed lists only items that have prices).
Print sheets that edit in place: Every field on the A4 sheet is editable, with optional sections, customer acceptance block and signatories. Print width is pinned to A4 so Mobile Safari prints like desktop.
Access control in the database: Row-level security and security-definer functions in Postgres, staff roles and an audit log. The UI hides buttons, but the database is what refuses.

Reuse as a strategy

These systems share conventions on purpose. Araco's editable print sheets were modelled on Topnotch's, and Araco Fire began as a copy of Araco's admin with one company, a product-and-service price list and fire-specific wording. A written AGENTS.md in each repo keeps the rules (access control in the database, migrations run once and in order, no server key, lint is a type check) from drifting.