Ready2Blob/.planning/phases/01-foundation/01-01-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
01-foundation	01	execute	1		package.json vite.config.ts tsconfig.json tsconfig.app.json tsconfig.node.json src/index.css src/main.tsx src/App.tsx vitest.config.ts index.html	true		truths artifacts key_links npm run dev starts the Vite dev server with no console errors npm run build succeeds with no TypeScript errors npx vitest run exits 0 (even with zero test files) Tailwind utility classes applied in JSX produce visible styles path provides contains vite.config.ts Vite build config with React plugin and Tailwind v4 plugin @tailwindcss/vite path provides contains src/index.css Tailwind v4 CSS entry point @import "tailwindcss" path provides contains vitest.config.ts Vitest configuration for pure-function unit tests environment: 'node' path provides contains package.json All Phase 1 dependencies declared zod from to via pattern vite.config.ts src/index.css tailwindcss() plugin processes @import directive tailwindcss() from to via pattern src/main.tsx src/index.css import './index.css' import.*index.css

Bootstrap the project: scaffold a Vite 6 + React 18 + TypeScript 5 SPA, install all Phase 1 dependencies, configure Tailwind v4 via the Vite plugin, and install Vitest so automated tests can run.

Purpose: Every downstream plan needs a working project with correct tooling. Getting the scaffold wrong (e.g., Tailwind v3 path, old shadcn CLI) causes painful migration later. Output: A runnable dev server, a passing build, and Vitest ready to execute unit tests.

<execution_context> @C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md @C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md Task 1: Scaffold and install all Phase 1 dependencies package.json, vite.config.ts, src/index.css, src/main.tsx, src/App.tsx, index.html, tsconfig.json, tsconfig.app.json, tsconfig.node.json First verify Node.js version meets Vite 6 requirements: ``` node --version ``` Must be 20.19+ or 22.12+. If below, stop and report — do not proceed.

Scaffold the project in the current directory (not a subdirectory — the repo root IS the project):
```
npm create vite@latest . -- --template react-ts
```
Accept overwrite prompts if any files exist.

Install all Phase 1 production and dev dependencies in one command:
```
npm install
npm install zod react-hook-form @hookform/resolvers
npm install -D tailwindcss @tailwindcss/vite
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom
```

Update vite.config.ts to add the Tailwind v4 plugin (use @tailwindcss/vite, NOT postcss):
```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});
```

Replace the contents of src/index.css with the single Tailwind v4 import directive:
```css
@import "tailwindcss";
```
Do NOT add tailwind.config.js, do NOT add postcss.config.js, do NOT add content globs.

Clean up the Vite default boilerplate in src/App.tsx — replace with a minimal placeholder that uses one Tailwind class to confirm styles work:
```tsx
export default function App() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Ready2Blob</h1>
    </div>
  );
}
```

Verify the dev server starts without console errors:
```
npm run dev
```
Then Ctrl+C. Verify the build succeeds:
```
npm run build
```

npm run build 2>&1 | tail -5 npm run build exits 0 with no TypeScript errors. npm run dev starts without console errors (manual check: open browser, check devtools console). Task 2: Configure Vitest for pure-function unit tests vitest.config.ts Create vitest.config.ts at the project root with the node environment (pure functions do not need a DOM): ```typescript import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'node',
    globals: true,
  },
});
```

Add a test script to package.json if not already present:
```json
"test": "vitest run"
```

Run the test suite to confirm Vitest executes (zero tests is acceptable at this stage):
```
npx vitest run
```
Expected output: "No test files found" or similar — this is correct. Exit code must be 0.

npx vitest run 2>&1; echo "exit: $?" npx vitest run exits 0. vitest.config.ts exists with environment: 'node' and globals: true. Run in sequence after both tasks complete: 1. `npm run build` — exits 0, no TypeScript errors 2. `npx vitest run` — exits 0 3. Manual: `npm run dev`, open browser, confirm no console errors and "Ready2Blob" heading renders with bold styling

<success_criteria>

• Vite 6 + React 18 + TypeScript 5 project builds cleanly
• Tailwind v4 configured via @tailwindcss/vite plugin (no postcss.config.js, no tailwind.config.js)
• All Phase 1 dependencies installed: zod, react-hook-form, @hookform/resolvers, vitest, @testing-library/react
• Vitest configured and executable (exits 0 with no test files)
• src/index.css contains only @import "tailwindcss" for Tailwind v4 </success_criteria>

After completion, create `.planning/phases/01-foundation/01-01-SUMMARY.md` using the summary template.