Skip to content

feat:Comprehensive Mobile-First Agri-Intelligence Platform (Dual-State)

Praveena Veeranki requested to merge agri_hack into develop

🚀 Overview

This MR marks the completion of the CropNest transformation into a high-fidelity, dual-state (Telangana & Andhra Pradesh) Agri-Intelligence platform. The application has been refactored from the ground up to prioritize mobile-first usability, premium aesthetics, and interactive spatial data discovery.

🛠️ Key Feature Sets

1. 📱 Premium Mobile-First Refactor

  • Adaptive Navigation: Implemented a sticky glassmorphic Navbar with a smooth, animated mobile drawer and staggered navigation reveals.
  • Responsive Layouts: Entire dashboard redesigned with a centralized hero, horizontal "snap-scrolling" for live updates, and responsive grids that maintain visual hierarchy on all screen sizes.
  • Touch-First UI: All interactive elements (cards, buttons, filters) have been optimized with larger hit areas and haptic-like animations using Framer Motion.

2. 🗺️ Interactive Map Intelligence (Nearby Markets)

  • Spatial Discovery: Integrated a high-performance Leaflet-based map allowing farmers to visually locate mandis and procurement centers.
  • District Mapping: Custom coordinate mapping for all major districts in TS and AP, ensuring accurate market placement.
  • Floating Info Cards: Implemented glassmorphic map overlays that reveal detailed market rankings, top commodity prices, and navigation controls upon interaction.
  • Voice Search Integration: Added a high-fidelity simulated voice-search component to improve accessibility for on-field farmers.

3. 📊 Responsive Analytics & Trend Discovery

  • Adaptive Charts: Optimized Recharts visualizations to scale gracefully, with simplified data density for mobile views and detailed tooltips for desktop.
  • Unified State Metrics: Re-engineered the analytics pipeline to handle disparate data types (TG Market Prices vs. AP Procurement Volumes) under a single "Trend Analytics" banner.

4. ✨ Aesthetic & Performance Polishing

  • Minimalist Design: Refined the feature cards by removing redundant background tints and implementing a transparent, hover-activated glass effect for a modern "Deep Tech" feel.
  • Performance: Leveraged Next.js dynamic imports for heavy components (Maps) to ensure zero impact on initial page load times.
  • State Switcher: Implemented a global state context allowing users to toggle the entire platform's data source between Telangana and Andhra Pradesh seamlessly.

🧪 Verification

  • Full Build Pass: Confirmed via npm run build with zero TypeScript or Turbopack errors.
  • Cross-Device Testing: Verified responsiveness across mobile, tablet, and desktop viewports.
  • API Robustness: Validated state-based data filtering and error handling for both CSV and JSON API sources.

How to Deploy

  1. Merge agri_hack into main.
  2. Ensure environment variables for any external APIs are set in production.
  3. Run npm install followed by npm run build.

Merge request reports