Learn Next.js 14 Server Actions With This One Project (UseFormStatus, UseFormState, Error Handling)

-How to use server actions in React server components (via form action)
-How to use server actions in client components
-How to use server actions with React Hook Form & Zod validation
-How to use useFormState and useFormStatus
-How to handle errors in server actions (with useFormState and React Hook Form)
-How to enable progressive enhancement so your website works without JavaScript
-How to create reusable components with Tailwind CSS, forwardRef, and TypeScript
-How to use Vercel Blob Storage and Vecel Postgres together with Prisma ORM (with full-text search & pagination)
-How to create an admin dashboard protected by Clerk authentication
-How to set up and use Tailwind CSS together with Prettier and Shadcn UI components

Project files:

📣 Follow Coding in Flow on social media:

Timestamps:
0:00 - Intro & project overview
24:19 - Shadcn UI Setup
31:00 - Vercel Postgres, Vercel Blob & Prisma setup
42:35 - Job list server component
1:09:06 - Server action in server component (Job filter sidebar)
1:54:02 - Filter results from URL search params + useFormStatus
2:22:27 - Navbar, footer, metadata
2:38:25 - React Hook Form + Zod validation
4:16:14 - Server action in client component (+ file upload)
4:37:26 - Job details page (React-markdown, generateStaticParams, generateMetadata, React cache)
5:26:20 - UseFormState (Approve/delete jobs)
6:00:35 - Pagination (Prisma & PostgreSQL)
6:13:43 - Deployment (Vercel)

[nachiketpushkarna]

What i genuinely like about you is, that you are not like a normal tech youtuber, who's hungry for views. You are actually teaching with industry level best practices and producing quality content. Keep up the great work man !!

[joshtriedcoding]

Woah amazing work man, congrats on getting such a huge project out!!

[AmphibianDev]

10/10 Web Dev coding tutorial, the best on YouTube, in my opinion.
I want to say, the fact that you took the time to first show the simple example and then step by step add more libraries, it's really amazing and shows how much thought you put into this.
And every library you chose to use here is the modern and best way to code in my opinion. I researched a lot and came up with the exact tech stack you used right here.

[ebratz]

Thank you so much for this video! You unblocked so many questions I had before... very good quality and condensed content. You nailed on removing boilerplate, repetitive and worthless parts, focusing on what really matters!

[Charizm]

I'm just amazed at the quality of this video. The amount of effort that has been put into a free content is amazing. Love how you go deep into why you were doing certain things a certain way.

[orzarhi]

- Regarding environmental variables, you can simply select everything and paste. 6:15:36

[ScottUmble]

I've been wanting to just have someone building nextjs projects in the background while I do other things. I'm not following along, and I miss stuff, but I pick things up every watch and it's perfect. Thank you for doing these!

[Alkyen]

One of the best tutorials about new react features I've seen so far, thanks a lot!

[kaiiemsawat]

I am about half of the tutorial now. And as always, this is another wonderful piece. Thank you Florian.

[laxmanchoudhary]

I cannot find any better instructor than Florian whether be it paid or free courses. Thanks so much for putting this high value courses to be available for free.

[codewithAbdulMumin]

u are the best....anybody looking to learn next js should look nowhere else. this is the best channel. thank you for providing free quality contents for us

[YuuffyLIVE]

Found you through instagram and its really refreshing to see someone going really indepth teaching some topics and not just scratching the surface. There are also so many topics here that improved my project or tools I didn't know about yet (like fixing the prisma client bug in nextjs or prisma studio). Thank you!

[raghav_achari]

When this man teaches, it's clean and concise.

[Alalspsp]

I'm planning to add the sign-up function and chat function that I previously learned.
For several days now, I've been having a hard time figuring out where to start with the prisma model, copying and pasting code, etc.
Not only that, I've only seen 1/2 of this video yet.
I think I will keep thinking about how to incorporate this video into my project until the end of this video.
It's been 4 months since I learned coding, but this video is the most difficult.
I think it's because there are a few functions that I haven't seen and there are a lot of functions of functions.
But for me it is the most valuable video.

[ugurdev]

The amount of things I learned in just this video and the next auth v5 one is mind blowing, so many small details that just works flawlessly. Super high quality stuff, thanks. I will watch more as I find time.

[_hugo_cruz]

IMO this is the best tutorial on Nextjs and the complete roadmap currently needed. Thanks man for this.

[GiorgiTskhondia-xw]

Very high quality content. You are answering the questions right after I am having one naturally. Great job

[Vision-Zar]

First video that I followed till the and and it worked as expected thanks Bro

[JohnBuildWebsites]

Only a few minutes in and already seen enough to subscribe. Looking forward to seeing more.

[SuperCorde]

The most useful and demystifying web development tutorials you can find in YouTube. Thank you for sharing us your knowledge.👏👏👏