Maker Loop - Product Configurator

I recently launched the Maker Loop website ( https://makerloop.io ) now that I'm happy with the design. It utilizes Medusa.js as the headless CMS and uses Next.js for the storefront, and it's all hosted on my home server within docker containers.

The storefront is my first step towards selling some of my work. My first product is a Hex Wall Planter ( https://makerloop.io/us/products/ml-hex-planter-mk-1 ) that uses a self wicking cotton to automatically water the plant. The intention is to purchase multiple of them and create a design on the wall. To help facilitate that I've created a configurator with each of the variations.

It even supports an AR mode which was a bit tricky to implement since it's multiple models that have to be merged into one. It has a separate node server that leverages gltf-transform to take in a configuration layout. It loads each planter into its location according to the layout, and then does a clean up and merging of the data. For example if you have 2 Beach Blue planters, it will only keep 1 instance of the Beach Blue texture instead of a copy of 2. It then also compresses everything with Draco compression (for glb only) to further reduce the size of the end model. This whole process dramatically decreases the file size, making the QuickLook (iOS) and SceneViewer (Android) much happier.

If you're interested in trying out a design of your own, send me a photo of it, I'd love to see your creativity in action. https://makerloop.io/us/configurator