Building Great Forms with React Hook Form & Zod

In this video we build a Sign up form and integrate it with a dummy backend API. We discuss about the structure of the form, the separation of concerns in a few components, validation using Zod as well as handling server errors.

Useful Links (which I cannot yet add as link due to youtube being strict for new accounts)

Github Repo: github.com/vladnicula/making-forms-great-again-with-react-hook-form
React Hook Form: react-hook-form.com
React Daisy UI: react.daisyui.com/?path=/story/welcome--page
Zod: github.com/colinhacks/zod
HookFrom Integration with Zod: react-hook-form.com/get-started#SchemaValidation
Imperative Handle Hook: beta.reactjs.org/reference/react/useImperativeHandle

Chapters:
0:00:00 Intro.
0:02:07 Final Result Overview.
0:03:19 Starter Project Overview.
0:05:01 Building the Basic Form.
0:18:44 Reusable Text Field.
0:33:10 Form Validation with Zod.
0:44:45 Submitting the Form.
0:56:10 Handling Server Errors.
1:21:00 Disabling the button while submitting.
1:23:57 Working with Redirects and Routing.
1:33:07 Recap and Outro.