RosmanNatalie

I want to develop an app in Shopify. I haven't enough experience with React and Next.js but I still have to code this application. I completed the training in accomplishing my skill set: https://adevait.com/shopify/4-shopify-developer-skills-and-their-practical-application But what I want to do is different than the sample application. By using Google Puppeteer in the Shopify application, I want to take unused css codes on the Shopify site where the application is installed and create a visual structure that the user can download. This is the code that adds unused css files on the specified site to the file containing the code: const puppeteer = require('puppeteer'); const util = require('util'); const fs = require("fs"); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.coverage.startCSSCoverage(); await page.goto('https://kolayoto.com/'); // Change this const css_coverage = await page.coverage.stopCSSCoverage(); console.log(util.inspect(css_coverage, { showHidden: false, depth: null })); await browser.close(); let final_css_bytes = ''; let total_bytes = 0; let used_bytes = 0; for (const entry of css_coverage) { final_css_bytes = ""; total_bytes += entry.text.length; for (const range of entry.ranges) { used_bytes += range.end - range.start - 1; final_css_bytes += entry.text.slice(range.start, range.end) + '\n'; } filename = entry.url.split('/').pop(); fs.writeFile('./'+filename, final_css_bytes, error => { if (error) { console.log('Error creating file:', error); } else { console.log('File saved'); } }); } })(); Since this code is a JavaScript code, I don't know how to code it with React.js and Next.js, and how to design an interface with Apollo and Polaris. As I am inexperienced in these matters, I ask you to guide me. I am waiting for your support, thank you very much in advance.