What does each file do?

As I used React to design and implement the UI there is two main folders. The /src folder which is where we can find all the files used by react and will be compiled inside the /public folder.

Inside the /src folder we can find:

• index.js which is the root of react and will render everything inside the DOM to <div id='root'></div>.
• App.js is the main Component of the customizer and will call all the sub-Components.
• components/ is a folder with all the components that I used. The main important components are the following:
  • Category.js will display the different categories of objects (Heads, Torsos, Arms, Hands, Legs, Foots, Poses and Stands).
  • Selector.js will display the actual library of content in each category.
  • PageLoader.js is a loader (with the rotating logo), when the page loads, similarly Loader.js is a loader for the MMF upload, and PartLoader.js is a loader for loading each meshfile.
  • Buttons.js is responsable for the buttons on the bottom-left corner.
  • Popup.js is a component used to display all the popup messages.
• css/ is a folder with all the css files, each components has it's own css file with the same name
• library/ is a folder with the library of all the elements in json format. Here's a generic example of a element in the library:

{
    "name": "Name displayed in the UI",
    "img": "vignette_image.png",
    "file": "name_of_glb_file",
    "author": "The Author",
    "description": "Small description",
    "rotation": {
      "x": 0,
      "y": 0,
      "z": 0
    },
    "scale": 1,
    "link": "https://myminifactory.com/link-to-element",
    "premium": false
  }

---

Inside the /public folder we can find:

• index.html is the target of the react
• css/ folder as a few css files but most of the css is writting in react
• models/ is the folder where all the glb files are statically hosted for the moment
• img/ is the folder with all the images for the vignettes and the categories