Patio3D · Client product
Complex choices.
One coherent design.
A browser-based patio cover configurator that turns real product systems into interactive 3D designs with engineering logic, material costs, and shareable configurations for sales teams and shoppers.
- My role
- Lead Frontend Engineer
- Focus
- 3D / Engineering
- Context
- Production configurator
Proprietary client product built while I was employed by RedLayers. This case study explains the parts I personally designed, built, maintained, or improved. Source code is not included.
A small explanation you can play with
One choice. A connected system.
Change the width or roof, then copy the link. The drawing follows your choices, and the URL brings the same setup back.
Your selections are saved in this page’s URL.
The engineering idea. Geometry and interface read the same state. The URL stores the choices needed to restore it.
An original illustration. Built for this portfolio. It is not the production configurator and includes no manufacturer rules, pricing, or proprietary source code.
The product behind the interface.
Patio3D helps patio cover dealers close faster by letting shoppers and sales teams design real covers in the browser—backed by built-in engineering and manufacturer systems such as Alumawood and Elitewood.
My work focused mainly on the 3D experience and admin panel, while also contributing to the product menu and the engineering behind different patio systems.
My part in making it work.
I built and maintained major parts of the production 3D configurator, from geometry and configuration behavior through admin workflows and performance-sensitive update paths.
Built and maintained major parts of the production 3D configurator using Nuxt, Vue, Tres.js, and Three.js.
Developed dynamic geometry and configuration behavior across multiple patio systems, including combined roof and structural options.
Implemented and maintained admin workflows and product-menu logic connected to complex engineering rules.
Created shareable and restorable designs through URL-driven state.
Optimized expensive address, pricing, and search update paths so meaningful selections trigger updates instead of every keystroke.
Diagnosed and resolved rendering, state-synchronization, and performance issues across complex interactive configurations.
The hard parts.
- Representing multiple patio systems with different geometry and engineering rules without turning the UI into a collection of special cases.
- Keeping computational geometry responsive while users change dimensions, roof types, materials, and structural options.
- Making complex design state portable through a URL while keeping it predictable and debuggable.
What the work enabled.
- Interactive 3D configuration
- Shareable URL-driven designs
- System-specific engineering logic
- Production admin tooling
Tools behind the work
- Nuxt 4
- Vue 3
- Tres.js
- Three.js
- three-bvh-csg
- three-mesh-bvh
- qs
Another kind of frontend challenge