Watch this project video to perfect forms in NextJS with react hookform, zod, useFormState hook, useFormStatus hook, and submit the form to MongoDB database using server action.

Table of Contents:

00:00 - intro
01:17 - project demo
03:09 - spinning up a next project
13:01 - hyperui.dev for UI
15:56 - The Form UI
18:45 - react hookform
27:24 - Zod for validation
40:10 - displaying form errors with hookform
51:56 - set the image using setValue from useForm
56:22 - show loading state using isSubmitting
01:01:46 - Image Preview
01:08:39 - NextJS Server action
01:12:55 - server action
01:15:33 - useFormState Hook
01:27:47 - return errors from server action
01:34:52 - displaying error state from server on UI
01:40:14 - Amazon S3 Bucket
01:42:39 - Getting S3 Bucket policy
01:46:05 - creating User for our s3 bucket
02:10:36 - useRef to clear our form data
02:14:32 - useFormStatusHook for loading state
02:22:25 - MongoDB database
02:33:38 - model and schema for our database
02:40:53 - Server action to senddata to MongoDB
02:56:56 - displaying the products
03:03:50 - fixing the UI some more
03:07:29 - button to move between pages
03:10:20 - wrap up


#link to GitHub Repository.. please give a star ⭐
https://github.com/eldominics/nextjs-...

#NextJs Form course--- check it out
   • NextJS Forms (useFormState, useStatus...  


#aws S3 Bucket Policy
{
"Version": "2012-10-17",
"Id": "Policy1726391015899",
"Statement": [
{
"Sid": "Stmt1726391002617",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:*",
"Resource": "arn:aws:s3:::product-form-bucket/*"
}
]
}