🌱 Agrinova 2.0 - Futuristic Plant Monitoring System

A comprehensive IoT-based plant monitoring application that allows users to track and manage their plants' health in real-time. Monitor pH levels, humidity, and NPK (Nitrogen, Phosphorus, Potassium) values with AI-powered disease detection capabilities.

✨ Features

Core Functionality

User Authentication: Secure login and signup with password encryption
Plant Management: Add, view, edit, and delete plants
Real-time Monitoring: Track multiple sensor metrics for each plant
- pH Level monitoring
- Humidity tracking
- NPK (Nitrogen, Phosphorus, Potassium) measurements

Advanced Features

AI Health Diagnosis: Upload plant leaf images for instant AI-powered disease detection
Interactive Dashboards:
- Visual charts showing 7-day historical data
- Tab-based navigation for different metrics (All, pH Level, Humidity, NPK)
- Measured vs Ideal comparisons with progress bars
Plant Status Indicators: Visual health status (Healthy, Attention, Critical)
User Profile Management: Edit user information and theme preferences
Responsive Design: Mobile-first design with glassmorphism UI
Dark Mode Support: Toggle between light and dark themes

🛠 Tech Stack

Frontend

React 18.3 - UI library
TypeScript - Type safety
Vite - Build tool and dev server
React Router DOM - Client-side routing
Tailwind CSS - Utility-first CSS framework
shadcn/ui - UI component library
Recharts - Data visualization
React Query (TanStack Query) - Data fetching and caching
Lucide React - Icon library
Sonner - Toast notifications

Backend

Node.js - Runtime environment
Express.js 5.1 - Web framework
MongoDB - Database (via Mongoose)
bcryptjs - Password hashing
Multer - File upload handling
CORS - Cross-origin resource sharing
Google Generative AI - AI-powered disease detection
Gradio Client - ML model integration

🚀 Quick Start

Get the application up and running in 5 minutes:

Clone and Install

git clone <your-repository-url>
cd "Agrinova 2.0"

# Install backend dependencies
cd "Back End"
npm install

# Install frontend dependencies
cd "../Front End/agrinova-plant-pulse-main"
npm install

Configure Environment

# In Back End directory, create .env file
cd "../Back End"
echo "MONGODB_DATABASE=mongodb://localhost:27017/Agrinova" > .env
echo "PORT=3000" >> .env

Start MongoDB (if using local MongoDB)

# Windows
net start MongoDB

# macOS/Linux
sudo systemctl start mongod

Run the Application

# Terminal 1: Start Backend
cd "Back End"
npm start

# Terminal 2: Start Frontend
cd "Front End/agrinova-plant-pulse-main"
npm run dev

Access the Application
- Frontend: http://localhost:8080
- Backend API: http://localhost:3000

📁 Project Structure

Agrinova 2.0/
├── Back End/
│   ├── app.js                 # Main application entry point
│   ├── controllers/           # Request handlers
│   │   ├── loginController.js
│   │   ├── npkController.js
│   │   ├── plantController.js
│   │   ├── plantDataController.js
│   │   ├── plantDiseaceDectionController.js
│   │   └── userController.js
│   ├── models/                # MongoDB schemas
│   │   ├── plantDataModel.js
│   │   ├── plantModel.js
│   │   └── userModel.js
│   ├── routers/               # API route definitions
│   │   ├── loginRouter.js
│   │   ├── npkRouter.js
│   │   ├── plantDataRouter.js
│   │   ├── plantDiseaseDetectionRouter.js
│   │   ├── plantRouter.js
│   │   └── userRouter.js
│   ├── middlewares/           # Custom middleware
│   │   ├── streamToBase64.js
│   │   └── upload.js
│   ├── services/              # External service integrations
│   │   ├── geminiPrediction.js
│   │   └── gradioClient.js
│   └── package.json
│
└── Front End/
    └── agrinova-plant-pulse-main/
        ├── src/
        │   ├── components/    # Reusable UI components
        │   │   ├── AddPlantDialog.tsx
        │   │   ├── MobileNav.tsx
        │   │   ├── PlantCard.tsx
        │   │   ├── PlantHealthDiagnosis.tsx
        │   │   ├── SensorChart.tsx
        │   │   └── ui/        # shadcn/ui components
        │   ├── pages/         # Route pages
        │   │   ├── Account.tsx
        │   │   ├── NotFound.tsx
        │   │   ├── PlantDashboard.tsx
        │   │   ├── Plants.tsx
        │   │   └── Welcome.tsx
        │   ├── lib/           # Utilities and API clients
        │   │   ├── mockData.ts
        │   │   ├── plantAPI.ts
        │   │   ├── userAPI.ts
        │   │   └── utils.ts
        │   ├── hooks/         # Custom React hooks
        │   ├── App.tsx        # Main app component
        │   └── main.tsx       # Entry point
        ├── package.json
        └── vite.config.ts

