How Does This Jewelry Customization Site Work? Need Insights!

Sir Rolex — Tue, 14 Jan 2025 23:38:04 +0000

Hi everyone,

I came across a jewellery customization website ( https://www.militarymilestones.com/ladies-patriot-service-military-ring ) where you can design rings by selecting options like gemstones, side designs, text engravings, and more. Each time you make a selection, it sends a request to the backend and updates the preview dynamically.

Here’s how it works:

When I select something (e.g., a gemstone or a side design), the website sends a request to the backend.

The backend responds with three updated images: the front view and the two side views of the ring.

I’m trying to build a similar functionality for my website, but I’m unsure how their backend works.

Is the backend generating these images layer by layer (e.g., combining transparent PNGs for the base, gemstone, and side designs)?

Or do they have pre-rendered images for every possible combination stored and just fetch them on request?

Here’s an example of the kind of request the site makes:

bashCopy codehttps://combi.liquifire.com/combi?set=branch[army],gcolor1[garnet],view[top],id[1974]&call=url[file:production/index.chain.txt]&scale=width[800]&sink=format[png]
It looks like they’re using some kind of rendering engine (maybe LiquiFire?) to process and combine layers dynamically.

I’d appreciate it if someone could explain how this system works under the hood! Is it feasible to build such a backend from scratch using tools like Node.js, Python, or something similar? Any advice or insights would be super helpful!

Thanks in advance!

DEV Community: Sir Rolex

How Does This Jewelry Customization Site Work? Need Insights!