CROP DATA React + Flask

A Web application for analyzing and showing agricultural production data in India.

Table of Contents

• Introduction
• Installation
  • Steps
  • OtherRequirment
• Components
• Images

Introduction

The two tables provides yearly insights into maximum and minimum crop productions and details of average crop yields and cultivation areas across different crops.

• frontend technologies: React , AXIOS
  
• backend technologies: Flask, Pandas, Flask CORS
  

Installation

Steps

Initial Steps

• Clone the github repository : git clone https://github.com/ishaj72/CropData.git
• Navigate to the project : cd CropData

For frontend

• Install frontend dependencies
  -cd client
  -npm install
  -npx create-react-app
  -npm install axois
• Start your project : npm start

For backend

• Install backend dependencies
  -cd flask-server
  -python -m venv venv(create virtual environment)
  - .\venv\Scripts\Activate(activate the server)
  -pip install flask
• Start your project : python server.py

Prerequisites

• To install pandas

• python -m pip install --upgrade pip
• python -m pip install numpy pandas --user

• To install cors

• python -m pip install flask-cors

Components

Backend

Implemented in Python, the Flask application loads agricultural production data from CSV files, processes it to compute metrics such as maximum and minimum crop productions per year, and calculates average yields and cultivation areas for different crops. The processed data is exposed through RESTful APIs.

• Open browser through : http://localhost:5000/api/tables

Frontend

Built with React.js, the frontend fetches data from the Flask backend and dynamically renders two tables:
Table 1: Displays the maximum and minimum production crops per year.
Table 2: Shows the average yield and cultivation area for various crops.

• Open browser through: http://localhost:3000/

Images

• Table 1

• Table 2

• React Page