🔧 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher) - Download
npm or yarn - Package manager
MongoDB - Database (local or Atlas)
Git - Version control

📦 Installation

1. Clone the Repository

git clone <your-repository-url>
cd "Agrinova 2.0"

2. Backend Setup

cd "Back End"
npm install

3. Frontend Setup

cd "../Front End/agrinova-plant-pulse-main"
npm install

⚙️ Configuration

Backend Environment Variables

Create a .env file in the Back End/ directory:

# MongoDB Connection
MONGODB_DATABASE=mongodb://localhost:27017/Agrinova
# Or for MongoDB Atlas:
# MONGODB_DATABASE=mongodb+srv://username:password@cluster.mongodb.net/Agrinova

# Server Port
PORT=3000

# Google AI API Key (for disease detection)
GOOGLE_AI_API_KEY=your_google_ai_api_key_here

# Gradio API URL (for ML model)
GRADIO_API_URL=your_gradio_api_url_here

Frontend Configuration

Update the API base URL in Front End/agrinova-plant-pulse-main/src/lib/plantAPI.ts and userAPI.ts:

const API_BASE = "http://localhost:3000"; // Update if backend runs on different port

🚀 Running the Application

Start Backend Server

cd "Back End"
npm start

The backend server will run on http://localhost:3000 (or the port specified in your .env file).

Start Frontend Development Server

Open a new terminal:

cd "Front End/agrinova-plant-pulse-main"
npm run dev

The frontend will run on http://localhost:8080 (or the port Vite assigns).

Access the Application

Open your browser and navigate to:

Frontend: http://localhost:8080
Backend API: http://localhost:3000

📡 API Documentation

Base URL

http://localhost:3000/api/v1

Authentication Endpoints

Login

POST /login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

User Endpoints

Create User

POST /users
Content-Type: application/json

{
  "firstName": "John",
  "lastName": "Doe",
  "email": "john@example.com",
  "password": "password123"
}

Get User

GET /users/:id

Update User

PUT /users/:id
Content-Type: application/json

{
  "firstName": "John",
  "lastName": "Doe",
  "email": "john@example.com",
  "isDarkMode": true
}

Delete User

DELETE /users/:id

Plant Endpoints

Create Plant

POST /plants
Content-Type: application/json

{
  "name": "Tomato Plant",
  "type": "Tomato",
  "ph": 6.5,
  "humidity": 65,
  "Nitrogen": 150,
  "Phosphorus": 100,
  "Potassium": 200,
  "userId": "user_id_here"
}

Get All Plants

GET /plants
GET /plants?userId=user_id_here  # Filter by user

Get Plant by ID

GET /plants/:id

Update Plant

PUT /plants/:id
Content-Type: application/json

{
  "ph": 6.8,
  "humidity": 70
}

Delete Plant

DELETE /plants/:id

Plant Data Endpoints

Create Plant Data

POST /plant-data
Content-Type: application/json

{
  "plantId": "plant_id_here",
  "type": "ph",
  "value": 6.5,
  "timestamp": "2024-01-20T10:00:00Z"
}

Get Plant Data

GET /plant-data
GET /plant-data?type=ph  # Filter by type

Disease Detection Endpoint

Detect Plant Disease

POST /plant-disease-detection
Content-Type: multipart/form-data

Form Data:
- img: [image file]

Response:

{
  "prediction": "['Tomato with Leaf Mold (94.0%)', ...]",
  "advice": "Disease detected: Tomato with Leaf Mold. Apply targeted treatment."
}

NPK Prediction Endpoint

Get NPK Prediction

