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
• js/ is the folder where all the js files are, the most important one is skeleton.js the script where threejs is instanciated and where the meshes are placed using the bones in the GLB file.