E-Commerce + Product VisualizerProduction
Custom Home Configurator
A storefront for build-to-order homes where buyers pick exterior, kitchen and bathroom packages and see their home rendered with each choice — plus the admin tools that turn a 3D artist's renders into the configurator.
- Buyers see every choice rendered
- Image compositing off the main thread
- Ported from Angular, no backend rewrite
E-commerce & retail · Updated
The challenge
Buyers were choosing a build-to-order home's finishes from dropdowns and imagining the result. The client's 3D artist was already rendering every package, but there was no way to put those renders in front of a buyer at the moment of choice — and no way for staff to keep them matched to a catalog that keeps changing. The platform itself also had to move off a legacy Angular app without rewriting the backend it talked to.
What we built· with the Bracket Mind team
- "Design your home" on product pages: buyers pick packages and see a pre-rendered image of the result, kept in sync with the option dropdowns, price and quote — and a share link restores any configuration
- An importer that turns the 3D artist's config file and file names into scenes, layers and stacking rules, matches packages to catalog items by name, and re-imports without losing staff edits
- Layered renders composited off the main thread: a two-worker pool flattens PNG layers on OffscreenCanvas and skips anything whose layers haven't changed
- A .NET backend for drafts, publishing and version history, with optimistic concurrency — a stale save gets a 409 instead of overwriting a colleague's work
- A status view that flags unconfigured, stale or orphaned items as the catalog changes
- The original port from Angular to Next.js, keeping the existing API and XML payload formats, and a multi-step project workflow with Zod-validated steps
- An embeddable storefront: partner sites add one script tag and get the product pages in an auto-sizing iframe, with framing locked to approved domains
How it fits together
Buyers and partner sites
Product pages
Pick packages and see the home rendered with each choice
Embedded storefront
One script tag; framing locked to approved domains
In the buyer's browser
Compositing workers
Two Web Workers flatten PNG layers on OffscreenCanvas
Staff tools
Importer
Turns the 3D artist's config and file names into scenes, layers and stacking rules
Status view
Flags unconfigured, stale or orphaned items
Backend
ASP.NET Core + EF Core
Drafts, publishing and version history; a stale save gets a 409
Why it matters
Buyers see the home they're configuring at the moment they choose, instead of reading a spec sheet and hoping. And keeping it current isn't a developer's job: import the artist's renders, fix what the status view flags, publish a new version — with every earlier version kept.
Our founder's part
Haseeb Attaullah: Engineer on a three-person team — the original Angular-to-Next.js port, the project-creation workflow, and the product visualizer end to end: TypeScript front end and .NET backend.
Building something like this?
Tell us what you're building. We reply within 0–4 hours with honest feedback on scope, timeline and whether we're the right fit.