This project demonstrates how to build a simple form in Next.js using Tailwind CSS for styling, Zod for form validation, and React Hook Form for managing form state. The form allows users to select their favorite fast food and write a description explaining why they like it.
- Basic understanding of React and TypeScript
- Familiarity with TailwindCSS
- Node and npm/yarn installed in your system
Clone the repository:
git clone https://github.com/rokasta12/fav-food.git
cd fav-foodInstall dependencies:
yarn install
# or
npm installStart the development server:
yarn dev
# or
npm run devOpen http://localhost:3000 with your browser to see the result.
The form is contained in the FavFoodForm.tsx component. This component uses the useForm hook from react-hook-form to manage form state and validation. The validation schema is defined with Zod and passed to useForm through the zodResolver.
The form data type, FavFoodFormType, is inferred from the validation schema. The onSubmit prop is a function that will be called with the form data when the form is submitted.
On form submission, the form data is displayed as a JSON alert in the browser.
You can access the live demo at fav-food.vercel.app
For a step-by-step guide on how this project was created, check out the tutorial on Medium.
Feel free to file an issue if you have any questions or suggestions for improvement.