Your task is to create a simple registration form using Next.js, react-hook-form, and react-query. The form should collect user information and send it to a mock backend endpoint. The backend should log the received data and return a success response.
-
Use Next.js (latest stable version).
-
Use react-hook-form for form handling.
-
Use react-query for mutation handling (form submission).
-
Use zod for schema-based validation.
-
The form should include the following fields:
- Email (required, valid format)
- Name (required)
- Age (required, must be a number between 18 and 99)
- Phone Number (required, basic validation)
- Checkbox: "I agree with the Terms of Use" (must be checked to submit)
-
Display appropriate validation messages under each field.
-
Disable the submit button until the form is valid and the checkbox is checked.
-
On successful submission:
- Display a success message (e.g., toast or alert).
-
Show loading state during submission.
- Implement a simple Next.js API route (e.g.,
pages/api/register.ts). - Log the request body to the server console.
- Return a JSON response:
{ success: true }.
- Use TypeScript.
- Style is up to you (basic styling is sufficient — TailwindCSS or plain CSS preferred).
- Use clear component structure and clean code.
- Share a link to a GitHub repo (make sure it’s public)