Script - Create React App tooled with Vite

#!/bin/bash

GREEN=$'\033[7;32m'
RED=$'\033[7;31m'
CYAN=$'\033[7;34m'
NC=$'\033[0m'
FILE="src/App.jsx"

stage1() {
while true;do
    echo
    echo "${GREEN}"" Enter the name of your new ${NC}${CYAN} Vite / React ${NC}${GREEN} app > ""${NC}"
    read -r APP_NAME
    if [ -z "$APP_NAME" ]; then
      echo
      echo "${RED}" The name cannot be empty "${NC}"
      echo
      stage1
    fi
    echo
    echo "${GREEN}"" Your app will be named ${NC}${CYAN} ${APP_NAME} ${NC}${GREEN}, proceed? (yes/no/abort): ""${NC}"
    read -r yno
    case $yno in
        [Yy]*) stage2;;
        [Nn]*) continue;;
        [Aa]*) exit 0;;
            *) echo "Try again";;

    esac
done
}

stage2() {
echo
if [ -d "${APP_NAME}" ] ; then
  echo "${RED}" Directory already exists! "${NC}"
  echo
  stage1
else
  echo
  echo "${GREEN}" Creating React app "${APP_NAME}"... "${NC}"
  echo
  yarn create @vitejs/app "${APP_NAME}" --template react
  cd ./"${APP_NAME}" || exit 0
  echo
  echo "${GREEN}" Installing Vite dependencies... "${NC}"
  yarn
  echo
  echo "${GREEN}" Installing prop-types... "${NC}"
  yarn add prop-types
  echo
  echo "${GREEN}" Installing eslint and prettier... "${NC}"
  yarn add -D eslint prettier
  echo
  echo "${GREEN}" Installing eslint peerdeps... "${NC}"
  npx install-peerdeps -D @gbrachetta/eslint-config -Y
  echo
  echo "${GREEN}" Modifying files... "${NC}"
  jq '.eslintConfig.extends="@gbrachetta/eslint-config" | .+ {prettier: "@gbrachetta/prettier-config"} | .scripts += {lint:"eslint ./src/*.jsx --ignore-path .gitignore", "lint:fix":"npm run lint -- --fix", format:"prettier --write ./src/*.jsx \"{,!(node_modules)/**/}*.js\""}' package.json > tmpfile && mv tmpfile package.json
  echo
  sed -i '' 's/<button /<button type="button" /g' "${FILE}"
  sed -i '' 's/(count) => count/(c) => c/g' "${FILE}"
  yarn format
  yarn lint:fix
  echo "${CYAN}" Finished! Now go and create a great app! "${NC}"
  code .
  exit 0
fi
}
stage1