Crop AI Advisor

1. How to build a frontend using React

We learned how to use React to update the screen automatically when values change.

We used useState to store moisture, temperature, theme, and results.

1. Styling with Tailwind CSS

Tailwind made it easy to design the UI quickly.

We used it for layout, colors, spacing, and dark mode.

1. Adding Light/Dark Theme Toggle

We learned how to switch themes and save the user’s choice using localStorage.

1. Working with API functions

We created a fake sensor API that gives random moisture/temperature.

This helped understand how real apps read data from APIs.

1. Simple Crop Recommendation Logic

The project used a simple scoring method to match soil values with ideal crop conditions.

1. Adding Small Animations

We used Framer Motion to make elements fade and slide smoothly.

Challenges Faced

1. Designing the UI

Making the dashboard look clean and organized took effort.

Deciding where each button and section should go was challenging.

1. Theme Handling

Making sure dark mode works everywhere without breaking styles was a bit tricky.

1. Mixing Manual Input and API Input

When switching between slider values and API values, we had to keep the UI consistent.

1. Building the Recommendation Logic

Choosing how to score and rank crops to get meaningful results took some thinking.

1. Animations

Adding animations without making the app slow or distracting required testing.

Built With

• english