A rich component for interviewing a React developer

jira-ticket.md

Implement a form

Description

Develop a React form using react-hook-form to capture user input for a name field and position coordinates. The position is selected by clicking inside a rectangular block or by adjusting X and Y sliders. The form should submit data to the server via fetch().

Data Model

{
  name: string;
  position: {
    x: number;
    y: number;
  }
}

UI Requirements

• A text input for name.
• A rectangular area where users can click to select a coordinate (x, y).
• Two sliders to fine-tune the x and y coordinates.
• A submit button that sends form data to the server using fetch().

Acceptance Criteria

• User can enter a name in the text input.
• User can click anywhere inside the rectangle to set x, y coordinates.
• Sliders update the respective X and Y values in real-time.
• Clicking inside the rectangle updates the slider positions accordingly.
• The form data is validated before submission (e.g., name is required, coordinates must be within valid bounds).
• Upon submission, data is sent to the server using fetch() in JSON format.
• Proper error handling and feedback for submission success/failure.