Skip to content

Cropland CROS - Proof of concept . Full stack project with React-TS on front-end and back-end API using python

Notifications You must be signed in to change notification settings

iamlaksh1/cropland-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Cropland CROS 📝

August 12, 2024 📝

Cropland CROS Proof of concept

❓ This repository hosts my full-stack project, Cropland CROS POC. The aim of this project is to explore whether we can develop and deploy the Cropland CROS site in-house using available open data, rather than relying on USDA resources.

Info

Technologies used 🔧

All the code in frontend and backend are made with TypeScript, Python and GDAL and with latest libraries and standards.

Frontend

  • Frontend powered by React, Vite, and Material UI for components.
  • Routing by React Router, state management by Tanstack Query (React Query).
  • Map powered by Mapbox.

Backend

  • Backend powered by Python using FastAPI and pixi framework. Here is the API document
  • GDAL used for raster manipulation

Basic features ⭐

  • Create a simple UI that allows users to draw a polygon on a map and calculate cropland statistics for the polygon.

    • The backend API currently takes only the 2022.tif file for calculations, but the year can be adjusted using a slider on the front end.

    • Display the JSON response in a draggable data table. The results will filter crop with 0 acres

    • In the area of interest, provide a list of U.S. states and display counties for the selected state.

    • For a chosen state or county, fetch the shape (GeoJSON) from tigerweb.geo.census.gov and show a notification for success or failure.

    • Note that the button in the area of interest is non-functional at the moment. In the future, it will call the backend API to retrieve county/state GeoJSON and compute crop statistics.

    • A custom hook (useHook) has been created for data fetching

Screenshots 📷

Frontpage

FrontPage

Area of Interest

Area of Interest

US state selection with Notification

US state

County with no data from API

County

Final output

County

Set up for Front-end APP🔧

Clone down this repository. You will need node and npm installed globally on your machine.

Installation:

npm install

To Start Server:

npm start

To Run Test Suite:

npm test

Note : App runs on port 5173 - this is port added in CORS origin list. If you different port, please update

Note 2: Download the 2022 Cropland Raster from USDA and rename to 2022.tif Download-link. Due to github size limit. Dummy file has been uploaded , please delete and use from USDA .Thanks!

About

Cropland CROS - Proof of concept . Full stack project with React-TS on front-end and back-end API using python

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published