Building a 3D Furniture Configurator from Scratch: A Solo Developer’s Journey with React & Three.js

Panda Pishet_Kod — Wed, 22 Apr 2026 16:40:15 +0000

Hey Dev Community! 👋

Most people see a wardrobe or a cabinet as just a few pieces of wood. As developers, we see them as a complex system of coordinates, arrays of shelves, material thickness constraints, and real-time geometry calculations.

For the past few months, I’ve been working solo on a project called M-Click — a web-based 3D furniture configurator. I wanted to create something fast, free, and accessible directly in the browser.

Why build this?
Existing professional CAD software is often expensive, heavy, and has a steep learning curve. I wanted to bridge the gap between "I have an idea for a locker" and "Here is a 3D model with exact dimensions" without the friction.

The Tech Stack
I decided to go with a modern, reactive stack to ensure the UI stays in sync with the 3D scene:

Core: React + TypeScript (for type-safe geometry logic).
3D Engine: @react-three/fiber & @react-three/drei (the gold standard for Three.js in React).
State Management: Zustand (perfect for handling complex nested objects like cabinet sections and shelf distributions).
Styling: Tailwind CSS.

Challenges I’ve Faced (and solved)
One of the trickiest parts was the automatic shelf distribution logic. When you change the height of a section or add/remove a door, the system needs to recalculate the spacing for every internal component while respecting the material thickness (e.g., 16mm or 18mm chipboard).

In the code, I’ve structured this using a modular approach. Every part of the furniture is a Board component that knows its dimensions and position relative to the parent section. This makes the whole system highly scalable—adding a new type of hardware or a specific door opening mechanism becomes a matter of adding a new component to the logic tree.

Current Status: Solo, Free, and Open for Feedback
I am developing M-Click entirely by myself, fueled by enthusiasm. The project is currently in its early stages and is completely free to use.

The main site is still under heavy construction, but you can already check out the early version here:
👉 https://m-click.dev

Why I’m here
Building in a vacuum is dangerous. I need your "developer eyes" to help me make this better.

How does the 3D performance feel on your machine?

Is the UX for configuring sections intuitive?

What features would you like to see in a free furniture tool?

I also share the "behind the scenes" updates and daily struggles of a solo dev in my Telegram channel:
📢 https://t.me/mebel_click

I’d love to hear your thoughts in the comments! Should I write a more detailed deep-dive into the 3D math behind the shelf distribution?

DEV Community: Panda Pishet_Kod

Building a 3D Furniture Configurator from Scratch: A Solo Developer’s Journey with React & Three.js