GenerateReactSetupBashScript.md

Your goal is to generate a bsh script that fully automate the setup of a production-grade React + TypeScript application.

Make resonable assumptions wherever necessary.

The process is broken into below discrete steps. Before each step you must prompt the user:

“Step X/{TOTAL_STEPS}: – . Proceed? (y/n)”

If the user answers “y” or “yes”, execute exactly the commands needed for that step. If “n” or “no”, skip to the next step. After each execution or skip, print “✅ Step X complete” or “⏭ Step X skipped” and move on. If any command fails, stop and print the error.

Here are your steps:

1. Project Planning & Requirements
   • Create a top-level README.md stub with sections: Overview, Features, Browsers, Performance Budget, Maintenance.
   • Commit it.

2. Tooling & Scaffolding
   • Run npm init -y
   • Install Vite: npm install --save-dev vite
   • scaffold a React+TS template: npm create vite@latest . -- --template react-ts
   • Commit.

3. TypeScript Configuration
   • In tsconfig.json set "strict": true, "noImplicitAny": true, "strictNullChecks": true, "isolatedModules": true.
   • Add "paths" aliases under compilerOptions.
   • Commit.

4. Folder Structure & Architecture
   • Under src/, create directories: components, hooks, pages, services, utils, assets, styles, types.
   • Ensure co-located test files alongside components.
   • Commit.

5. Code Quality & Consistency
   • Install ESLint + Prettier + husky + lint-staged + commitlint:

   npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react \
     husky lint-staged @commitlint/cli @commitlint/config-conventional
   npx husky install
   

   • Add lint-staged config to package.json.
   • Add commitlint config in .commitlintrc.js.
   • Commit.

6. State Management & Data Layer
   • Install React Query: npm install @tanstack/react-query
   • Create src/services/api.ts with Axios wrapper.
   • Commit.

7. Routing & Code-Splitting
   • Install React Router: npm install react-router-dom
   • Bootstrap src/App.tsx with <BrowserRouter> + lazy routes + <Suspense>.
   • Commit.

8. Styling & Theming
   • Install and configure one of: Tailwind CSS (npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p)
   or styled-components (npm install styled-components @types/styled-components).
   • Add a central theme file under src/styles/theme.ts.
   • Commit.

9. Environment & Configuration
   • Create .env.development, .env.production, .env.staging
   • Install dotenv-safe: npm install dotenv-safe
   • Load env in vite.config.ts.
   • Commit.

10. Testing Strategy
    • Install Jest + RTL: npm install --save-dev jest @testing-library/react @testing-library/jest-dom ts-jest
    • Create jest.config.ts, add a sample test under src/components/tests.
    • Commit.

11. Performance & Bundle Optimizations
    • Add vite-plugin-visualizer: npm install --save-dev rollup-plugin-visualizer
    • Configure it in vite.config.ts.
    • Commit.

12. Accessibility & Internationalization
    • Install eslint-plugin-jsx-a11y: npm install --save-dev eslint-plugin-jsx-a11y
    • Add react-i18next: npm install react-i18next i18next
    • Bootstrap i18n config under src/i18n.ts.
    • Commit.

13. SEO & Metadata
    • Install react-helmet-async: npm install react-helmet-async
    • Add Helmet in App.tsx with default title/meta.
    • Commit.

14. PWA & Offline Support (optional)
    • Offer to install Workbox: npm install --save-dev workbox-cli
    • Generate service worker config.
    • Commit.

15. CI/CD Pipeline
    • Create .github/workflows/ci.yml with jobs: lint, build, test.
    • Add a deploy job stub.
    • Commit.

16. Security Best Practices
    • Run npm audit --audit-level=moderate
    • Install Snyk CLI: npm install --save-dev snyk
    • Add a pre-push hook to run snyk test.
    • Commit.

17. Monitoring & Observability
    • Add Sentry: npm install @sentry/react @sentry/tracing
    • Initialize in main entry (src/main.tsx).
    • Commit.

18. Documentation & Onboarding
    • Scaffold Storybook: npx sb init --type react_scripts
    • Add a sample story in src/components/Button.stories.tsx.
    • Commit.

19. Developer Experience
    • Create .vscode/settings.json with “editor.formatOnSave”: true, “eslint.validate”: [“javascript”, “typescript”].
    • Commit.

End when all 19 steps are processed. Print a summary of which steps were executed vs. skipped.