CF

Ultimate Next.js Course 2024 Edition

29h 39m 9s
English
Paid

Master the art of building dynamic and efficient web applications using React and Next.js with our comprehensive course. Dive into essential topics such as authentication, ORM integration, and creating responsive user interfaces. You will also learn to incorporate advanced technologies like Stripe for seamless payment processing. By leveraging tools like Algolia, Framer Motion, and React Hook Form, you will be equipped to craft visually appealing and user-friendly applications. Concluding this course, you will confidently develop sophisticated web apps, enhance user experience, and stay competitive in the job market with practical projects and real-world scenarios.

Course Overview

This course provides an in-depth exploration of the following key components and libraries to ensure you gain industry-relevant skills:

Build Modern Applications

Understand the processes and techniques for creating responsive and functional user interfaces that cater to diverse needs and devices.

Authenticate Users

Implement robust authentication strategies with Next-Auth to secure your applications efficiently.

Database Management with Drizzle ORM and PostgreSQL

Learn to handle data interactions and schema management with Drizzle ORM and PostgreSQL, ensuring a reliable backend system for your applications.

Optimized State Management using Zustand

Delve into Zustand for simplified and predictable state management in your React applications.

Advanced Features

  • Payment Integration: Seamless integration with Stripe Elements for secure payment processing.
  • Search Functionality: Utilize Algolia to deliver fast and relevant search results.
  • Animation and Motion: Enhance user experience with Framer Motion for interactive animations.
  • Forms Handling: Streamline user input and validation with React Hook Form.

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

About the Author: Dev Ed

Dev Ed thumbnail

Dev Ed (developedbyed.com) is the personal teaching platform of Edwin Diaz, the creator of the popular DevEd YouTube channel. He is best known for short, high-energy front-end and JavaScript tutorials with a strong creative / animation slant — the videos sit at the intersection of practical web development and the visual side of CSS, Canvas, and WebGL.

His CourseFlix listing follows the same pattern: The Ultimate JavaScript Animation Course, The Creative React and Redux Course, The Creative Javascript Course, and Ultimate Next.js Course 2024 Edition. Material is paid, aimed at intermediate front-end developers who want to push beyond standard CRUD interfaces into the more visual / animated end of the web.

Watch Online 131 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 131 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1. Project Introduction
All Course Lessons (131)
#Lesson TitleDurationAccess
1
1. Project Introduction Demo
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
Unlock unlimited learning

Get instant access to all 130 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

