multi step form tutorial next js react hook form

This is a Junior web developer tutorial that I felt the need to share and give back to the community since it is something that I struggle with in the past.
It's no where near perfect, there are some mistakes I could have avoided such as naming the custom hook with a starting capital letter "Use" instead of "use" and the name of the components that I renamed on the declaration but forgot to renamed when I imported, but overall I feel happy about that I achieved. Hope this help others
On this Tutorial I address how to implement a Multi Step Form using Next js, Shadcn ui, React-Hook-Form, TypeScript, Zod, Also I show how to add validation on each step, navigation between steps and how to abstract the business logic from the form and place it inside of a custom Hook, to adapt the Single Responsibility principle (to some extend)

[avinashdubey]

Man you saved the day. I have been searching for a tutorial to get this done and finally i found your video. Thank you so much for putting all the efforts and explaining things to make things easier. Thank you so much.

[henriknasmark]

Great tutorial so far. You could just use button disable to not let steps go to <1 or >3

[mahirramani]

🙏 Great Content ❤
Can you give a video/logic for conditional rendering with validation?
Eg.
Are you student?
Yes -> then University Name field will be shown with validation too.
No -> then University Name field will not be displayed.
this way ....
Basically i am making Admission Website for my Hostel.
Kindly reply..