Shopify app architecture question

Hi, am new to shopify development and had a few questions to ask

Im making an app that will be embedded in the product page which will access the camera that takes an image of the shopper and return their body measurements, then recommend the appropriate apparel sizing

Im confused on what is the most appropriate approach; coding the entire app within liquid (vanilla html,css,js) or code my app out elsewhere and embed it within an iframe

Have been looking at other shopify apps and most of them uses iframe approach, but i did see apps that does not

My thinking is that if code it with liquid, i can easily get the product metafields that will contain the sizing data from the admin (have the admin coded out in polaris to input sizing data of each products that will save the size data in the metafields), while approaching it with iframe means i have to host all the data within my own servers, i wish to make the process as simplified as possible and give more control to the store owners hence am leaning towards liquid approach

But coding in liquid is quite painful as the app looks very different, when i code things out in my local html server and then migrate it to my shopify extension liquid code theres some styling that gets affected and I think it is due to shopify overwritting the styles and im worried there this could be a big issue down the road where I cannot control the look of the app (also my skill is quite lacking in html css js as im used to coding in react and using ui frameworks)

Additionally I am not sure if i am right but when publishing the app on shopify, iframe approach would be much more stringent compared to using the liquid approach recommended by shopify docs.

Could any developer give me some advice on what I should do, or if there is anything wrong with my way of thinking do please correct me.

If you want to add dynamic elements to their themes without having to interact with Liquid templates or code, you need to build theme app extensions