Script - Create React App

#!/bin/bash

GREEN=$'\033[7;32m'
RED=$'\033[7;31m'
CYAN=$'\033[7;34m'
NC=$'\033[0m'
function stage1 {
while true;do
    echo
    echo "${GREEN}"" Enter the name of your new ${NC}${CYAN} 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
}

function 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
  npx create-react-app "$APP_NAME"
  cd ./"$APP_NAME" || exit 0
  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 package.json... "${NC}"
  jq '.eslintConfig.extends="@gbrachetta/eslint-config" | .+ {prettier: "@gbrachetta/prettier-config"} | .scripts += {lint:"eslint ./src/*.js --ignore-path .gitignore", "lint:fix":"npm run lint -- --fix", format:"prettier --write ./src/*.js \"{,!(node_modules)/**/}*.js\""}' package.json > tmpfile && mv tmpfile package.json
  echo
  echo "${GREEN}" Linting... "${NC}"
  yarn format ; yarn lint:fix
  echo
  echo "${CYAN}" Finished! Now go and create a great app! "${NC}"
  code .
  exit 0
fi
}
stage1