Agri Vision is an AI-integrated web portal provides a comprehensive solution that supports farmers throughout the entire agricultural process.
To get started with this project, follow these steps:
-
Clone the repository:
git clone https://github.com/bighnesh0007/agrivision
-
Navigate to the project directory:
cd agrivision -
Install the dependencies:
npm install
-
Start the development server:
npm run dev
This project leverages the following key dependencies:
- @clerk/nextjs: Authentication and user management for Next.js applications.
- @google/generative-ai: Integration with Google's generative AI tools.
- @radix-ui/react- (Label, Popover, Progress, Select, Slot, Tabs)*: Radix UI components for building accessible and high-quality interfaces.
- @tabler/icons-react: A set of open-source icons optimized for React.
- @tailwindcss/forms: Tailwind CSS plugin to style forms.
- @tsparticles/engine, @tsparticles/react, @tsparticles/slim: Particle engine and React components for creating particle animations.
- aceternity-ui: UI component library.
- axios: Promise-based HTTP client for making API requests.
- chart.js & react-chartjs-2: Charting library and its React wrapper for creating data visualizations.
- class-variance-authority & clsx: Utility libraries for conditionally joining class names.
- cobe: Lightweight library for building 3D globe visualizations.
- date-fns: Utility library for working with dates in JavaScript.
- express: Web framework for Node.js, used for server-side routing.
- formidable: Node.js module for parsing form data, especially file uploads.
- framer-motion: Library for animations and gestures in React.
- lucide-react: React components for Lucide icons.
- next: The core Next.js framework.
- openai: Integration with OpenAI's API for building AI-powered features.
- react & react-dom: The core React library and its DOM renderer.
- react-big-calendar: A customizable calendar component for React.
- react-day-picker: Date picker component for React.
- react-hook-form: Hook-based form validation and management.
- react-icons: Popular icons as React components.
- recharts: Another charting library for React, focusing on composability.
- shadcn-ui: UI library based on Radix UI and Tailwind CSS.
- tailwind-merge: Utility for merging Tailwind CSS class names.
- tailwindcss-animate: Tailwind CSS plugin for animations.
- twilio: Twilio API integration for SMS, voice, and video features.
To manage user authentication, this project uses @clerk/nextjs. You need to configure Clerk by setting up your Clerk instance and providing your frontend API key.
This project integrates with multiple external APIs, including Google's generative AI and OpenAI. Ensure that you have valid API keys for each service in your environment variables.
The UI is built using components from Radix UI, Shadcn UI, and Tailwind CSS. The project also uses react-icons, lucide-react, and @tabler/icons-react for iconography.
Data visualization is handled using chart.js, react-chartjs-2, and recharts. You can find pre-configured chart components under the components directory.
- Authentication: Secure user authentication and session management.
- API Integrations: Connect with various APIs like Google Generative AI and OpenAI.
- Responsive Design: Built with responsive UI components for a seamless experience on all devices.
- Animations: Smooth and engaging animations using Framer Motion and Tailwind CSS.
- Form Handling: Robust form handling with
react-hook-formand Tailwind CSS forms. - Real-time Communication: Integrated with Twilio for real-time communication features.
.
├── components
│ ├── UI
│ ├── Charts
│ ├── Forms
├── pages
│ ├── api
│ ├── auth
│ ├── index.tsx
├── public
├── styles
├── utils
└── README.md
This project is licensed under the MIT License. See the LICENSE file for more details.