POST /npk
Content-Type: application/json

{
  "N": 150,
  "P": 100,
  "K": 200,
  "crop": "Tomato"
}

🎨 Frontend Routes

Route	Component	Description
`/`	Welcome	Login/Signup page
`/plants`	Plants	List of all user's plants
`/plant/:id`	PlantDashboard	Individual plant details and analytics
`/account`	Account	User profile and settings
`*`	NotFound	404 error page

📊 Database Schema

User Model

_id: MongoDB ObjectId
firstName: String
lastName: String
email: String (unique, validated)
password: String (hashed)
isDarkMode: Boolean
plants: Array of Plant ObjectIds

Plant Model

_id: MongoDB ObjectId
name: String
type: String (plant category)
ph: Number
humidity: Number
Nitrogen: Number
Phosphorus: Number
Potassium: Number
userId: ObjectId (reference to User)

Plant Data Model

_id: MongoDB ObjectId
plantId: ObjectId (reference to Plant)
type: String (e.g., 'ph', 'humidity', 'n', 'p', 'k')
value: Number
timestamp: Date

🎯 Key Features in Detail

Plant Dashboard

Real-time Metrics: Display current pH, humidity, and NPK values
Historical Charts: 7-day line charts for all metrics
Ideal Ranges: Compare measured values against ideal ranges for each plant type
Progress Indicators: Visual progress bars showing how close values are to ideal
Tab Navigation: Switch between All, pH Level, Humidity, and NPK views
AI Health Diagnosis: Upload leaf images for disease detection

Plant Management

Add Plants: Create new plant entries with sensor data
View Plants: Card-based layout showing plant status and key metrics
Delete Plants: Remove plants with confirmation dialogs
Status Indicators: Color-coded status (Healthy, Attention, Critical)

User Account

Profile Editing: Update first name, last name, and email
Theme Toggle: Switch between light and dark modes
Logout: Secure session termination

🔐 Security Features

Password hashing with bcryptjs
CORS configuration for secure API access
Input validation on both client and server
Environment variable management for sensitive data

🌐 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

🐛 Troubleshooting

MongoDB Connection Issues

Ensure MongoDB is running locally or check Atlas connection string
Verify .env file has correct MONGODB_DATABASE value
For local MongoDB: Ensure MongoDB service is running (net start MongoDB on Windows, sudo systemctl start mongod on Linux/macOS)
For MongoDB Atlas: Check connection string format and IP whitelist settings
Verify database name matches in connection string and Mongoose configuration

CORS Errors

Check that backend CORS origin matches frontend URL
Update CORS settings in Back End/app.js if needed (default: http://localhost:8080)

Port Conflicts

Backend: Change PORT in .env file (default: 3000)
Frontend: Update vite.config.ts or use --port flag (default: 8080)
CORS: Ensure backend CORS origin matches frontend URL

API Connection Issues

Verify backend is running before starting frontend
Check API_BASE URL in frontend API files (lib/plantAPI.ts, lib/userAPI.ts) matches backend port
Ensure CORS is properly configured in Back End/app.js
Check browser console for CORS errors

📦 Building for Production

Build Frontend

cd "Front End/agrinova-plant-pulse-main"
npm run build

The production build will be created in the dist/ directory.

Deploy Backend

The backend can be deployed to platforms like:

Heroku
Railway
Render
DigitalOcean
AWS EC2

Make sure to set your environment variables in the deployment platform.

Deploy Frontend

The frontend can be deployed to:

Vercel
Netlify
GitHub Pages
AWS S3 + CloudFront

Update the API base URL in production to point to your deployed backend.

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Code Style

Follow existing code formatting
Use TypeScript for frontend code
Add comments for complex logic
Test your changes before submitting

📝 License

This project is licensed under the ISC License.

👥 Authors

Ahmad Al Khatib
Lana Fliti
Charbel Kadi

🙏 Acknowledgments

shadcn/ui for the amazing component library
Recharts for data visualization
Google Generative AI for disease detection capabilities
All contributors and supporters of this project

Made with 🌱 for plant lovers everywhere

Name		Name	Last commit message	Last commit date
Back End		Back End
Front End/agrinova-plant-pulse-main		Front End/agrinova-plant-pulse-main
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation