Kitchen Configurator

1. Setup

Node 20 should be used.

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: The main JavaScript file that bootstraps the React application. WTH API CALLS

• devLiteRenderer.jsx.jsx: The main JavaScript file that bootstraps the React application. For development lite version without API calls. WITH MOCKS

  • LiteRenderer.js: The Lite React component that uses mock data and creates the store / catalog etc
    • 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.