Git Product home page Git Product logo

cropforesight-frontend's Introduction

CropForesight (Frontend)

This Repository includes the frontend code of the CropForesight website. The frontend of the project is written in HTML, CSS, Javascript, and ReactJS. Before moving ahead, a short intro about the project.

CropForesight🌾

CropForesight is an advanced website designed to assist farmers and agriculture enthusiasts in making smart choices about which crops to grow on their land. It achieves this by using special computer programs that can learn from data and environmental information. These programs take into account factors like soil nutrients, rainfall, pH levels, and weather conditions. With all this data, CropForesight can accurately predict the best crop to cultivate, helping farmers maximize their productivity and yield. It's like having a knowledgeable farming expert to guide you towards success!

🌐 Live Demo

Table of Contents

Features

  • Intelligent crop recommendation based on soil composition, rainfall, pH, potassium, humidity, and temperature.
  • User-friendly interface to input land and environmental parameters.
  • Efficient machine learning model leveraging Gaussian Naïve Bayes algorithm.
  • Responsive frontend developed using ReactJS for seamless user experience.
  • Scalable backend powered by FastAPI for quick data processing.
  • The platform can analyze historical agricultural data to identify trends and patterns, aiding in better decision-making for future crops.
  • CropForesight can utilize its data analysis capabilities to predict and warn users about potential pest and disease outbreaks, allowing for timely preventive measures.
  • By integrating real-time weather data, CropForesight can provide up-to-date recommendations, adapting to sudden changes in weather patterns for better accuracy.

Technologies

HTML, CSS, Javascript, ReactJS

Usage

To experience the power of CropForesight, follow these simple steps:

✅ Visit the CropForesight website: https://abhijeet141.github.io/CropForesight-FrontEnd/.

✅ Enter the required details such as soil nitrogen value, phosphorus value, rainfall, pH, potassium, humidity, and temperature.

✅ Click on the "Recommend Crop" button to generate the optimal crop recommendation.

✅ Explore the recommended crop and gain insights into its suitability for your land.

Local Development

If you want to contribute to CropForesight or run it locally for development purposes, follow these steps:

  1. Clone the frontend repository:

    git clone https://github.com/abhijeet141/CropForesight-FrontEnd.git
  2. Change to the project directory:

    cd CropForesight-FrontEnd
  3. Install the required dependencies:

    npm install
  4. Run the frontend:

    npm start
  5. Clone the backend repository:

    git clone https://github.com/abhijeet141/CropForesight_BackEnd.git
  6. Change to the CropForesight_BackEnd directory:

    cd CropForesight_BackEnd
  7. Install the required dependencies:

    pip install -r requirements.txt


8. Run the backend:

