plant-disease-id/tasks/hyper-specific-plant-disease-id/01-nextjs-project-scaffold.md

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:

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.