🌾 Agri Chatbot Agent

A modern, AI-powered agricultural advisory chatbot built with React and TypeScript. This application provides personalized farming advice, weather information, and agricultural guidance with offline support and multi-language capabilities.

🎯 About the Project

The Agri Chatbot Agent is designed to help farmers access agricultural information and advice through an intuitive chat interface. The application works seamlessly in both online and offline modes, making it accessible to farmers in areas with limited internet connectivity.

Key Features

• 🤖 Intelligent Chat Interface: Natural language processing for agricultural queries
• 🌐 Multi-Language Support: Hindi, English, and regional languages
• 📱 Progressive Web App: Installable on mobile devices
• 🔄 Offline Functionality: Works without internet using cached data
• 🌤️ Weather Integration: Real-time weather data and forecasts
• 👤 User Profiles: Personalized recommendations based on location and crops
• 🎨 Modern UI: Clean, responsive design with Tailwind CSS

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd agri-chatbot-agent

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   http://localhost:5173
   

Build for Production

npm run build
npm run preview

🏗️ Project Structure

src/
├── components/          # React components
│   ├── ProtectedRoute.tsx
│   ├── NetworkStatusIndicator.tsx
│   └── LoadingSpinner.tsx
├── hooks/              # Custom React hooks
│   ├── api/            # API-related hooks
│   └── utils/          # Utility hooks
├── pages/              # Page components
├── Provider/           # Context providers
├── services/           # API services
├── types/              # TypeScript type definitions
├── utils/              # Utility functions
├── i18n/               # Internationalization
└── assets/             # Static assets

🔧 Technology Stack

Frontend

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• React Router - Navigation
• React Query - Data fetching and caching

UI Components

• Radix UI - Accessible component primitives
• Lucide React - Icons
• Class Variance Authority - Component variants

Internationalization

• i18next - Multi-language support
• react-i18next - React integration

Progressive Web App

• Vite PWA Plugin - PWA capabilities
• Service Worker - Offline functionality

🌐 Offline Functionality

The application includes robust offline support:

• Network Detection: Automatically detects network conditions
• Data Caching: Stores user profiles and essential data locally
• Graceful Degradation: Works with limited or no internet
• Smart API Calls: Only makes API calls when network is suitable

Network States

• Online (4G/5G): Full functionality with real-time data
• Limited (2G/3G): Uses cached data, reduced API calls
• Offline: Works entirely with cached data

📱 Progressive Web App Features

• Installable: Can be installed on mobile devices
• Offline Support: Works without internet connection
• App-like Experience: Native app feel on mobile
• Push Notifications: Ready for future implementation

🎨 User Interface

Design Principles

• Mobile-First: Optimized for mobile devices
• Accessibility: WCAG compliant components
• Responsive: Works on all screen sizes
• Dark/Light Mode: Theme support

Key Components

• Chat Interface: Main interaction area
• User Profile Setup: Multi-step onboarding
• Network Status Indicator: Shows connection status
• Loading States: Smooth loading experiences

🔐 Authentication & Security

• Protected Routes: Secure access to authenticated features
• Token Management: JWT-based authentication
• Local Storage: Secure data caching
• Network Security: HTTPS enforcement

🌍 Internationalization

Supports multiple languages with easy extensibility:

• Hindi (हिंदी)
• English
• Regional Languages (easily configurable)

Adding New Languages

1. Add language configuration in src/i18n/
2. Update translation files
3. Add language selector in UI

📊 Data Management

API Integration

• RESTful APIs: Standard HTTP endpoints
• Error Handling: Graceful error management
• Caching Strategy: Smart data caching
• Retry Logic: Automatic retry for failed requests

Local Storage

• User Profiles: Cached user information
• Chat History: Local message storage
• Settings: User preferences
• Offline Data: Essential data for offline use

🚀 Deployment

Build Process

npm run build

This command runs TypeScript compilation (tsc) followed by Vite build process.

Deployment Options

• Vercel (Recommended)
• Netlify
• Firebase Hosting
• GitHub Pages

Environment Variables

Create a .env file in the root directory with the following variables:

# API Configuration
VITE_API_BASE_URL=http://localhost:3001/api
VITE_QUEUE_API_BASE_URL=http://localhost:3003/api

# Feature Flags
VITE_DISABLE_TWILIO=true

Note: Make sure your backend services are running on the specified ports (3001 and 3003) for the application to work properly.

🧪 Development

Available Scripts

npm run dev          # Start development server (vite)
npm run build        # Build for production (tsc && vite build)
npm run preview      # Preview production build
npm run lint         # Run ESLint with TypeScript

Code Quality

• TypeScript: Strict type checking
• ESLint: Code linting and formatting
• Prettier: Code formatting
• Git Hooks: Pre-commit checks

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Development Guidelines

• Follow TypeScript best practices
• Use functional components with hooks
• Maintain accessibility standards
• Write meaningful commit messages

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• React and TypeScript communities
• Tailwind CSS for styling
• Vite for build tooling
• All contributors and maintainers

---

Built with ❤️ for the agricultural community

Empowering farmers with modern technology and accessible information