The Ultimate Next.js 14 Crash Course with Supabase, Zod, TypeScript, Tailwind | Full Course 2024

#nextjs #react #javascript #tailwindcss #typescript

⏰ Timeline
00:00 - 01:46 - What this Course Covers
08:16 - 10:17 - Walkthrough of the Codebase
14:23 - 17:44 - Intro to TailwindCSS
17:45 - 23:57 - App Architecture
26:33 - 30:14 - Server and Client Components
30:15 - 32:15 - Server and Client Components Examples
32:16 - 35:07 - When should Components be Client Components?
35:08 - 38:41 - Build Card Component
38:42 - 40:32 - Card Component Code Walkthrough
46:25 - 47:30 - Main Page Styling and Structure
47:31 - 52:46 - What is Supabase & Let’s set it up
52:46 - 53:21 - Row Level Policies in Supabase
57:42 - 58:20 - Data fetching Code Walkthrough
58:20 - 59:13 - Install Supabase in our Environment
59:13 - 01:02:42 - Data fetching with Supabase for Products
01:05:46 - 01:06:52 - Supabase Top Products Query with Filters
01:12:48 - 01:14:22 - Routing Diagrams to Connect the Dots
01:14:23 - 01:16:25 - Let’s build the Product Page
01:21:18 - 01:22:14 - Server Actions and Mutations
01:22:15 - 01:24:17 - Let’s create a Server Action for Uploading Products
01:24:18 - 01:28:13 - Use TypeScript First Schema Validation Library Zod
01:30:30 - 01:34:16 - Insert Product Images in Supabase Database
01:34:17 - 01:36:20 - Insert Product Data in Supabase Database
01:36:21 - 01:38:04 - Supabase Policy for Storing Images
01:38:05 - 01:39:34 - Purging Cache in Server Actions
01:39:35 - 01:40:23 - Redirect User in Server Actions
01:40:24 - 01:42:58 - Show Loading State in Server Actions
01:42:59 - 01:44:45 - What is SEO? Why is it important?
01:44:46 - 01:46:03 - Characteristics of a High Ranked Site
01:58:50 - 02:00:02 - Application Cleanup
02:00:03 - End of Course

🔗 RESOURCES:
💌 Frontend Newsletter:
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.

☎️ Book a 1:1 coaching session with me

🐤 Find me here

[Kulkarniankita]

What do you want to learn about next? Which crash course should I create next? Comment below and let's discuss!

[codewithnadeem]

Small suggestion, try to add demo video of product before starting code.

[clevercoder]

Great video covering all the basic things, using supabase for the production ❤

[aadityamathur]

Amazing content! Hoping to see more full length projects in future ❤️

[swarashayaman]

Top class content for free. Thanks a ton.🙏🏽

[developedbyteri]

I was able to integrate in my project and this video made it possible in a clearly defined way.

[akashprasad]

glad i found it,
finest video on nextJS

[HenokGebresenbet]

now we can say we have clear and brief nextjs crash course thank u dear sister.

[sahilpradhan]

Woah your teaching style is different and interactive with example . I easily understand your examples. keep making such good videos.

[codeofmohit]

OMFG 🤯, kulkarniankita is my developer goal for sure, deep knowledge is provided, came here after already followind 2-3 crash courses on next, learnt new things for sure, this is the way to go Nkita 🚀

[neverforget]

Thank you for a great tutorial. The beginning of the tutorial was excellent but please you don't need to rush through the rest. Concepts like supabase, zod etc dont need to be rushed and sped up. I felt the pace got real quick from a great slower pace at the beginning. But keep up the great work.

[pranaydesai]

Your skill to navigate through documantation is amazing....

[champion]

Hi Ankita, I loved your this video, you teach amazing, hats off to you .

[muhammadobaidullahkhan]

That Tutorial looks good to follow! Suely i will Ankita, other than that can you make a video of a chat app using Nextjs 14? ❤‍🔥

[richardcoopmans]

Amazing content Ankita! Helps me a lot in understanding it all and gives me a big push in the right direction of building my own application.
Could you please make a additional video on supabase to manage log-in with different roles (user/admin) and product form status (review by admin before publishing) and Role-based Access Control that a admin can see all the products (also the pending ones) and user can only see the published products? This would be really amazing!

[Solo_playz]

Loving your content so much ❤ very much deep tutorial on NextJs
Thank you Kulkarni madam 🙏🏼

[mma-dost]

Great tech stack for a saas isn't it? Just have to add stripe or any other payment service. Thanks for the latest tech stack videos.

[mrityunjaysinha]

Loved the content 😊. Please use MUI rather than tailwind. Ui could be simple also just copy paste mui components and add logic.

[deepak]

I got tired with the backend and wanted to try out some nice frontend. Guess what I just found. 🚀🔥

[shakerprince]

Please make a crash course on React and React Native.