Samer Noufal
All Projects
LiveWeb App

Door Industry Configurator

A 3D door configurator built with React Three Fiber: dimensions, panel styles, materials, glass types and opacity, hardware and finishes, plus transoms and sidelites — with weight, R-value, STC rating and opening size calculated as you go. Built to show how CPQ configurator logic transfers to another manufacturing vertical.

Live Demo

Screenshots

Key Highlights

  • Real-time 3D preview with orbit controls
  • 5 panel styles including a full-glass option
  • 4 materials with per-material colour presets
  • Glass type, opacity, transom and sidelite options
  • Engineering specs: weight, R-value, STC rating, opening size

Tech Stack

React 19TypeScriptThree.jsReact Three FiberNext.jsTailwind CSS

Tags

ReactTypeScriptThree.js3DWeb ConfiguratorManufacturing

Related Projects

Interactive DemoLiveWeb App

Container Configurator

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

ReactTypeScriptThree.js3D
View Details →Live Demo
Interactive DemoLiveWeb App

Web CAD Viewer

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

Three.jsWebGLReact Three FiberCAD
View Details →Live Demo
MixFltCoolHeatFanAttenΔp 3.45 in.wg5,000 CFM | 12.5 Tons | 8.2 BHP
Interactive DemoLiveWeb App

HVAC AHU Configurator

Air handling unit configurator with section-by-section component selection, pressure-drop analysis and live engineering calculations.

ReactTypeScriptHVACConfigurator
View Details →Live Demo