plant-disease-id/tasks/hyper-specific-plant-disease-id/06-user-interface-and-polish.md

06. Responsive UI, Homepage, Navigation, Loading States, and Error Handling

meta: id: hyper-specific-plant-disease-id-06 feature: hyper-specific-plant-disease-id priority: P2 depends_on: [hyper-specific-plant-disease-id-01, hyper-specific-plant-disease-id-05] tags: [frontend, ui, ux, polish]

objective:

• Build the public-facing pages (homepage, browse plants, about), global navigation, consistent loading skeletons, error boundaries, and responsive layout so the app feels polished and production-ready.

deliverables:

• app/page.tsx — homepage hero with upload CTA, feature highlights, sample disease cards
• app/browse/page.tsx — browse/search all plants with disease counts
• app/browse/[plantId]/page.tsx — single plant detail page with its disease list
• app/about/page.tsx — about page explaining methodology and disclaimer
• components/Navbar.tsx — responsive global navigation with search bar
• components/Footer.tsx — site footer with links and disclaimer
• components/LoadingSkeleton.tsx — reusable skeleton component for loading states
• components/ErrorBoundary.tsx — React error boundary with fallback UI
• components/EmptyState.tsx — reusable empty state with illustration and CTA
• app/layout.tsx — root layout with Navbar, Footer, metadata, and font loading
• lib/constants.ts — site-wide constants (app name, tagline, social links)

steps:

1. Build components/Navbar.tsx:
   • Sticky top bar with app name/logo, navigation links (Home, Browse Plants, About).
   • Mobile hamburger menu with slide-out drawer.
   • Search input that navigates to /browse?search=... on submit.
   • Active link highlighting.
2. Build components/Footer.tsx:
   • Three-column layout: about blurb, quick links, disclaimer (beta, not a professional diagnosis).
   • "Made by gardeners, for gardeners" tagline.
3. Build app/page.tsx (Homepage):
   • Hero section: large headline ("Snap. Identify. Treat."), subtitle, prominent image upload component (from task 03) centered.
   • How-it-works section: 3-step illustration (Upload → AI Analysis → Treatment Plan).
   • Featured plants / common diseases section — carousel of 6-8 popular plant cards linking to /browse/....
   • Trust signals: "Trained on 50K+ images", "Covers 20+ plants", "Open source".
4. Build app/browse/page.tsx:
   • Grid of plant cards (image + name + disease count).
   • Search input at top filters plants client-side by name.
   • Category filter chips: "All", "Vegetables", "Herbs", "Houseplants", "Flowers".
   • Click a card → navigates to /browse/{plantId}.
5. Build app/browse/[plantId]/page.tsx:
   • Plant hero: common name, scientific name, family, care summary.
   • Disease list: each disease is a card linking to... (todo: disease detail page could be a future enhancement; for now show expandable info inline or redirect to the identification flow).
   • "Identify a disease on this plant" button → triggers upload flow targeting this plant for narrowed identification.
6. Build app/about/page.tsx:
   • Mission statement, how the model works (plain language), data sources, limitations disclaimer.
   • Open-source credits and contribution guide.
   • FAQ accordion.
7. Build components/LoadingSkeleton.tsx:
   • Configurable skeleton: variant (card, text, image, circle) and count (repeat).
   • Pulse animation using Tailwind animate-pulse.
   • Export presets: ResultsSkeleton, PlantCardSkeleton, UploadSkeleton.
8. Build components/ErrorBoundary.tsx:
   • Class-based React error boundary with componentDidCatch.
   • Fallback UI: friendly message ("Something went wrong!"), error detail (dev mode), "Try again" button, "Go home" link.
9. Build components/EmptyState.tsx:
   • Illustration (emoji or SVG), message, optional CTA button.
   • Used in browse page when search returns no results.
10. Update app/layout.tsx:
    • Import and wrap Navbar + Footer.
    • Set metadata (title template, description, Open Graph).
    • Load Inter font via Next.js font optimization.
    • Wrap children in ErrorBoundary.
11. Add responsive breakpoints and test on 375px, 768px, 1024px, 1440px.
12. Add smooth scroll behavior and transition utilities.

tests:

• Integration: Homepage loads with hero, upload component, and featured plants.
• Integration: Browse page renders plant grid and search filters work.
• Integration: Plant detail page shows disease list.
• Integration: Mobile hamburger menu opens and closes.
• Integration: Error boundary catches thrown errors and shows fallback.
• Integration: Search in navbar navigates to browse page with query param.
• Visual: All pages render without layout shift at 375px and 1280px.

acceptance_criteria:

• Homepage, browse, plant detail, and about pages all render without errors.
• Navigation is accessible via keyboard and screen reader.
• Loading skeletons appear while pages/data are loading.
• Error boundary catches runtime errors with helpful fallback.
• Empty state shown when search or filter yields no results.
• Mobile navigation hamburger menu works on touch devices.
• All pages pass basic Lighthouse audit (no layout shift, proper heading hierarchy).

validation:

curl http://localhost:3000/          # → 200, homepage renders
curl http://localhost:3000/browse    # → 200, plant grid renders
curl http://localhost:3000/browse/tomato  # → 200, tomato detail
curl http://localhost:3000/about     # → 200, about page
# Open in browser at 375px → hamburger menu visible and functional
# Run Lighthouse → Performance ≥90, Accessibility ≥90, SEO ≥90

notes:

• Use Next.js <Image> component with remote patterns configured for any external plant photos.
• All static pages are server-rendered (no 'use client' unless interactivity requires it).
• The homepage should feel warm and approachable — use plant emoji / botanical illustrations as visual elements.
• Keep the beta disclaimer visible in footer to manage expectations (AI is not a substitute for professional diagnosis).