This is the host application BoilerPlate for the Micro FrontEnds

• ReactJS (18)
• Module Federation
• Styled-Components
• SVGR [SVG]
• Immer - State-Tree-Modification
• Zustand - Global-State-Management

exposes: {
    "./hostStore": "./src/state/hostStore",
    "./userStore": "./src/state/userStore",
},

---

hostStore:

pageTitle: string - shows in the Main Navigation Bar
currentProjectId: null - (If null then Configurator option is unable to be opened) mainNavigation: Object
{

links: array

{
    label: 'Portfolio',
    icon: <IconComponent />,
    route: routePaths.portfolio,
    allowed: true,
}

}

---

userStore:

preferences: Object
{

darkMode: boolean

}

---

Setup .env

DEVMODE=true // This activates devmode tools

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Local project pages

• Welcome
• NotFound

A component is a building block of a user interface in React.
Components can have their own state, props, and lifecycle methods, and they can be rendered to the DOM. Components can be composed of other components.

A module is a self-contained unit of code that can contain one or more components or other utility functions.
Modules are used to organize and encapsulate related functionality, making it easier to manage and reuse code.