# 01. Next.js Project Scaffold, Tailwind CSS, and Directory Structure

meta:
  id: hyper-specific-plant-disease-id-01
  feature: hyper-specific-plant-disease-id
  priority: P1
  depends_on: []
  tags: [infrastructure, setup, config]

objective:
- Scaffold a new Next.js 14+ project with App Router, install Tailwind CSS, and establish the standard directory layout so all subsequent tasks have a clean foundation.

deliverables:
- `/apps/web/` — Next.js project with App Router (`app/` directory)
- `tailwind.config.ts` and `globals.css` with custom design tokens
- Directory structure for `components/`, `lib/`, `api/`, `data/`, `public/uploads/`, `public/models/`
- ESLint + Prettier config
- Basic health-check route at `/api/health` returning `{ status: "ok" }`
- `vercel.json` (initial baseline) and `.env.local` template

steps:
1. Run `npx create-next-app@latest` with TypeScript, App Router, Tailwind CSS, ESLint, and src/ directory enabled.
2. Configure `tailwind.config.ts` with custom colors (leaf-green, soil-brown, warning-amber) and extended spacing scale.
3. Create `app/globals.css` with Tailwind directives and base typography styles.
4. Create directory structure:
   - `components/` — reusable UI components
   - `lib/` — utility functions and shared helpers
   - `lib/api/` — backend API client wrappers
   - `lib/ml/` — model loading and inference helpers
   - `data/` — knowledge base seed JSON files
   - `public/uploads/` — uploaded image storage (gitignored)
   - `public/models/` — compiled ML model files (git LFS tracked)
5. Set up `app/api/health/route.ts` returning `{ status: "ok", timestamp }`.
6. Add `.env.local` with placeholder keys (`NEXT_PUBLIC_MODEL_PATH=/models`).
7. Create `vercel.json` with framework preset and function region config.
8. Add `.prettierrc` and ensure ESLint extends the Next.js recommended config.
9. Verify the app boots with `npm run dev` and `/api/health` responds 200.

tests:
- **Unit:** N/A (scaffold has no logic to unit-test).
- **Integration:** Hit `/api/health` → expect 200 + JSON with `status: "ok"`.
- **Smoke:** `npm run dev` starts without crash; `npm run build` completes.

acceptance_criteria:
- `npm run dev` boots and serves at localhost:3000.
- `GET /api/health` returns 200 `{ status: "ok" }`.
- Tailwind custom colors compile and appear in the browser.
- All directories listed in deliverables exist.
- `npm run build` exits successfully with no errors.

validation:
```bash
cd apps/web
npm install
npm run dev &
curl http://localhost:3000/api/health
# → {"status":"ok","timestamp":"..."}
npm run build
# → ✓ Ready in ...ms
```

notes:
- Use Next.js 14.2+ (stable App Router).
- Do NOT create any page UI yet — that belongs in task 06.
- Keep `node_modules` gitignored; add `public/uploads/` to `.gitignore` and `public/models/` tracked via Git LFS.