agri mithra

byparesh ms

You are an expert full-stack developer and UI/UX designer. Build a complete mobile-first web application called "AgriMithra" — a voice-first, Kannada-language AI farming assistant for small and medium farmers in Shimoga, Karnataka, India. ═══════════════════════════════════════════ APP OVERVIEW ═══════════════════════════════════════════ - Name: AgriMithra (ಕೃಷಿ ಮಿತ್ರ) - Target user: 35–60 year old farmer, low digital literacy, Shimoga district - Primary language: Kannada (ಕನ್ನಡ) with English fallback - Design principle: Voice-first, photo-first, minimal text, big buttons - Monetisation: Free tier + ₹50/month premium via UPI ═══════════════════════════════════════════ CORE FEATURES TO BUILD ═══════════════════════════════════════════ 1. ONBOARDING SCREEN - Language selector: Kannada / English (default Kannada) - Farmer profile: Name, village, taluk (dropdown: Shimoga, Sagara, Tirthahalli, Bhadravati, Shikaripur), primary crop (Areca nut / Paddy / Maize / Sugarcane / Pepper) - Simple illustrated icons — no long text - WhatsApp number as login (OTP via Firebase) 2. HOME DASHBOARD - Large voice button (mic icon) center screen — "ಮಾತನಾಡಿ" (Speak) - Today's weather card for farmer's taluk (OpenWeatherMap API) - Crop health status — last scan result - Quick action buttons (big icons, Kannada labels): → 📷 ರೋಗ ಪರೀಕ್ಷೆ (Disease Check) → 🌦 ಹವಾಮಾನ (Weather) → 💬 ಸಲಹೆ (Advisory) → 💰 ಮಾರುಕಟ್ಟೆ ಬೆಲೆ (Market Price) - Bottom nav: Home / Scan / Advisory / Profile 3. CROP DISEASE DETECTION (Core Feature) - Camera button to capture leaf/crop photo - Upload from gallery option - Loading animation: "ಪರೀಕ್ಷಿಸುತ್ತಿದ್ದೇವೆ..." (Checking...) - Result screen: → Disease name in Kannada + English → Confidence percentage (visual bar) → Cause (1–2 simple sentences in Kannada) → Treatment (numbered steps, simple Kannada) → "ತಜ್ಞರನ್ನು ಕರೆಯಿರಿ" (Call Expert) button - Use Claude API / GPT-4 Vision for disease identification - Prompt to Claude API: "You are an expert Indian agricultural scientist. Analyze this crop image from Shimoga, Karnataka. Identify: 1) Disease name 2) Confidence level 3) Cause in simple Kannada 4) Step-by-step treatment using locally available inputs. Respond in JSON: {disease, confidence, cause_kannada, treatment_steps_kannada[], severity}" 4. VOICE ASSISTANT - Mic button on home screen - Web Speech API for Kannada voice input (lang="kn-IN") - Send transcribed text to Claude API with system prompt: "You are AgriMithra, a friendly farming assistant for Shimoga Karnataka farmers. Answer ONLY farming questions. Reply in simple spoken Kannada (not formal). Keep answers under 3 sentences. Focus on: areca nut, paddy, maize, sugarcane crops." - Text-to-speech response playback in Kannada - Show transcribed text + response text on screen 5. WEATHER ADVISORY - Auto-detect taluk or use profile taluk - OpenWeatherMap API — 5-day forecast - Translate weather data into farming actions: → "ನಾಳೆ ಮಳೆ ಇದೆ — ಔಷಧ ಸಿಂಪಡಿಸಬೇಡಿ" (Rain tomorrow — don't spray pesticide) → "ತಾಪಮಾನ ಹೆಚ್ಚಿದೆ — ಹನಿ ನೀರಾವರಿ ಹಾಕಿ" (High temperature — use drip irrigation) - Risk alert banner (red/yellow/green) for the week 6. MARKET PRICE TRACKER - Shimoga APMC mandi prices for: Areca nut, Paddy, Maize - Data source: data.gov.in agmarknet API or manual weekly update - Simple table: Crop | Today's Price | Last Week | Trend arrow - "ಮಾರಾಟ ಮಾಡಲು ಸರಿಯಾದ ಸಮಯ" (Good time to sell) indicator 7. PREMIUM SUBSCRIPTION SCREEN (₹50/month) - Free vs Premium comparison (simple 2-column table) - Free: Basic disease scan (3/month), weather, market prices - Premium: Unlimited scans, voice assistant, weekly advisory, expert call support - "₹50 ತಿಂಗಳಿಗೆ" payment button → Razorpay payment link - UPI QR code display option 8. FARMER PROFILE - Name, village, crops, land size (acres) - Scan history with dates - Premium status badge - Language toggle (Kannada/English) - Share app button (generates WhatsApp share link) ═══════════════════════════════════════════ TECH STACK ═══════════════════════════════════════════ Frontend: React Native (Expo) for Android-first mobile app OR React.js PWA (Progressive Web App) — recommended for faster launch, works on any Android browser Backend: Node.js + Express OR Python FastAPI Database: Firebase Firestore (free tier, real-time) Auth: Firebase Auth (WhatsApp OTP via Twilio) AI/ML: Claude API (claude-sonnet-4-20250514) for disease detection + voice advisory Weather: OpenWeatherMap API (free tier) Payments: Razorpay Payment Links (no backend needed initially) Hosting: Vercel (frontend) + Railway (backend) — both free tier Storage: Firebase Storage for crop photos ═══════════════════════════════════════════ DESIGN REQUIREMENTS ═══════════════════════════════════════════ - Color palette: Primary green: #3B6D11 (trust, nature) Light green: #EAF3DE (backgrounds) Amber: #F5A623 (alerts, CTAs) White: #FFFFFF Dark text: #1A1A1A - Font: Noto Sans Kannada (Google Fonts) — best Kannada rendering - Button size: Minimum 56px height — fat finger friendly - Icons: Large (32px+), illustrated style not flat minimal - Avoid: Long text blocks, small fonts, complex navigation - Accessibility: High contrast, voice feedback on every action ═══════════════════════════════════════════ OFFLINE CAPABILITY ═══════════════════════════════════════════ - Cache last 7 days weather data - Store last 5 disease scan results locally - Show "ನೀವು ಆಫ್‌ಲೈನ್ ಆಗಿದ್ದೀರಿ" (You are offline) banner - Queue voice queries — send when connectivity restored - Service worker for PWA offline support ═══════════════════════════════════════════ FIRST BUILD PRIORITY ORDER ═══════════════════════════════════════════ Build in this exact sequence: 1. Onboarding + profile setup screens (UI only) 2. Home dashboard with weather card (real API) 3. Disease detection with photo upload + Claude API 4. Voice assistant with Kannada speech recognition 5. Market prices screen 6. Premium paywall + Razorpay link 7. Offline caching + PWA manifest ═══════════════════════════════════════════ SAMPLE CLAUDE API CALL (Disease Detection) ═══════════════════════════════════════════ const response = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 1000, messages: [{ role: "user", content: [ { type: "image", source: { type: "base64", media_type: "image/jpeg", data: base64Image } }, { type: "text", text: `You are an expert agricultural scientist for Karnataka, India. Farmer's crop: ${farmerCrop}, Location: Shimoga district. Analyze this crop photo and respond ONLY in this JSON format: { "disease_name_kannada": "", "disease_name_english": "", "confidence": 85, "severity": "low|medium|high", "cause_kannada": "", "treatment_steps": ["step1 in Kannada", "step2", "step3"], "prevention_tip_kannada": "" }` } ] }] }) });4

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

Agri Mithra

Introduction

Agri Mithra is a mobile-first web application designed to serve as a voice-first, Kannada-language AI farming assistant for small and medium farmers in Shimoga, Karnataka, India. The application aims to empower farmers by providing essential farming assistance through intuitive voice and photo interactions, making technology accessible to users with low digital literacy.

System Overview

Agri Mithra is tailored for farmers aged 35–60 with low digital literacy in the Shimoga district. The app prioritizes a voice-first and photo-first design, minimizing text and using large buttons for ease of use. It supports Kannada as the primary language with an English fallback. The app offers a free tier and a premium subscription at ₹50/month via UPI.

Page 1 of 5

Functional Requirements

  • As a User, I should be able to select my preferred language (Kannada/English) during onboarding.
  • As a User, I should be able to create a farmer profile with details like name, village, taluk, and primary crop.
  • As a User, I should be able to log in using my WhatsApp number with OTP verification.
  • As a User, I should be able to access a home dashboard with a large voice button for interactions.
  • As a User, I should be able to view today's weather for my taluk.
  • As a User, I should be able to perform a crop disease check using my camera or gallery.
  • As a User, I should be able to receive crop disease results with treatment steps in Kannada.
  • As a User, I should be able to use a voice assistant for farming queries in Kannada.
  • As a User, I should be able to view a 5-day weather forecast with farming action suggestions.
  • As a User, I should be able to track market prices for crops like Areca nut, Paddy, and Maize.
  • As a User, I should be able to subscribe to a premium plan for additional features.
  • As a User, I should be able to manage my profile and view my scan history.

User Personas

  • Farmer: Primary user, aged 35–60, low digital literacy, relies on voice and photo interactions.
  • Admin: Manages app content and user support.
Page 2 of 5

Visuals Colors and Theme

  • primary: #3B6D11 (trust, nature)
  • primary_light: #EAF3DE (backgrounds)
  • secondary: #F5A623 (alerts, CTAs)
  • accent: #FF5733 (vibrant pop for CTAs)
  • highlight: #FFC300 (warm color for notifications)
  • bg: #FFFFFF (page background)
  • surface: rgba(235, 235, 235, 0.8) (card/panel background)
  • text: #1A1A1A (primary text color)
  • text_muted: #6D6D6D (secondary text color)
  • border: rgba(200, 200, 200, 0.5) (subtle border color)

Signature Design Concept

Imagine a homepage that transforms into a vibrant, interactive farming landscape. As users scroll, they navigate through different sections of a virtual farm. Each section represents a feature of the app, like weather updates or crop disease detection. The landscape is animated with moving clouds, growing crops, and interactive elements that respond to user actions. For instance, clicking on a crop opens detailed information, and hovering over weather icons displays forecasts. This concept uses @react-three/fiber for 3D interactions and gsap for smooth animations, creating an engaging and memorable experience.

Page 3 of 5

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model, providing a layered depth experience as users scroll through the virtual farm landscape. This approach enhances storytelling and creates a visually rich first impression. Internal pages will adopt a "static" model for clarity and ease of use, focusing on content delivery without excessive motion.

Non-Functional Requirements

  • High availability and responsiveness.
  • Support for offline usage with cached data.
  • Secure user authentication and data protection.
  • Scalable architecture to handle increasing user load.

Tech Stack

  • Frontend: React Native (Expo) for Android-first mobile app or React.js PWA for broader compatibility.
  • Backend: Node.js + Express or Python FastAPI.
  • Database: Firebase Firestore for real-time data.
  • Auth: Firebase Auth with WhatsApp OTP via Twilio.
  • AI/ML: Claude API for disease detection and voice advisory.
  • Weather: OpenWeatherMap API for forecasts.
  • Payments: Razorpay Payment Links.
  • Hosting: Vercel for frontend and Railway for backend.
  • Storage: Firebase Storage for images.
Page 4 of 5

Assumptions and Constraints

  • Users have basic smartphone access and internet connectivity.
  • The app will primarily serve Kannada-speaking farmers in Shimoga.
  • Monetization through a premium subscription model.
  • Initial deployment on Android, with potential expansion to other platforms.

Glossary

  • Taluk: An administrative division in India.
  • APMC: Agricultural Produce Market Committee.
  • UPI: Unified Payments Interface, a real-time payment system in India.
  • PWA: Progressive Web App, a type of application software delivered through the web.
Page 5 of 5

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Login: Sign In
AdminDashboard: View Overview
AdminDashboard: Manage Users
UserManagement: Edit User
ContentManager: Update Market Prices
ContentManager: Update Weather Tips
SupportPanel: View Requests
SupportPanel: Resolve Issue
Analytics: View Usage Stats
Analytics: View Scan Reports
Settings: Configure App

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Login: Sign In
AdminDashboard: View Overview
AdminDashboard: Manage Users
UserManagement: Edit User
ContentManager: Update Market Prices
ContentManager: Update Weather Tips
SupportPanel: View Requests
SupportPanel: Resolve Issue
Analytics: View Usage Stats
Analytics: View Scan Reports
Settings: Configure App