Michael Freno
820a872f07
- Next.js 16 App Router project with Tailwind CSS - Plant disease knowledge base (93 diseases, 25 plants) - Image upload with client+server preprocessing - ML inference pipeline with mock/demo fallback - Responsive results page with disease cards and treatment - Full test suite (285 passing tests)
66 lines
2.8 KiB
Markdown
66 lines
2.8 KiB
Markdown
# 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.
|