131 lessons · 29h 39m 9s
Show all 131 lessons
  1. 1 1. Project Introduction 09:07
  2. 2 2.Setting Up Node 03:12
  3. 3 3.Project Structure 05:58
  4. 4 4.Routing 05:21
  5. 5 5.Layout 05:19
  6. 6 6.Page Component 10:01
  7. 7 7.Route Groups 01:45
  8. 8 8.Parallel Routes 03:17
  9. 9 9.Loading Page 01:21
  10. 10 10.Error Page 01:22
  11. 11 11.Route Handlers 02:09
  12. 12 12.Middleware 02:49
  13. 13 1. Caching 07:15
  14. 14 2.Setting up NeonDB with Drizzle 04:42
  15. 15 3. Schemas and Migrations 07:01
  16. 16 4.Server Actions 06:33
  17. 17 5.Mutating and Revalidating 05:30
  18. 18 6.Progressively Enhanced Forms 04:03
  19. 19 1. Tailwind Intro 08:26
  20. 20 2. Tailwind Config and extensions 03:10
  21. 21 3.Layers and components 02:31
  22. 22 4.Adding shadcn to our project 06:19
  23. 23 1.Which Auth Solution To Use? 04:44
  24. 24 2. Next-Auth V5 07:33
  25. 25 3.Setting Up Google and Github Providers 04:57
  26. 26 4. Save Users With Drizzle Adapter to your DB 07:31
  27. 27 5.Creating Our Navbar 08:57
  28. 28 6. Sign In Button 04:43
  29. 29 7.Login Page 18:11
  30. 30 8.Styling Our Login Page 10:33
  31. 31 9. React-Hook-Form + Zod Part 1 11:11
  32. 32 10. React-Hook-Form + Zod Part 2 12:13
  33. 33 11.Creating Our Sign In Action 07:21
  34. 34 12.Form Error and Success Components 08:59
  35. 35 13.Creating Our Register Page 12:25
  36. 36 14.Register Action 12:33
  37. 37 15.Email Token Drizzle Schema 05:01
  38. 38 16.Generate Verification Tokens 14:02
  39. 39 17.Resend 15:17
  40. 40 18. Confirm Users Email Address 13:21
  41. 41 19. Login Authorize 14:41
  42. 42 20.Password Reset Form 19:48
  43. 43 21.Finishing Up Password Resets + HTTP and Websockets 22:53
  44. 44 22. User Dropdown Menu 19:09
  45. 45 23. Theme Your App 18:50
  46. 46 24. User Preferences 29:06
  47. 47 25. JTW and Session Callbacks 10:26
  48. 48 26. Update User Preferences 14:36
  49. 49 27. Two Factor Tokens 30:40
  50. 50 28. Setting up UploadThing 16:06
  51. 51 1. Animations with Framer Motion 25:20
  52. 52 2. Create Product Form 19:45
  53. 53 3. Drizzle Product Schema 03:42
  54. 54 4. Integrating TipTap Rich Text Editor 19:54
  55. 55 5. Create/Edit Product Server Action 09:58
  56. 56 6. Sonner Notifications 08:29
  57. 57 7. Setting Up Tanstack Table 20:00
  58. 58 8. Edit and Delete Products 13:15
  59. 59 9. Finishing our Server Actions 13:48
  60. 60 10. Filtering and Pagination 11:08
  61. 61 11. Drizzle One/Many Relations 11:51
  62. 62 12. Product Variant Wrapper 15:18
  63. 63 13. Server Component Shananigans 04:44
  64. 64 14. Variant Form 14:19
  65. 65 15 Input Tags 18:44
  66. 66 16. Variant Images with Uploadthing 34:48
  67. 67 17.Variant Actions 21:53
  68. 68 18.Deleting Variants 05:19
  69. 69 19.Indexing With Algolia 14:34
  70. 70 20. Shifting Layout Fix 02:21
  71. 71 21. Bad State Call Fix 01:50
  72. 72 1. Displaying our products 17:21
  73. 73 2. Adding our products 03:51
  74. 74 3. URL Routing with Product Picker 27:19
  75. 75 4. Shad/CN Carousel 17:33
  76. 76 5. Review Form 19:38
  77. 77 6. User Review Action 13:35
  78. 78 7. New Drizzle Kit Config 04:42
  79. 79 8. Star System 19:47
  80. 80 9. Review Chart 16:51
  81. 81 10. Zustand 16:41
  82. 82 11. Add To Cart 16:05
  83. 83 12. Remove From Cart 14:36
  84. 84 13.Price Animation and Local Storage Persist 25:21
  85. 85 14.Cart Progress 17:24
  86. 86 15.Order Table 04:53
  87. 87 16.Stripe Elements 35:22
  88. 88 17.Creating Orders 17:07
  89. 89 18.Order Confirmation Page 09:23
  90. 90 19.Order Details Dialog 24:00
  91. 91 20.Quality Of Life Improvements 15:28
  92. 92 21. Stripe CLI and Webhooks 17:41
  93. 93 22. Analytics Page 24:10
  94. 94 23. Recharts 36:39
  95. 95 24. Cart Progress Animation 11:57
  96. 96 25. Algolia Search 25:36
  97. 97 26. Tag System 15:16
  98. 98 Deployment 20:31
  99. 99 1. Getting Started 00:37
  100. 100 2. Setting up Next with Tailwind 06:02
  101. 101 3. Prisma Schemas 15:35
  102. 102 4. Next Auth With Prisma 21:39
  103. 103 5. Creating A Stripe Customer 15:52
  104. 104 6. Creating our Navbar 23:17
  105. 105 7. Fetching Stripe Products 16:32
  106. 106 8. Formatting Prices 10:11
  107. 107 9. Styling our home page 09:51
  108. 108 10. Product Description Page 23:01
  109. 109 11. State Managment With Zustand 16:18
  110. 110 12. Adding Products to Cart 26:40
  111. 111 13. Cart UI 09:58
  112. 112 14. Adding and Removing Products 12:11
  113. 113 15. Empty Carts 04:45
  114. 114 16. Adding Google Fonts 06:03
  115. 115 17. Total Price Format 04:04
  116. 116 18. Framer Motion 16:10
  117. 117 19. Keeping It Mobile Friendly 03:35
  118. 118 20. Getting Started with Stripe 17:11
  119. 119 21. Stripe Order Data 26:57
  120. 120 22. Saving orders 32:49
  121. 121 23. Rendering Stripe Form 30:34
  122. 122 24. Success Page 28:37
  123. 123 25. Stripe Webhooks 26:47
  124. 124 26. Dashboard Page 30:20
  125. 125 27. More Dashboard Styling 06:58
  126. 126 26. Lottie Animations 11:10
  127. 127 27. Daisy UI 17:22
  128. 128 28. Adding a dropdown 10:02
  129. 129 29. Dark Light Mode 18:05
  130. 130 30. Stripe Darkmode 13:15
  131. 131 31. Adding Different Fonts 03:56

Related courses

Frequently asked questions

What is Ultimate Next.js Course 2024 Edition about?
Master the art of building dynamic and efficient web applications using React and Next.js with our comprehensive course. Dive into essential topics such as authentication, ORM integration, and creating responsive user interfaces. You will…
Who teaches Ultimate Next.js Course 2024 Edition?
Ultimate Next.js Course 2024 Edition is taught by Dev Ed. You can find more courses by this instructor on the corresponding source page.
How long is Ultimate Next.js Course 2024 Edition?
Ultimate Next.js Course 2024 Edition contains 131 lessons with a total runtime of 29 hours 39 minutes. All lessons are available to watch online at your own pace.
Is Ultimate Next.js Course 2024 Edition free to watch?
Ultimate Next.js Course 2024 Edition is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Ultimate Next.js Course 2024 Edition online?
Ultimate Next.js Course 2024 Edition is available to watch online on CourseFlix at https://courseflix.net/course/ultimate-next-js-course-2024-edition. The page hosts every lesson with the integrated video player; no download is required.