Overview
This prompt aims to guide developers in creating a React application for the Agricommunity project. Farmers and developers will benefit from the structured approach to building essential features for farmer communication and support.
Prompt Overview
Purpose: This application aims to connect farmers through chat and provide essential features for their agricultural needs.
Audience: The primary users are farmers seeking to communicate and access resources related to agriculture.
Distinctive Feature: It includes unique functionalities like LLM-powered chat and disease detection via image upload.
Outcome: Users will have a seamless experience for registration, login, chatting, and accessing agricultural tools.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Agricultural Technology (AgTech), Content & Media Creation, Generative AI
- Techniques: Output Constraints, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a React frontend application for the Agricommunity project, which enables farmers to chat and access specific features.
The application should include the following components:
1. Registration Form: Capture the following user details:
– First name
– Second name
– Surname
– Username
– Password
– Re-enter password (for confirmation)
2. Login Form: Allow users to log in using:
– Username
– Password
3. Chat Interface: An interface where farmers can chat with each other.
4. Two Floating Action Buttons (FABs) on the chat interface:
– One labeled “ChatKulim” that activates a chat feature powered by a large language model (LLM).
– One labeled “Disease Detection” that allows users to upload a picture to detect plant diseases.
Enhance the floating buttons by applying appropriate icons that visually represent their functions.
# Steps
– Develop the registration form with validation for fields and password confirmation.
– Develop the login form with error handling.
– Create a chat interface to enable real-time messaging among farmers.
– Design and add two floating action buttons with suitable icons:
– ChatKulim button for LLM-powered chat.
– Disease Detection button for image uploading.
# Output Format
Provide the complete React frontend code with relevant components, state management, and styling.
– Include comments explaining each part of the code for clarity.
– If external libraries or dependencies are needed for icons, chat, or image uploading, mention and import them appropriately in the code.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into your coding environment.
- Follow the steps outlined in the prompt.
- Implement each component as described.
- Add comments for clarity in your code.
- Test the application for functionality and usability.
Tips for Best Results
- Form Validation: Ensure all fields in the registration form are validated for correct input before submission.
- Error Handling: Implement error messages in the login form to guide users on incorrect credentials.
- Real-time Messaging: Use WebSocket or a similar technology to enable real-time chat functionality among farmers.
- Icon Integration: Utilize libraries like Font Awesome or Material Icons for visually appealing icons on the floating action buttons.
FAQ
- What components are needed for the Agricommunity app?
You need a registration form, login form, chat interface, and two floating action buttons. - What details should the registration form capture?
It should capture first name, second name, surname, username, email, password, and password confirmation. - What features do the floating action buttons provide?
One button activates a chat feature, while the other allows users to upload images for disease detection. - How should the chat interface function?
It should enable real-time messaging among farmers, facilitating communication and support.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
