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-food
Install dependencies:
yarn install
# or
npm install
Start the development server:
yarn dev
# or
npm run dev
Open 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.