A Revolutionary Farm Management System & Marketplace
Connecting farmers globally and transforming agricultural commerce.
Kissan360 (Farm Management System Marketplace) is a cutting-edge agricultural platform designed to bridge the gap between local farmers and global buyers. It offers a seamless, secure, and intuitive ecosystem for farmers to sell their fresh produce and for buyers to purchase premium agricultural items at the best prices.
The platform is built with a modern tech stack ensuring high performance, a stunning glassmorphism-inspired UI, and a highly responsive user experience.
- 🛒 Dedicated Marketplaces: Separate, tailored flows for Purchasing Items and Selling Products.
- 🌱 Fresh Produce Direct: Connect directly with farmers, cutting out middlemen to ensure freshness and the best pricing.
- 🛡️ Quality Assurance: A secure environment for verified sellers and products, fostering a trusted community.
- 📊 Real-time Community: A platform connecting 10,000+ active farmers with a global network of buyers.
- 🎨 Beautiful UI/UX: Stunning visually immersive interface featuring dynamic gradient backgrounds, scroll animations, glowing elements, and Tailwind CSS + Mantine integration.
- 📱 Fully Responsive: Optimized for both mobile devices and large desktop displays.
- React 19 - State-of-the-art UI library.
- TypeScript - For type-safe code and scalable development.
- Vite - Next-generation, lightning-fast frontend tooling.
- Redux Toolkit - Efficient and centralized application state management.
- React Router DOM 7 - Powerful routing system for smooth, single-page navigation.
- Tailwind CSS v4 - Utility-first CSS framework for rapid and scalable styling.
- Mantine UI - Rich set of accessible, highly functional React components (
@mantine/core,@mantine/carousel,@mantine/hooks). - Lucide React & Tabler Icons - Beautiful, scalable, and consistent icon sets.
- Custom Fonts: Montserrat (Primary), Niramit, and Poppins.
- Formik - Robust form state management.
- Yup - Schema builder for runtime value parsing and validation.
The project follows a modular and scalable directory structure:
kissan360/
├── public/ # Static assets (Favicons, etc.)
├── src/ # Main application source code
│ ├── assets/ # Images, SVGs, and global static files
│ ├── components/ # Reusable, modular UI components
│ ├── layouts/ # Page layout wrappers (e.g., Navbar, Footer, Sidebar)
│ ├── pages/ # Top-level route components
│ │ ├── HomePage.tsx # FMS Landing Page
│ │ ├── purchase/ # Purchase marketplace pages
│ │ └── sell/ # Selling dashboard and product management pages
│ ├── routes/ # Route configurations
│ │ ├── PurchaseRoutes.tsx
│ │ └── SellRoutes.tsx
│ ├── store/ # Redux setup, slices, and asynchronous thunks
│ ├── types/ # TypeScript interfaces and global type definitions
│ ├── util/ # Helper functions and utilities
│ ├── validation/ # Yup schemas for Formik validation
│ ├── App.tsx # Root React component connecting routes
│ └── main.tsx # React application entry point
├── index.html # Main HTML template
├── package.json # Project dependencies and operational scripts
├── tailwind.config.js # Tailwind customization (if applicable)
├── tsconfig.json # TypeScript configuration files
└── vite.config.ts # Vite bundler configuration
Follow these steps to set up the project locally.
Ensure you have the following installed on your machine:
- Node.js (v18 or higher recommended)
- npm (comes with Node.js) or yarn
Clone the repository and install the dependencies:
# Clone the project (replace with your repo link)
git clone https://github.com/your-username/kissan360.git
# Navigate into the directory
cd kissan360
# Install NPM dependencies
npm installTo start the Vite development server with Hot Module Replacement (HMR):
npm run devNavigate to http://localhost:5173 in your browser to view the application.
To create an optimized production build:
npm run buildThis will compile TypeScript and bundle the app into the dist/ directory.
You can preview the generated production build locally:
npm run previewKissan360 enforces strict code quality through ESLint.
To run the linter and find potential issues:
npm run lintThe project utilizes typescript-eslint for deep type-aware linting alongside specific rules from eslint-plugin-react-refresh to ensure React best practices are maintained.