All Projects
LiveWeb App

Door Industry Configurator

A 3D door industry configurator built with React Three Fiber that lets users design custom doors in real time. Configure dimensions, panel styles (flat, 2/4/6-panel, full glass), materials (wood, steel, fiberglass, aluminum), glass types and opacity, hardware (lever, knob, pull bar in multiple finishes), and extras like transoms and sidelites. Calculates weight, R-value, STC rating, and overall opening size. Demonstrates CPQ configurator skills for the door and window manufacturing vertical.

Screenshots

Key Highlights

  • Real-time 3D preview with orbit controls
  • 5 panel styles including full-glass option
  • 4 materials with per-material color presets
  • Glass type, opacity, transom, and sidelite options
  • Hardware selection: handle style, finish, hinge side, deadbolt
  • Engineering specs: weight, R-value, STC rating, opening size

Tech Stack

React 19TypeScriptThree.jsReact Three FiberNext.jsTailwind CSS

Tags

ReactTypeScriptThree.js3DWeb ConfiguratorManufacturing

Related Projects

LiveWeb App

Container Configurator

Interactive 3D container product configurator with real-time dimension controls, material selection, and live preview.

ReactTypeScriptThree.js3D
LiveWeb App

Web CAD Viewer

Browser-based 3D CAD viewer with wireframe mode, exploded view, cross-section slider, and view presets.

Three.jsWebGLReact Three FiberCAD
MixFltCoolHeatFanAttenΔp 3.45 in.wg5,000 CFM | 12.5 Tons | 8.2 BHP
LiveWeb App

HVAC AHU Configurator

Air Handling Unit configurator with section-by-section component selection, pressure drop analysis, and real-time engineering calculations.

C#WPFHVACConfigurator