Ultimate Next.js Course 2024 Edition
29h 39m 9s
English
Paid
June 25, 2024
Learn to build a fully functional web application using React and Next.js. This course covers topics like authentication, ORM, creating responsive UIs, integrating Stripe for payment processing, and more. You'll learn to create elegant and functional applications using modern technologies like Algolia, Framer Motion, and React Hook Form. By the end of the course, you'll be able to confidently develop complex applications and enhance user experience. The course also includes practical projects and real-world examples to help you master the skills in demand in the job market.
More
Tech stack:
- Next.js 14,2
- Next-Auth V5
- Drizzle ORM
- Postgresql
- Zustand
- Algolia
- Framer Motion
- NeonDB
- Resend
- React Hook Form
- Shad/CN
- Stripe Elements
Watch Online Ultimate Next.js Course 2024 Edition
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | 1. Project Introduction | 09:07 |
| 2 | 2.Setting Up Node | 03:12 |
| 3 | 3.Project Structure | 05:58 |
| 4 | 4.Routing | 05:21 |
| 5 | 5.Layout | 05:19 |
| 6 | 6.Page Component | 10:01 |
| 7 | 7.Route Groups | 01:45 |
| 8 | 8.Parallel Routes | 03:17 |
| 9 | 9.Loading Page | 01:21 |
| 10 | 10.Error Page | 01:22 |
| 11 | 11.Route Handlers | 02:09 |
| 12 | 12.Middleware | 02:49 |
| 13 | 1. Caching | 07:15 |
| 14 | 2.Setting up NeonDB with Drizzle | 04:42 |
| 15 | 3. Schemas and Migrations | 07:01 |
| 16 | 4.Server Actions | 06:33 |
| 17 | 5.Mutating and Revalidating | 05:30 |
| 18 | 6.Progressively Enhanced Forms | 04:03 |
| 19 | 1. Tailwind Intro | 08:26 |
| 20 | 2. Tailwind Config and extensions | 03:10 |
| 21 | 3.Layers and components | 02:31 |
| 22 | 4.Adding shadcn to our project | 06:19 |
| 23 | 1.Which Auth Solution To Use? | 04:44 |
| 24 | 2. Next-Auth V5 | 07:33 |
| 25 | 3.Setting Up Google and Github Providers | 04:57 |
| 26 | 4. Save Users With Drizzle Adapter to your DB | 07:31 |
| 27 | 5.Creating Our Navbar | 08:57 |
| 28 | 6. Sign In Button | 04:43 |
| 29 | 7.Login Page | 18:11 |
| 30 | 8.Styling Our Login Page | 10:33 |
| 31 | 9. React-Hook-Form + Zod Part 1 | 11:11 |
| 32 | 10. React-Hook-Form + Zod Part 2 | 12:13 |
| 33 | 11.Creating Our Sign In Action | 07:21 |
| 34 | 12.Form Error and Success Components | 08:59 |
| 35 | 13.Creating Our Register Page | 12:25 |
| 36 | 14.Register Action | 12:33 |
| 37 | 15.Email Token Drizzle Schema | 05:01 |
| 38 | 16.Generate Verification Tokens | 14:02 |
| 39 | 17.Resend | 15:17 |
| 40 | 18. Confirm Users Email Address | 13:21 |
| 41 | 19. Login Authorize | 14:41 |
| 42 | 20.Password Reset Form | 19:48 |
| 43 | 21.Finishing Up Password Resets + HTTP and Websockets | 22:53 |
| 44 | 22. User Dropdown Menu | 19:09 |
| 45 | 23. Theme Your App | 18:50 |
| 46 | 24. User Preferences | 29:06 |
| 47 | 25. JTW and Session Callbacks | 10:26 |
| 48 | 26. Update User Preferences | 14:36 |
| 49 | 27. Two Factor Tokens | 30:40 |
| 50 | 28. Setting up UploadThing | 16:06 |
| 51 | 1. Animations with Framer Motion | 25:20 |
| 52 | 2. Create Product Form | 19:45 |
| 53 | 3. Drizzle Product Schema | 03:42 |
| 54 | 4. Integrating TipTap Rich Text Editor | 19:54 |
| 55 | 5. Create/Edit Product Server Action | 09:58 |
| 56 | 6. Sonner Notifications | 08:29 |
| 57 | 7. Setting Up Tanstack Table | 20:00 |
| 58 | 8. Edit and Delete Products | 13:15 |
| 59 | 9. Finishing our Server Actions | 13:48 |
| 60 | 10. Filtering and Pagination | 11:08 |
| 61 | 11. Drizzle One/Many Relations | 11:51 |
| 62 | 12. Product Variant Wrapper | 15:18 |
| 63 | 13. Server Component Shananigans | 04:44 |
| 64 | 14. Variant Form | 14:19 |
| 65 | 15 Input Tags | 18:44 |
| 66 | 16. Variant Images with Uploadthing | 34:48 |
| 67 | 17.Variant Actions | 21:53 |
| 68 | 18.Deleting Variants | 05:19 |
| 69 | 19.Indexing With Algolia | 14:34 |
| 70 | 20. Shifting Layout Fix | 02:21 |
| 71 | 21. Bad State Call Fix | 01:50 |
| 72 | 1. Displaying our products | 17:21 |
| 73 | 2. Adding our products | 03:51 |
| 74 | 3. URL Routing with Product Picker | 27:19 |
| 75 | 4. Shad/CN Carousel | 17:33 |
| 76 | 5. Review Form | 19:38 |
| 77 | 6. User Review Action | 13:35 |
| 78 | 7. New Drizzle Kit Config | 04:42 |
| 79 | 8. Star System | 19:47 |
| 80 | 9. Review Chart | 16:51 |
| 81 | 10. Zustand | 16:41 |
| 82 | 11. Add To Cart | 16:05 |
| 83 | 12. Remove From Cart | 14:36 |
| 84 | 13.Price Animation and Local Storage Persist | 25:21 |
| 85 | 14.Cart Progress | 17:24 |
| 86 | 15.Order Table | 04:53 |
| 87 | 16.Stripe Elements | 35:22 |
| 88 | 17.Creating Orders | 17:07 |
| 89 | 18.Order Confirmation Page | 09:23 |
| 90 | 19.Order Details Dialog | 24:00 |
| 91 | 20.Quality Of Life Improvements | 15:28 |
| 92 | 21. Stripe CLI and Webhooks | 17:41 |
| 93 | 22. Analytics Page | 24:10 |
| 94 | 23. Recharts | 36:39 |
| 95 | 24. Cart Progress Animation | 11:57 |
| 96 | 25. Algolia Search | 25:36 |
| 97 | 26. Tag System | 15:16 |
| 98 | Deployment | 20:31 |
| 99 | 1. Getting Started | 00:37 |
| 100 | 2. Setting up Next with Tailwind | 06:02 |
| 101 | 3. Prisma Schemas | 15:35 |
| 102 | 4. Next Auth With Prisma | 21:39 |
| 103 | 5. Creating A Stripe Customer | 15:52 |
| 104 | 6. Creating our Navbar | 23:17 |
| 105 | 7. Fetching Stripe Products | 16:32 |
| 106 | 8. Formatting Prices | 10:11 |
| 107 | 9. Styling our home page | 09:51 |
| 108 | 10. Product Description Page | 23:01 |
| 109 | 11. State Managment With Zustand | 16:18 |
| 110 | 12. Adding Products to Cart | 26:40 |
| 111 | 13. Cart UI | 09:58 |
| 112 | 14. Adding and Removing Products | 12:11 |
| 113 | 15. Empty Carts | 04:45 |
| 114 | 16. Adding Google Fonts | 06:03 |
| 115 | 17. Total Price Format | 04:04 |
| 116 | 18. Framer Motion | 16:10 |
| 117 | 19. Keeping It Mobile Friendly | 03:35 |
| 118 | 20. Getting Started with Stripe | 17:11 |
| 119 | 21. Stripe Order Data | 26:57 |
| 120 | 22. Saving orders | 32:49 |
| 121 | 23. Rendering Stripe Form | 30:34 |
| 122 | 24. Success Page | 28:37 |
| 123 | 25. Stripe Webhooks | 26:47 |
| 124 | 26. Dashboard Page | 30:20 |
| 125 | 27. More Dashboard Styling | 06:58 |
| 126 | 26. Lottie Animations | 11:10 |
| 127 | 27. Daisy UI | 17:22 |
| 128 | 28. Adding a dropdown | 10:02 |
| 129 | 29. Dark Light Mode | 18:05 |
| 130 | 30. Stripe Darkmode | 13:15 |
| 131 | 31. Adding Different Fonts | 03:56 |
Similar courses to Ultimate Next.js Course 2024 Edition
Shopify + Next.js + Tailwind CSS: Modern Ecommerce
Duration 5 hours 7 minutes 23 seconds
Course
The Joy of React
Duration 25 hours 35 minutes 33 seconds
Course
Next.js - The Full Course
Duration 1 hour 14 minutes 14 seconds
Course
Next.js From Scratch 2024
Duration 11 hours 54 minutes 9 seconds
Course
React Node AWS - Build infinitely Scaling MERN Stack App
Duration 25 hours 1 minute 19 seconds
Course
MERN React Node Next.js Multi User SEO Blogging Platform
Duration 20 hours 25 minutes 13 seconds
Course
Full Stack Development
Duration 4 hours 24 minutes 36 seconds
Course
Course