Admir Demir

Integris Table Configurator

reactthree.jsmuiastroapi-integration 2024 featured

Interactive 3D table configurator with real-time customization, PNG export, and ecommerce integration (WooCommerce-ready).

Integris Table Configurator

Stack

react · three.js · mui · astro · api-integration

Year

2024

Demo

Available

Goal

Create a modern, interactive 3D configurator for furniture that bridges design visualization and ecommerce checkout.

Approach

  • Frontend: React + React Three Fiber (Three.js) for rendering the table in 3D.
  • UI/UX: Material UI layout with responsive side panels and smooth controls.
  • Features: Change wood type, leg style, colors, and table width.
  • Export: Save the current scene as PNG, reset, and add selections to a cart.
  • Integration Ready: Built with clean API hooks to connect with WordPress + WooCommerce or any ecommerce backend for:
    • Product catalog sync
    • Custom price calculation
    • Cart and checkout flow

Result

A sleek, Netlify-deployed 3D configurator that can plug directly into an ecommerce platform.
Perfect for furniture shops, product designers, and online retailers.

Next Steps

  • Add custom API integration with WooCommerce REST API for real cart/checkout.
  • Extend to support multiple product categories.