SAMT — Smart Agriculture Market & Tools

SAMT is a lightweight farmer-focused web application that provides market price tracking, weather insights, a community forum, and administrative tools to manage market items.

Project Specification

• Purpose: Help farmers discover market prices, get weather-aware advice, share knowledge, and allow admins to manage market listings.
• Audience: Small-to-medium farmers, agricultural extension workers, and marketplace administrators.
• Primary workflows: Browse market items, view weather & actionable advice, register/login as farmer or admin, create forum posts and comments, admin CRUD on market items.

Tech Stack

• Frontend: React + TypeScript (Vite), shadcn/ui components, Tailwind CSS, React Router v6, TanStack Query, Sonner toasts.
• Backend: Node.js + Express, MongoDB (Mongoose), JWT auth, cookie support.
• HTTP client: Axios (shared instance in ui/src/api/axios.js).
• Dev tooling: Vite, ESLint, TypeScript.

How to Run (Local)

Backend (server):

1. Open a terminal in backend/.
2. Create a .env with at least:
   • PORT=3000
   • MONGO_URI=<your mongo uri>
   • JWT_SECRET=<your secret>
   • CORS=http://localhost:5173 (or your frontend origin)
3. Install & run:

cd backend
npm install
npm run dev   # or `node server.js` for production run

Frontend (UI):

1. Open a terminal in ui/.
2. Install & run:

cd ui
npm install
npm run dev

3. The frontend expects the backend API base at http://localhost:3000/api by default. Override with VITE_API_BASE_URL in .env if needed.

Features

• Market Dashboard: View, search and filter market items by region and name.
• Weather Insights: City-level weather and simple advice generation using backend rules.
• Forum: Authenticated users can create posts and comments; posts are populated with author info.
• Authentication: JWT-based login/register (cookies set by server for convenience), role-aware routes (farmer/admin).
• Admin Panel: Add, edit, delete market items with image uploads.
• Toasts & Error Handling: Centralized API error extraction and session-expiry handling in the frontend.

Methodology & Core Design Points

• Keep the UI logic thin: use a single Axios instance (ui/src/api/axios.js) with response interceptors for auth expirations.
• Server issues are surfaced to the user via consistent error messages (see ui/src/lib/apiError.ts).
• Minimal state in the AuthContext (token, role, name) persisted to localStorage for simple sessions.
• Protect routes with a ProtectedRoute wrapper that checks user.role and loading state.

Known Fixes & Required Items (Actionable)

• Frontend must point to the running backend port (default now http://localhost:3000/api). Verify VITE_API_BASE_URL when deploying.
• Registration: frontend now sends username, email, role, and required fields to match backend User schema. If backend requires additional fields, update the form and payload.
• Auth error handling: on 401/403 the frontend clears local auth and dispatches an auth:expired event — apps should listen for it if using multiple windows.
• Forum posts: ensure authenticated requests include either Authorization header (Bearer <token>) or cookies; the server accepts both. The frontend now sends posts without using the JWT as the author — server uses req.user from the middleware.
• UI improvements: clear form errors when switching tabs or reopening modals (implemented).

Troubleshooting

• If login/register returns User already exists or Validation failed, inspect backend logs and the payload sent by the UI (browser Network tab).
• If CORS errors appear, confirm CORS in backend .env includes the exact frontend origin (scheme+host+port).
• If images/uploads fail, ensure backend cloudinary or upload config is present and valid in backend/config/cloudinary.js.

Developer Notes & Next Steps

• Add E2E tests for auth and forum flows to catch regressions early.
• Harden token refresh and graceful logout flows (refresh tokens or silent re-auth patterns).
• Audit all API calls to standardize error messages and codes from the backend.

---

Created/updated files:

• ui/src/lib/apiError.ts — common API error extractor
• ui/src/api/axios.js — axios instance and auth-expiry interceptor
• ui/src/context/AuthContext.tsx — auth state + expired handler
• ui/src/components/LoginModal.tsx — login/register modal fixes

If you want, I can:

• Run a local build and smoke-test the full auth flow.
• Add example .env files for frontend and backend.
• Open a checklist PR with the fixes grouped and tests added.

---

If you'd like adjustments to tone or additional sections (architecture diagram, sequence diagrams, API contract), tell me which and I will add them.