Soil-Farming-Agent Tailwind Templates

Soil Farming Agent

A smart web app for managing soil data, recommending crops, tracking distributors, and visualizing analytics. Built with Next.js, Firebase, and Tailwind CSS for modern, scalable, and user-friendly farm management.

๐ŸŒฑ Soil Farming Agent

A smart web-based platform designed to assist farmers and agricultural officers in managing soil health, crop recommendations, distributor networks, and user data. Built using Next.js 14, Firebase, and Tailwind CSS, this application aims to simplify agricultural decision-making with a user-friendly dashboard, data visualization, and integrated Firestore backend.


๐Ÿš€ Features

  • ๐Ÿ” Admin Authentication with Role-Based Access
  • ๐Ÿ“ฅ Soil Form Submission and Listing
  • ๐Ÿงช Smart Crop Recommendation based on soil properties
  • ๐Ÿ›’ Distributor Form with real-time Firestore storage
  • ๐Ÿ“„ User Management: View all users with search functionality
  • ๐Ÿ”Ž Search & Pagination for soil data
  • ๐Ÿ—‚๏ธ Dynamic & Modular code architecture for scalability

๐Ÿงช Tech Stack

  • Next.js 14 (App Router)
  • Firebase Firestore (Database, Auth)
  • Tailwind CSS
  • React Hooks
  • React Toastify for notifications
  • EmailJS (optional - email verification)
  • Chart.js / Recharts for analytics

๐Ÿ” .env.local Setup

Make sure to create a .env.local file in your root directory and add the following Firebase credentials:



๐Ÿ—๏ธ How to Create the Project

npx create-next-app@latest soil-farming-agent --app --typescript
cd soil-farming-agent
npm install

โ–ถ๏ธ How to Run Locally
npm run dev

๐Ÿ“ Project Folder Structure

soil-farming-agent/
โ”œโ”€โ”€ app/
โ”‚   โ”œโ”€โ”€ admin/
โ”‚   โ”‚   โ”œโ”€โ”€ dashboard/page.jsx
โ”‚   โ”‚   โ”œโ”€โ”€ view-soil/page.jsx
โ”‚   โ”‚   โ”œโ”€โ”€ user-details/page.jsx
โ”‚   โ”‚   โ””โ”€โ”€ distributor-form/page.jsx
โ”‚   โ”œโ”€โ”€ analytics/
โ”‚   โ”‚   โ””โ”€โ”€ page.jsx
โ”‚   โ”œโ”€โ”€ soil-form/
โ”‚   โ”‚   โ””โ”€โ”€ page.jsx
โ”‚   โ”œโ”€โ”€ login/
โ”‚   โ”‚   โ””โ”€โ”€ page.jsx
โ”‚   โ””โ”€โ”€ layout.jsx
โ”‚
โ”œโ”€โ”€ components/
โ”‚   โ”œโ”€โ”€ Navbar.jsx
โ”‚   โ””โ”€โ”€ Chart.jsx
โ”‚
โ”œโ”€โ”€ lib/
โ”‚   โ””โ”€โ”€ Firebase.js
โ”‚
โ”œโ”€โ”€ public/
โ”‚
โ”œโ”€โ”€ styles/
โ”‚   โ””โ”€โ”€ globals.css
โ”‚
โ”œโ”€โ”€ .env.local
โ”œโ”€โ”€ tailwind.config.js
โ”œโ”€โ”€ next.config.js
โ””โ”€โ”€ README.md

Top categories

Loading Svelte Themes