Vanco ProfilesManufacturing — custom aluminum frame glass doors

A real-time door configurator and a full trade-account ordering platform — not a brochure site.

Vanco Profiles manufactures slim aluminum frame glass doors for cabinetry, closets, and wardrobes, built custom to the opening. The site needed to do more than describe the product — it needed to let trade customers configure a door exactly the way they'd spec it on a shop drawing, see it rendered accurately in every finish, and submit a real order without a phone call.

Visit the live site — www.vancoprofiles.com
4
Frame finishes, rendered in real time
1
SKU, fully configurable — width, height, hinge, handle, finish, glass
0
Stock renders — every door image is generated live

The configurator

Every door, rendered live — not a stock photo per color.

Pick a finish or glass style and the door updates instantly, in the browser — a real-time SVG rendering system built from scratch, not a swapped image.

Frame finish
Matte BlackBrushed NickelSatin BrassRose Gold
Glass tint
ClearGreyBronzeBlack
Glass style
FlatFlutedReededFrosted
Handle size
6"8"10"
Frame finish
Width × height
23 5/8"
47 3/4"
Glass
Bronze · Reeded
Updates live · rendered in-browser, no stock photos
Trade account
Order queue
Approved
#VP-1042
Pair — Satin Brass / Reeded
23 5/8" × 47 3/4"
In production
#VP-1041
Single — Matte Black / Clear
17 1/4" × 35 1/2"
Scheduled
#VP-1038
Single — Rose Gold / Frosted
20" × 42"
Shipped
Row Level Security — this account only ever sees its own orders

The trade platform

Invite-only accounts, self-serve ordering.

Trade customers apply, the business owner approves, and only then does an account get created — with its own branded invite email. From there, a customer can build and submit a real order with a live, accurate preview of exactly what they're about to have cut, without a phone call.

What made this build real

A from-scratch rendering engine, not a photo swap

Most configurators fake this with a stack of pre-rendered photos — one per color. Vanco's is a real-time SVG rendering system: a mitred aluminum frame with gradient-based material rendering that visually differentiates matte, brushed, and satin finishes (grain texture via SVG filters, directional brush-line patterns, finish-specific sheen curves), plus glass rendering with tint, fluted and reeded rib patterns, and a frosted-glass noise filter. Select a different finish or glass option and the door updates instantly — no page reload, no image swap, zero added network weight since it's all inline SVG and CSS.

Invite-only trade accounts, by design

Trade customers don't self-register. An application is submitted, reviewed by the business owner, and an account is only created on approval — a deliberate product decision, agreed with the client before any code was written, that matches how Vanco actually wants to vet who gets trade pricing and direct ordering access.

Order exactly what gets cut

The order builder lets a trade customer pick single or paired doors, enter width and height in inches and millimeters simultaneously, hinge reference, handle size, frame finish, and glass — with a live, proportionally-accurate preview of the actual door they're about to order, built from the same rendering engine. Multiple doors per submission, with the business owner notified by email the moment an order comes in.

A separate, isolated backend for a separate trust boundary

Rather than bolting trade accounts onto the client's existing Supabase project — which runs their live internal operations (leads, estimates, work orders, invoices) — a dedicated Supabase project was provisioned for Vanco Profiles alone. External B2B customers and internal staff data never touch the same project, with Row Level Security enforcing at the database layer that a customer can only ever see their own data.

How it was built

01

Marketing site, built on the real product

The brand package came together around the product itself — the accent color used across the site is pulled directly from one of the door's real finish options, Satin Brass, so the brand accent is literally a product color rather than something arbitrary. An early product-catalog pass was corrected down to the one real product Vanco actually sells, accurately configured, after it mistakenly included lines that don't exist in their lineup.

02

The configurator

Built from scratch as an SVG rendering system rather than a stock-photo swap. It went through two real iterations based on direct client feedback — moving from a flat, "cartoony" first pass to a materially accurate render, then removing an added reflection effect that read as a confusing duplicate door instead of the premium touch it was meant to be.

03

The trade platform

Application form, admin approval dashboard, invite-based account creation, password reset, and the order builder — all backed by Postgres with Row Level Security so a trade customer's data is isolated from every other account's, enforced at the database layer rather than just in app code. Payment processing (Stripe, 50% deposit / 50% on release before fabrication) was fully scoped — schema, flow, admin release step — and intentionally parked pending the client's own Stripe account setup, rather than building ahead of a dependency the client didn't have yet.

Production hardening

Real bugs, found by testing — not claimed, shown.

Every system has edge cases. These were found through live, hands-on testing before they reached a real customer, and fixed at the root cause rather than patched over.

Supabase's default email sender is rate-limited

Fine in development, not for real usage — found while testing the approval flow. Fixed by generating the auth link server-side and delivering it through the already-integrated Resend pipeline instead, applied consistently across every auth email in the system.

A failed approval crashed the entire admin page

Rewritten to fail gracefully with an inline error message instead of taking down the page.

A database constraint silently broke order submission

A check constraint didn't match the product catalog's real label text. Caught via live testing, fixed, and the failure path was hardened to roll back the parent order record instead of leaving an orphaned empty order behind.

Duplicate-submission on a slow connection

Clicking Approve twice could run the approval logic twice against the same application, throwing a confusing error on the second attempt even though the first had already succeeded. Fixed with an idempotency guard, plus disabling the button while a request is in flight.

A session-race security bug

An invite or password-reset link could, in a browser already logged into a different account, apply the password change to the wrong account instead of the one the link was actually for. Root-caused to relying on ambient session state instead of the link's own tokens — fixed by reading and applying the session explicitly from the URL every time, removing the ambiguity entirely rather than working around a symptom.

Built with

Next.js 16 (App Router, Turbopack, Server Actions)TypeScriptTailwind CSS v4Supabase (Postgres, Row Level Security, Supabase Auth)Resend — transactional email on a verified sending domainVercel — deployed from GitHub on every push

Want something built this thoroughly for your business?

Free consult, no obligation — tell us what you're working with and we'll tell you what it would take.