All work
Manufacturing · Windows & doors

FourlinQ

A windows-and-doors platform for the Philippine market: a 21-system catalogue, a five-step configurator backed by real 3D models, a retrieval-grounded assistant that will not quote a number it cannot cite, and a staff CMS with a lead inbox behind it.

Visit the live site
FourlinQ share image
FourlinQ screen 1
FourlinQ screen 2

Stack

  • React 18 · TypeScript · Vite · React Router 6
  • Express 5 API · PostgreSQL via node-postgres
  • pgvector 768-d embeddings for retrieval
  • Three.js · @react-three/fiber · drei
  • MapLibre GL · Tailwind 3 · shadcn/ui
  • PM2 cluster, CORS-locked to fourlinq.ph

What we built

Five-step design tool

Type, material, finish, glass and size from 400 to 3000 mm in 50 mm steps, with panel layouts for sliding doors. It saves to the API and always writes local storage as well, so a configuration survives an API failure rather than being lost.

src/pages/DesignTool.tsx

Interactive 3D system viewer

One owned GLB per system. The chosen finish is applied to the frame meshes only — hardware and glass keep their own materials — and the baked open/close animation plays on demand.

src/components/3d/Window3D.tsx

LinQ assistant, grounded in the catalogue

A streaming assistant that answers from retrieved catalogue content and accepts a photo of the visitor's wall. The prompt explicitly forbids inventing prices, U-values, decibel figures or warranty terms — the failure mode that matters most for a manufacturer.

src/components/chat/ChatPanel.tsx

Scroll-pinned benefit sequence

A 186-frame window animation that advances by highlighted component rather than raw scroll position, so the explanation stays legible. Desktop pins the section; mobile switches to swipe.

src/components/home/ScrollWindow.tsx

Consent-gated analytics

Page views, scroll depth, clicks and configurator changes are first-party and only ever sent after the visitor accepts. Declining, or not answering, sends nothing at all.

src/components/shared/CookieBanner.tsx

Showroom maps and consultation booking

Three branches on MapLibre with directions links, sales numbers that open Viber on mobile, and a six-step qualifier covering project type, timeline, product interest, location and presentation mode.

src/pages/Brand.tsx

Staff CMS and lead inbox

Role-gated admin over projects, news, products, aluminium systems, documents and media. Contact, quote and configuration enquiries land in one inbox and move through new, contacted, quoted, then won or lost.

src/pages/Admin.tsx

Gallery that fails safe

The project gallery starts from the static catalogue and merges CMS rows over it, so a missing or broken CMS record can never delete a live gallery item. Admin cover art and ordering still win when present.

src/pages/Inspiration.tsx

Integrations

  • PostgreSQL with pgvector cosine retrieval
  • Nodemailer SMTP notifications; the enquiry still saves when mail is unconfigured
  • MapLibre GL with keyless CARTO basemap tiles
  • Multi-provider LLM chain, first configured key wins
  • Viber deep links and Google Maps directions

Want the same for your floor?

Start a project