📝 Lack of code documentation

  // @ts-check

  /**
   * Print person's info
   *
   * @param {Object} person
   * @param {string} person.name
   * @param {string} person.address
   *
   * @param {Object} option
   * @param {number} option.times
   *
   * @returns {void}
   */
  function printResume(person, option) {
    const { times } = option
    for (let i = 0; i < times; i += 1) {
      console.log(person.name)
      console.log(person.address)
    }
  }

🗂 Missing config folder

  export const IS_PROD = process.env.NODE_ENV === 'production'

  export const SERVER_URL = IS_PROD
    ? `${process.env.SERVER_URL}`
    : `${process.env.LOCAL_SERVER_URL}`

⚛️ Problematic abstraction

Duplication is far cheaper than the wrong abstraction

0️⃣ Zero-config CLI

yarn run trade liquid-uat -> yarn start trade

yarn run home liquid-uat -> yarn start home

yarn build trade liquid-uat -> yarn build trade

yarn build home qurytos-prod -> yarn build home

⚙️ .env should not be checked in

Violate third factor of scalable software architecture
The 12 factor app

😱 Eject CRA

// webpack config alias

{
  'accounts': 'accounts/src',
  'core': 'core/src',
  'home': 'home/src',
  'invest': 'invest/src',
  'chart': 'chart/src',
  'tokens': 'tokens/src',
  'trade': 'trade/src',
}

Solution

React App Rewired or Fork

📦 Monorepo structure