```sh
 uvicorn main:app --reload
  1. Open the website in your browser at http://localhost:3000 to access the local instance of CropForesight.

Deployment

✅ CropForesight's frontend is deployed and can be accessed online at https://crop-foresight-front-end.vercel.app/.

✅ Feel free to explore the website and witness the power of smart crop recommendation firsthand!

Contributing

We welcome contributions from anyone who is interested in improving this project. If you'd like to contribute, here are some ways you can get started:

  • Submit a bug report if you find any issues with the application.
  • Suggest new features or improvements.
  • Submit a pull request to fix a bug or add a feature after an issue is assigned to you.

To submit a pull request, please follow these steps:

  1. Fork the Project
  2. Clone your forked repository
 git clone https://github.com/<your_github_username>/CropForesight-FrontEnd.git
  1. Now go ahead and create a new branch and move to the branch

    git checkout -b fix-issue-<ISSUE-NUMBER>
  2. After you have added your changes, follow the following command chain

    • Check the changed files
     git status -s
    • Add all the files to the staging area
      git add .
      or
      git add <file_name1> <file_name2>
    • Commit your changes
     git commit -m "<EXPLAIN-YOUR_CHANGES>"
  3. Push your changes

    git push origin fix-issue-<ISSUE-NUMBER>
  4. Open a Pull Request

Congratulations! 🎉 you've made your contribution.

GSSOC'23 Issue TimeLine

  • Once an issue is assigned,the assignee is expected to submit a pr for review withing a week of the assignment.

  • If the assignee fails to comply with the deadline, the issue will be assigned to the next person who had who had requested to be assigned.

GSSOC'23 Pointer System

Level 1 - Documentation/Minor bug fix

Points - 10

  • Contributors can update existing documentation, write new documentation for features or code and improve the overall organisation and clarity of the projects documentation.

  • Minor bug fixes refer to fixing small isolated issues in the codebase.

  • Fixing issues such as typos, brokel links, or minor performance problems.

  • Bug fixes are an important part of maintaining stability of and reliability of of an open-source project and every bug fix, no matter how small, contributes to the overall health of the project.

Level 2 - Enhancement of existing features

Points - 25

  • Feature or enhancement contributions refer to adding new functionality to an open source project.

  • Contributors can add new features, improve existing features, or add new functionality to existing features.

Level 3 - Refactoring/ Adding functionalities

Points - 45

  • Core contributions, such as implementing major features or refactoring significant parts of the codebase. This needs a deep understanding of the codebase and its patterns.

Please follow the cotribution guide in all your interactions with the project. We will review your pull request and provide feedback. Once your changes are approved, we will merge them into the main branch.

Contributors ✨

We would like to express our heartfelt gratitude to the following contributors for their valuable contributions to Friday: We would like to express our heartfelt gratitude to the following contributors for their valuable contributions to CropForesight-FrontEnd:

Thanks to these wonderful people.

Our Contributors

abhijeet141 Commits: 173

SubhamB2003 Commits: 24

SyedImtiyaz-1 Commits: 12

AlfiyaSiddique Commits: 11

rishuraj1 Commits: 10

NamandeepNegi Commits: 8

Sameep002 Commits: 7

Tisha6661 Commits: 7

krutikajichkar Commits: 6

akuldeepj Commits: 6

karthiknadar1204 Commits: 6

Akshatchaube01 Commits: 5

Prajwal0225 Commits: 5

Avinash905 Commits: 5

Pragati-3003 Commits: 5

BhartiNagpure Commits: 4

abhi03ruchi Commits: 4

1Shubham7 Commits: 4

thestarsahil Commits: 4

somenath203 Commits: 3

kaur-rajdeep Commits: 3

HimanshuNarware Commits: 3

akshaysoni10 Commits: 2

Tarun0951 Commits: 2

dheeraj1129 Commits: 2

Dimple-Choudhary Commits: 2

Geeta259 Commits: 2

GiriprasadKrishnamurthy Commits: 2

Harshu467 Commits: 2

kaashikaagrawal Commits: 2

License

This project is licensed under the MIT License.

Please feel free to modify the sections and add any additional information or badges relevant to your project. Let me know if you need further help.

Back to top

cropforesight-frontend's People

Contributors

1shubham7 avatar abhi03ruchi avatar abhijeet141 avatar abhivic000 avatar akshatchaube01 avatar akuldeepj avatar alfiyasiddique avatar avinash905 avatar bhartinagpure avatar giriprasadkrishnamurthy avatar harshu467 avatar himanshunarware avatar kaashikaagrawal avatar karthiknadar1204 avatar kaur-rajdeep avatar krutikajichkar avatar manishaswain8 avatar namandeepnegi avatar nashira26 avatar parasss19 avatar pragati-3003 avatar prajwal0225 avatar rishuraj1 avatar sabhisharma-ise avatar sameep002 avatar somenath203 avatar subhamb2003 avatar syedimtiyaz-1 avatar thestarsahil avatar tisha6661 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

cropforesight-frontend's Issues

Home Page Ui Need Padding

The home page of the website looks off it needs some padding and some improvement
Please assign this to me i really want to work on this

Make a proper navbar that will be shown on about page too

As of now the navbar code is written in home.js only which is not standard way so that it will make load on home.js I will make a different component known as navbar.js and will integrate it in so that code will become more readable and navbar will also be visible on every of page of code .

[Gssoc'23] About page is empty

DESCRIPTION:-
The about page is empty so I would like to add some images and info about your website so that it will be clear and user friendly.

please assign me this issue

Improving the UI of the About Page

Issue

I will be improving the UI of the About Page section
I will be proper alligning items on the page

Screenshots

image

Please assign me this issue under GSSOC'23

Adding a custom navbar

Issue

I will be making a custom scroll bar for all the pages of your website

Please assign me this issue under GSSOC'23

Creating a Landing Page

The current landing page doesn't look very appealing, so i wanted to enhance it.

-> by adding parallex effect .
-> Also by adding some more Features .

therefore please assign me this task under GSSOC'23

Thank you

Improving contact us page

I'd like to work on improving the UI of the current contact us page of the website, under GSSoc'23

Make the website responsive for small screen

The website is not responsive for small screen. The weather button is getting hidden and the images are not coming properly.
image
For 320*364 screen this error is coming. I want to fix it and make the site responsive.

NEW FEATURE AND BUG FIX REQ.

1st contact form is not properly padded.
image
2nd i would like to add name of website at the right side of logo.
image
3rd a copy right reserved footer
Untitled

About us page better UI

About us page need some alignments and will add a slideshow of actual images of website pages(like landing page, predict crop page and the result box) instead of just one static image

Unreadable home page

@abhijeet141 I would like to work on the homepage for making the UI(button) better,make changes in the home to be more apeling and the text readable as it is not having any different font from the video and it even overlaps with it and changing the button as it doesn't suit this background could you assign this task to me under GSSoC'23

image

Clarification needed for form filling

Description:

I encountered some confusion while filling out the form for obtaining crop suggestions based on soil contents, environmental factors, and weather conditions. The form lacks clear instructions regarding the units to be used and the specific format for providing inputs. Additionally, I am interested in researching and identifying normal values for these parameters to improve the accuracy of the predictions.

Steps to Reproduce:

  1. Visit the form for obtaining crop suggestions.
  2. Attempt to fill out the form, providing inputs for soil contents (e.g., nitrogen, phosphorus), temperature, pressure, and rain.
  3. Encounter confusion regarding the units and the expected format for the inputs.

Expected Behavior:

Users should be provided with clear instructions regarding the units and format required for filling out the form to obtain accurate predictions.

Actual Behavior:

The form lacks clear instructions, leading to confusion about the units and the expected format for providing inputs.

Additional Information:

To address this issue and contribute to the project, I would like to explore and identify the normal values for these parameters. This research will help improve the accuracy of the crop suggestions by providing a baseline for comparison. I am willing to take up this task and work on providing a comprehensive list of normal values for each parameter.

Proposed Solution:

Add clear instructions within the form, specifying the units (e.g., ppm, °C) and the expected format for inputs (e.g., numerical values, text).
Provide examples or tooltips to assist users in correctly filling out the form.
Assign me the task of researching and documenting normal values for each parameter to enhance the accuracy of crop predictions.

Please let me know if you need any further information or if there are any additional details I should include in the issue.

Back to home button

I want to add a back to home button in the "Crop Recommendation" page as there is no button to go back to the home page

Here is the screen-shot


Screenshot 2023-06-21 172905


@abhijeet141 I want to work in this issue

Improve the UI of the Weather page...

Hello, I am in GSSOC'23....

I want to add features in the weather page. Like It is giving the temperature but it isnt giving the scale in which the temperture is given. and also we can use some pics to say about the temperature like we can keep a sun pic if it is sunny and hot and clouds if it is cloudy based on the temperature. And we can improve the UI of the page.

I want to contribute on this. Please assign this issue to me.

Add JS Validation on Contact Form

I want to add JS validation on Contact form to prevent from unwanted data.
1)Showing Error message on blank field
2)Email validation

If any error occurs on particular field that field can be shown by red border to indicate something happens wrong on that field.
Screenshot (315)

Here is demo below:
demoform

@abhijeet141 I want to contribute on this project by adding a validation in contact form to enhancing UI under GSSOC'23.

Contact page

Since the webpage lacks a contact page I would like to create one can you assign me as a gssoc'23 contributor

Form Validation

Currently, the signup and signin pages on our platform lack proper form validation. To enhance the user experience and ensure accurate data input we need form-validation. For example PH level range goes from 0 - 14. and as of now a user can enter ph level in negative as well as more then 14. Assign this issue to me under the label Gssoc'23 with the appropriate level, i want to work on this
image

Proper alignment on the home page

As seen in the image below, all the text items look very close each other which does not look good.
Proper alignment and spacing is required between the pieces of text to look the web page more attractive.

image

I want to work on this issue.
Please assign me task under GSSoC'23.

Create a section on the website to provide information about crop specific practices

Crop-Specific Best Practices
Provide detailed information and best practices for each recommended crop. This can include specific planting techniques, fertilization schedules, irrigation methods, disease management strategies, and harvesting practices. By offering comprehensive guidance, CropForesight can support farmers throughout the entire crop lifecycle.

kindly allow me to work on this issue under GSoC'23

[REQUEST] Contact us page - ui change #gssoc23

The contact us form's ui is unorgranized. I would like to make some formatting to that. And also the about us page's ui needs a little alignment. Please assign me the issue. I would be happy to contribute. #gssoc23

Allign buttons and text box

Issue

I will be alligning text box and button on the home page in a vertical manner and centering them

Screenshots

image

Please assign me this issue under GSSOC'23

Adding more attributes in weather page

@abhijeet141 sir,
I am GSSOC 23 contributor,
Wanted to add more attributes/information to the weather page
when we search for it shows only the weather condition
listed things are want to add

  • the temperature in Celsius form
  • a small logo of a weather condition and cloud beside the condition

here is just an example of what I want to make a look weather page
Screenshot 2023-06-21 211515
Screenshot 2023-06-21 205932

{GSSoc'23} Feature Request: Sitemap Addition for Website

Problem:
The current website does not have a sitemap, making it difficult for search engines and users to navigate and discover all the pages and content on the site. This can result in lower search engine rankings, decreased visibility, and a poor user experience.

Solution:
I would like to request the addition of a sitemap to the website. A sitemap is a file that lists all the URLs and metadata of a website's pages. It helps search engines crawl and index the site more effectively, improving its visibility in search results. Additionally, a sitemap provides a structured overview of the website's content, allowing users to easily find and navigate to specific pages.

Footer

Every Website has footer , without footer website cannot be standard This website need proper footer. Assign it to me, I can create better footer

Center-align title in about section

The title in the about section of the website is currently left-aligned. I would like to center-align it so that it is more visually appealing.

Please assign me this issue!

I'm a GSSOC'23 Contributor

Improving Contact page

@abhijeet141 sir,
I am GSSOC 23 contributor.
I want to change the contact page UI listed as are idea

  • contact Us form should be in the center
  • better alignment of the form
  • footer where all social account logos are present
    Screenshot 2023-06-21 205901

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.