kitchen-simulator/README.md

It is a kitchen simulator (self-contained micro-frontend).

# Kitchen Configurator

## 1. Setup

Node 20 should be used.

```sh
nvm use 20
yarn
yarn start
```

You need to check **webpack.config.js** to change the API server.

```
  if (isProduction) {
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production'),
          API_URL: JSON.stringify(
            'https://kcapi-env.eba-dq5t7k2i.us-east-2.elasticbeanstalk.com'
          )
        }
      })
    );
  } else {
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env': {
          API_URL: JSON.stringify('https://api.addovisuals.com'),
          MODE: JSON.stringify('staging')
        }
      })
    );
  }
```

- `NODE_ENV`: **production** or **development** environment
- `API_URL`: the API server URL
- `MODE`: **development** environment usually needs **staging** mode. **staging** mode exposes the unfinished features to the user.

## 2. Project Structure
  Webpack is used as the module bundler. The source code is in the **src** folder.

    entry: {
      // app: './src/renderer.jsx', // For production build WITH API
      app: './src/devLiteRenderer.jsx', // For development of LiteRenderer
      vendor: VENDORS_LIBRARIES
    },

  - **index.html**: The main HTML file.

  - **[renderer.jsx](src/renderer.jsx)**: The main JavaScript file that bootstraps the React application. WTH API CALLS

  - **[devLiteRenderer.jsx](src/devLiteRenderer.jsx).jsx**: The main JavaScript file that bootstraps the React application. For development lite version without API calls. WITH MOCKS
    - **[LiteRenderer.js](src/LiteRenderer.js)**: The Lite React component that uses mock data and creates the store / catalog etc
      - [LiteKitchenConfigurator.jsx](src/LiteKitchenConfigurator.jsx)

  - **components/**: Contains all React components used in the application.
  - **styles/**: Contains CSS files for styling the application.
  - **assets/**: Contains static assets like images and fonts.
  - **utils/**: Contains utility functions and helpers.
  -