RentRipple / RentRipple-Frontend

MIT License
1 stars 0 forks source link

Create UI for Adding Property #29

Open YashSahsani opened 3 weeks ago

YashSahsani commented 3 weeks ago

Description: Develop a user interface using React that allows users to add a new property listing. The form should collect detailed information about the property, its features, utilities, and owner details. Upon submission, the form data should be sent to the backend API to store the property details in the database. Acceptance Criteria:

  1. Form Creation:
    • Create a form in React with input fields for all required property details.
  2. Field Validation:
    • Implement client-side validation to ensure all required fields are filled out correctly.
  3. API Integration:
    • Integrate with the backend API to submit the form data.
  4. User Feedback:
    • Provide feedback to the user upon successful submission or display error messages if the submission fails.
  5. Responsive Design:
    • Ensure the form is responsive and works well on different devices and screen sizes. Tasks:
  6. Design UI:
    • Design the layout and UI for the Add Property form using React.
  7. Form Fields:
    • Create form fields for the following property details:
      • Address Line 1
      • City
      • State
      • Country
      • Postal Code
      • Description
      • Price
      • Lease Length
      • Deposit
      • Image URLs (support multiple)
      • Location
      • Extra Features
      • Features (checkboxes for parking, laundry, etc.)
      • Utilities (checkboxes for electricity, water, etc.)
      • Owner Details (name, email, phone, image URL, rating)
  8. Validation:
    • Implement client-side validation for required fields.
  9. API Call:
    • Write the logic to send the form data to the backend API (/api/property).
  10. User Feedback:
    • Display success message upon successful submission.
    • Display error messages if the submission fails.
  11. Styling:
    • Style the form to ensure a user-friendly experience.
  12. Testing:
    • Test the form to ensure all functionalities work as expected and handle edge cases.

Description: Develop a user interface using React that allows users to add a new property listing. The form should collect detailed information about the property, its features, utilities, and owner details. Upon submission, the form data should be sent to the backend API to store the property details in the database. Acceptance Criteria:

  1. Form Creation:
    • Create a form in React with input fields for all required property details.
  2. Field Validation:
    • Implement client-side validation to ensure all required fields are filled out correctly.
  3. API Integration:
    • Integrate with the backend API to submit the form data.
  4. User Feedback:
    • Provide feedback to the user upon successful submission or display error messages if the submission fails.
  5. Responsive Design:
    • Ensure the form is responsive and works well on different devices and screen sizes. Tasks:
  6. Design UI:
    • Design the layout and UI for the Add Property form using React.
  7. Form Fields:
    • Create form fields for the following property details:
      • Address Line 1
      • City
      • State
      • Country
      • Postal Code
      • Description
      • Price
      • Lease Length
      • Deposit
      • Image URLs (support multiple)
      • Location
      • Extra Features
      • Features (checkboxes for parking, laundry, etc.)
      • Utilities (checkboxes for electricity, water, etc.)
      • Owner Details (name, email, phone, image URL, rating)
  8. Validation:
    • Implement client-side validation for required fields.
  9. API Call:
    • Write the logic to send the form data to the backend API (/api/property).
  10. User Feedback:
    • Display success message upon successful submission.
    • Display error messages if the submission fails.
  11. Styling:
    • Style the form to ensure a user-friendly experience.
  12. Testing:
    • Test the form to ensure all functionalities work as expected and handle edge cases.