Ultimate Next.js Course 2024 Edition

29h 39m 9s
English
Paid

Course description

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.

Read more about the course

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Sources: udemy
Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards...
8 hours 12 minutes 38 seconds
Next.js Ecommerce

Next.js Ecommerce

Sources: Brad Traversy
The Next.js Ecommerce course is an extensive 22-hour program that teaches you step by step how to create a full-fledged e-commerce platform with...
22 hours 12 minutes 23 seconds
Duolingo Clone

Duolingo Clone

Sources: Code With Antonio
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language
11 hours 12 minutes 32 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Sources: udemy
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to
28 hours 38 minutes 19 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds