Krishibid – Crop Leaf Disease Detection App

A mobile application that integrates a TensorFlow Lite model for real-time crop disease prediction, enabling farmers and agricultural professionals to quickly identify diseases affecting corn, potato, rice, and wheat crops through image recognition.

UI Design

The application's user interface was designed in Figma to ensure a user-friendly and intuitive experience.

Features

Real-time Crop Disease Detection: Uses TensorFlow.js to identify diseases in corn, potato, rice, and wheat crops
Image Capture & Upload: Take photos directly with the camera or select from gallery
Social Features:
- Create and share posts about crop diseases
- Real-time comments and reactions
- Rating system
- User profiles with customizable information
Interactive Maps: Google Maps integration for location-based features
Smooth Animations: Powered by React Native Reanimated and GSAP
User Authentication: Secure login and signup with Firebase Authentication
Real-time Database: Cloud Firestore for storing user data and posts
Pagination: Efficient data loading for better performance

Technologies & Development Tools

Frontend Framework

React Native (v0.74.2) - Cross-platform mobile app development
Expo (v51.0.17) - Build, deploy, and iterate quickly

Machine Learning

TensorFlow.js (v4.17.0) - JavaScript library for training and deploying ML models
@tensorflow/tfjs-react-native (v1.0.0) - TensorFlow.js platform adapter for React Native
Teachable Machine - Model trained with 15 crop disease classes

Backend & Database

Firebase (v10.8.0)
- Firebase Authentication - User authentication
- Cloud Firestore - NoSQL database for storing posts, comments, and user data

Navigation

@react-navigation/native (v6.1.10) - Routing and navigation
@react-navigation/bottom-tabs (v6.5.14) - Bottom tab navigation
@react-navigation/native-stack (v6.9.18) - Stack navigation

UI Components & Styling

React Native Paper (v5.12.3) - Material Design components
React Native Elements (@rneui/themed v4.0.0-rc.8) - Cross-platform UI toolkit
styled-components (v6.1.8) - CSS-in-JS styling
react-native-vector-icons (v10.0.3) - Customizable icons

Animation Libraries

React Native Reanimated (v3.10.1) - Fluid animations and interactions
GSAP (v3.12.5) - Professional-grade animation library
gsap-rn (v0.0.18) - GSAP for React Native

Additional Features

React Native Maps (v1.14.0) - Google Maps integration
expo-camera (v15.0.14) - Camera functionality
expo-image-picker (v15.0.6) - Image selection from gallery
expo-location (v17.0.1) - Location services
react-native-ratings (v8.1.0) - Star rating component
moment (v2.30.1) - Date and time manipulation
@apollo/client (v3.10.8) - GraphQL client (for GitHub API integration)
axios (v1.6.7) - HTTP client

State Management

@reduxjs/toolkit (v2.0.1) - State management
react-redux (v9.1.0) - React bindings for Redux

Development Tools

Node.js - JavaScript runtime
npm or Yarn - Package manager
Expo CLI - Command-line tool for Expo

Disease Detection Model

The app uses a TensorFlow.js model trained with Teachable Machine to detect:

Crop Types & Diseases

Corn: Common Rust, Gray Leaf Spot, Healthy, Northern Leaf Blight
Potato: Early Blight, Healthy, Late Blight
Rice: Brown Spot, Healthy, Leaf Blast, Neck Blast
Wheat: Brown Rust, Healthy, Yellow Rust

The model processes images at 224x224 resolution and provides real-time predictions.

Prerequisites

Before setting up the project, ensure you have the following installed:

Node.js (v16 or higher) - Download
npm (comes with Node.js) or Yarn
Git - Download
Expo CLI (will be installed globally)
VS Code or Android Studio (for Android development) or Xcode (for iOS development on macOS)
Expo Go app on your mobile device (for testing)
- Android
- iOS

Setup Instructions

1. Clone the Repository

git clone https://github.com/shoaibramim/Krishibid.git
cd Krishibid

2. Install Dependencies

Using npm:

npm install --legacy-peer-deps

Or using Yarn:

yarn install

Note: The --legacy-peer-deps flag is used to handle peer dependency conflicts.

3. Firebase Configuration

The Firebase configuration is already included in firebase.js. However, for production use, you should:

Create your own Firebase project at Firebase Console
Enable Authentication (Email/Password provider)
Create a Firestore Database
Copy your Firebase config and replace the values in firebase.js:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

4. Environment Variables

Create a .env file in the root directory for environment variables:

EXPO_PUBLIC_Github_Access_Token=your_github_token_here

Note: The GitHub token is used for Apollo GraphQL integration. If you're not using GitHub API features, you can skip this.

5. Google Maps API (Optional)

If you want to use Google Maps features:

Get an API key from Google Cloud Console
Add the API key to app.json under the appropriate platform configuration

6. Start the Development Server

npm start
# or
expo start

This will open the Expo Developer Tools in your browser.

7. Run on Device/Emulator

Option 1: Run on Physical Device

Install Expo Go app on your phone
Scan the QR code from the Expo Developer Tools using:
- Android: Expo Go app
- iOS: Camera app (will open in Expo Go)

Option 2: Run on Android Emulator

npm run android
# or
expo start --android

Option 3: Run on iOS Simulator (macOS only)

npm run ios
# or
expo start --ios

Option 4: Run on Web

npm run web
# or
expo start --web

Building for Production

Build APK (Android)

# Install EAS CLI globally
npm install -g eas-cli

# Login to Expo account
eas login

# Configure the build
eas build:configure

# Build APK
eas build --platform android --profile preview

Build for iOS

eas build --platform ios

📁 Project Structure

Krishibid/
├── App.js                    # Main application entry point
├── app.json                  # Expo configuration
├── babel.config.js           # Babel configuration
├── firebase.js               # Firebase configuration
├── metro.config.js           # Metro bundler configuration
├── package.json              # Dependencies and scripts
├── assets/                   # Static assets
│   ├── fonts/               # Custom fonts (DM Sans)
│   └── trained_model/       # TensorFlow model files
│       ├── model.json
│       ├── metadata.json
│       └── weights.bin
├── components/              # Reusable components
│   └── PostCard.js         # Post component for feed
├── pages/                   # Application screens
│   ├── About.js            # About screen
│   ├── BottomTabs.js       # Bottom tab navigator
│   ├── ClickOrSelectImage.js  # Disease detection screen
│   ├── CreatePost.js       # Create post screen
│   ├── EditProfile.js      # Edit profile screen
│   ├── Feed.js             # Home feed screen
│   ├── Login.js            # Login screen
│   ├── Notifications.js    # Notifications screen
│   ├── Profile.js          # User profile screen
│   ├── Search.js           # Search screen
│   ├── SignUp.js           # Registration screen
│   └── StarterScreen.js    # Initial welcome screen
├── styles/                  # Styling files
│   └── PostStyle.js        # Post component styles
└── ERD/                     # Entity Relationship Diagrams

Troubleshooting

Common Issues

Metro bundler issues
```
# Clear cache and restart
expo start -c
```

Dependency conflicts

# Clean install
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

Android build issues
- Ensure Android SDK is properly installed
- Check Java version (JDK 11 or higher recommended)
iOS build issues (macOS)
- Ensure Xcode is installed
- Run pod install in the ios directory (if applicable)
TensorFlow model loading issues
- Ensure model files are in assets/trained_model/
- Check that model.json and weights.bin are properly bundled

Available Scripts

npm start - Start the Expo development server
npm run android - Run on Android device/emulator
npm run ios - Run on iOS device/simulator
npm run web - Run in web browser

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

Developer

Shoaib Uddin

GitHub: @shoaibramim

Support

For support, issues, or feature requests, please open an issue on the GitHub repository.

Note: This app was developed as part of an academic project demonstrating the integration of machine learning with mobile application development for agricultural technology solutions.

Name		Name	Last commit message	Last commit date
Latest commit History 70 Commits
ERD		ERD
assets		assets
components		components
pages		pages
styles		styles
.gitignore		.gitignore
.npmrc		.npmrc
App.js		App.js
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
firebase.js		firebase.js
metro.config.js		metro.config.js
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

Krishibid – Crop Leaf Disease Detection App

UI Design

Features

Technologies & Development Tools

Frontend Framework

Machine Learning

Backend & Database

Navigation

UI Components & Styling

Animation Libraries

Additional Features

State Management

Development Tools

Disease Detection Model

Crop Types & Diseases

Prerequisites

Setup Instructions

1. Clone the Repository

2. Install Dependencies

3. Firebase Configuration

4. Environment Variables

5. Google Maps API (Optional)

6. Start the Development Server

7. Run on Device/Emulator

Option 1: Run on Physical Device

Option 2: Run on Android Emulator

Option 3: Run on iOS Simulator (macOS only)

Option 4: Run on Web

Building for Production

Build APK (Android)

Build for iOS

📁 Project Structure

Troubleshooting

Common Issues

Available Scripts

Contributing

License

Developer

Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages