Custom Multi-Sided Product Personalization Shopify App

Objective: Develop a private Shopify app that allows customers to customize a product on multiple sides (front, back, side) with both text and image uploads, and see a live, integrated preview on the product page. The app must also generate a final, high-quality composite image of the personalized product for the cart and order details.

Core Features:

1) Seamless Frontend Integration:
The app must inject a custom UI into the product page template to enable personalization.
This UI should include a live preview pane and a custom options menu.
The UI/UX should be clean, fast, and responsive on all devices (desktop and mobile).

2) Multi-Sided Personalization:
The app must allow for distinct personalization fields for multiple sides of a product (e.g., front, back, side).
Customers should be able to upload a logo and enter text (e.g., a phone number, a social media handle) for each side.
A toggle or tab system should be implemented to allow the user to easily switch between customizing each side.

3) Real-Time Live Preview:
When a customer uploads a logo, it must instantly appear on the correct side of the product image in the live preview.
When a customer types text, it must be rendered on the product image in real-time.
The preview must accurately position, scale, and rotate the uploaded image and text based on pre-defined zones for each side of the product.

4) Final Image Generation:
Upon adding to the cart, the app must generate a single, high-resolution composite image of the final, personalized product. This image will combine the base product mockup with all the customer's customization.
This generated image must be attached as a line item property to the product in the cart.

5) Order and Fulfillment Integration:
The app must provide the following data with each order:
The generated high-resolution composite image URL.
The URLs for each individual uploaded image.
The text inputs for each side.
The app must also generate print-ready files (e.g., high-res PNG or PDF) for each side of the product to be used for fulfillment.

Technical Requirements:

Platform: Shopify Private App
Frontend: React.
Backend: Node.js for handling image processing and uploading and API calls.
Storage: GCP Storage to store the user's uploaded images and the composite images.
APIs: Shopify Admin API
Data Storage: Utilize Shopify's APIs to save personalization details as line item properties and order metadata.

Deliverables:
A fully functional and tested Shopify private app.
Source code for the app.
Installation and setup guide.
Documentation for theme integration (e.g., Liquid code snippets to display the generated image in the cart).
Documentation on how to retrieve order data for fulfillment.