Overlay one image over another with bit of image processing based on different shapes

I am working on a project where user will upload a design(image in .png, .jpg, .jpeg) and we will automatically create multiple images of that design on different products like tshrit, mugs, mobile case.
For example here is the design and here are the images I have created by me using photoshop. and I am creating this again and again for every design which requires a bit of zooming, croping, curving and color correction etc and saving it in .webp. But I have created a placeholder which makes things easy in photoshop but I am planning to introduce more designs and more images of single product. And with every design, my work increases exponentially.

So I want to automate this process using nextJS(typescript) and create all images on the server after user uploads a design.

If possible, can anybody share any library or the approach. I am open to creating lamda function in other programming languages also if work can be reduced substantially but always prefer javascript/typescript as here community is huge.

I have an approach in mind.
As I have the photoshop file with me, so I have the bottom and top layers with me. I can merge the uploaded designs with bottom and top layer and then do the remaining processing, but don’t know, how to move image with reference to another image, how to curve it like in case of shower curtain or tshirt, how to give 3d effect like given in tshirt.

Incase you want to try/test it, you can see redbubble.com, register as artist and upload any image, they are already doing it successfully. I want the same functionality.

Any help would be highly appreciated.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here