NextJS E-Com Masterclass: Learn The All New Next JS

19h 17m 40s
English
Paid

Course description

Welcome to the NextJS E-Com Masterclass: Learn The All New Next JS!

Ready to create your very own online store? Join us on a fun-filled journey where you'll learn to build amazing e-commerce websites from start to finish. We'll show you how to use Next.js (a supercharged version of React), along with easy-to-understand tools like TypeScript, MongoDB, Cloudinary, and Mailtrap.

Don't worry if you're new to full stack development – I'll guide you every step of the way. By the end, you'll proudly have a full-stack skill set and the ability to craft impressive online shops. Get started now and let's bring your e-commerce dreams to life!

Read more about the course

Why Next.js, you ask? Well, it's more than just another JavaScript library – it's a dynamic framework that supercharges your React applications with server-side rendering, efficient routing, and a fantastic developer experience. With the rise of e-commerce, having a deep understanding of Next.js is a game-changer, and that's exactly what you'll gain through our hands-on approach.

But that's not all – this course is designed to make you a well-rounded developer by introducing you to a variety of essential tools and technologies. From TypeScript, the user-friendly programming language, to MongoDB, a powerful and flexible database solution, you'll learn how to seamlessly integrate these components into your projects.

Cloudinary, the cloud-based image and video management platform, will become your ally in optimizing media for optimal performance and user experience. With Mailtrap, you'll master email testing and debugging, a crucial aspect of delivering reliable communication to your users.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online NextJS E-Com Masterclass: Learn The All New Next JS

0:00
/
#1: Project Intro

All Course Lessons (171)

#Lesson TitleDurationAccess
1
Project Intro Demo
11:16
2
Let Me Guide You
02:01
3
Node JS
01:41
4
Mongodb
02:28
5
VS Code
01:36
6
Node JS
01:30
7
Homebrew
01:07
8
Mongodb
02:29
9
Mongodb Compass
01:04
10
12-Running Mongodb In The Background
01:34
11
VS Code
00:49
12
Open With VS Code
01:01
13
React TS Project Setup
02:15
14
Rendering App
07:50
15
Component & Props
09:51
16
Input & Change Handler
09:43
17
Project Setup
11:35
18
Layout
03:42
19
Navbar
09:02
20
Navbar Explained
08:59
21
Sign up Form
04:20
22
Form State & Validation
08:27
23
Rendering Errors
09:24
24
API Route
07:33
25
Connecting to Local Database
04:16
26
User Model
07:39
27
Creating New User
05:27
28
Hashing Password
07:10
29
Comparing Password
04:52
30
Sending Emails
05:38
31
ChatGPT & Email Verification Token
10:45
32
Generating Verification Token
05:02
33
Email Verification Page
03:37
34
Verify Token Route
08:44
35
Verifying Token
06:07
36
Rendering Notification
04:33
37
Next Auth
11:25
38
Sign in Route
09:12
39
Sign in UI
08:09
40
Auth Session
05:36
41
Auth Errors
05:56
42
Sign out
04:43
43
Guest Route
07:06
44
Customizing Session
09:28
45
Forget Password UI
02:35
46
Forget Password API Route
07:06
47
Sending Link to Email
06:12
48
Submitting Request
04:59
49
Validating Password Reset Token
08:46
50
Resetting Password
15:23
51
Production Build
05:35
52
Publishing Application
09:53
53
Refactoring Send Email
10:55
54
Sign in along with Sign up
04:42
55
Private Route
05:17
56
Fixing Auth Session Profile
11:00
57
Email Reverification
13:38
58
Admin Sidebar
07:06
59
Fixing Navbar
06:55
60
Product Table
05:32
61
Product Form
11:36
62
Product Model
07:26
63
Server Action
07:32
64
Validating Product Info
05:50
65
Using Validation Schema
05:11
66
Cloud Storage
06:28
67
Cloud Signature
03:00
68
Uploading Image
08:40
69
Creating New Product
11:51
70
About Action
05:53
71
Fetching New Products
07:46
72
Update Product Page
08:15
73
Update Product Form
09:17
74
Fixing Warning
02:03
75
Let's Understand How to update
02:43
76
Remove Image From Cloud
01:55
77
Removing Images
13:36
78
Removing Images From Cloud
08:10
79
Update Product 1
11:05
80
Update Product 2
08:47
81
Generating Dummy Product
03:20
82
Generating Multiple Dummy Products
07:35
83
Pagination
07:42
84
Fetching & Rendering Products
06:46
85
Few Little Fixes
04:18
86
Dynamic Route
05:27
87
Rendering Single Product
07:10
88
Hero Slider
07:14
89
Cart Model
05:42
90
Cart API 1
05:41
91
Cart API 2
06:42
92
Adding to Cart
10:18
93
Featured Product Model
04:20
94
Featured Product Form
05:06
95
Submitting Featured Product Form
04:54
96
Creating Featured Product
04:50
97
Featured Product Table
01:56
98
Rendering Featured Product
02:59
99
Update Featured Product 1
06:26
100
Update Featured Product 2
05:02
101
Deleting Featured Product
07:12
102
Few Little Fixes
05:44
103
Featured Product Slider
07:44
104
Responsive Slider
02:47
105
Horizontal Scroll Menu
05:06
106
Products by Category
07:15
107
Cart Items Count
11:22
108
Profile Page
09:18
109
Updating User Profile
10:26
110
New Profile Page UI
08:00
111
Loading UI
08:29
112
Error Page
04:02
113
Image Component
07:20
114
Cart Page
03:58
115
Fetching Cart Details
18:45
116
Updating Cart Items
04:49
117
Deleting Cart
02:01
118
Empty Cart Message
02:25
119
Setting up Stripe
10:02
120
Checkout Session URL
15:31
121
Final Checkout
07:32
122
Order Model
07:27
123
Stripe CLI
04:09
124
Using Webhook
12:07
125
Creating New Order
10:41
126
Recounting Stock
04:05
127
Instant Checkout
07:55
128
Creating Order
06:58
129
Fetching Orders of Profile
05:08
130
Rendering Orders
04:17
131
Orders UI Admin
15:15
132
Update Delivery API Route
05:31
133
Updating Delivery Status
04:44
134
Review Form
05:57
135
Review Model
03:43
136
Create/Update Review
07:08
137
Submitting Review Form
05:47
138
Fetching Review Details
08:42
139
Rendering Reviews
08:28
140
Average Rating
09:11
141
Rating Stars
11:12
142
Rendering Rating Stars
05:45
143
Fetching Sales History
18:47
144
Sales Chart
08:57
145
Sales Page UI
04:02
146
Fixing Review Issue
06:32
147
Fixing Sales Page Issue
01:53
148
Out of Stock
02:15
149
Fetching Similar Products
03:12
150
Rendering Similar Products
08:58
151
Latest Order inside Profile Page
03:26
152
History Model
03:55
153
Recording History
08:50
154
Admin Search
08:19
155
Search Bar
04:49
156
Search Filter UI
02:35
157
Search Filter
18:38
158
Searching Products
09:21
159
Clear Filter
03:26
160
Wishlist Button
03:22
161
Wishlist Api Route
08:30
162
Updating Wishlist
04:04
163
Fetching Wishlisted Products
07:24
164
Wishlisted Products UI
07:44
165
Updating Wishlist
02:38
166
Using Real Database
11:55
167
Custom Domain
03:37
168
Verify Domain Inside Mailtrap
04:20
169
Sending Real Emails
10:49
170
The Fix
11:21
171
Stripe Webhook
07:15

Unlock unlimited learning

Get instant access to all 170 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

Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

Sources: Web Dev Cody
Are you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with
5 hours 53 minutes 23 seconds
Ultimate Next.js 13 Course + eBook

Ultimate Next.js 13 Course + eBook

Sources: jsmastery.pro
Enter the new era of React. Here’s a little known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage in those top 1 million is doubling ever
51 hours 35 minutes 4 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

Sources: udemy
If you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies, then this course i...
13 hours 2 minutes 12 seconds
Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Sources: udemy
Don't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects! Welcome to the exciting world of AI-powered, next-gener...
5 hours 8 minutes 46 seconds
Ultimate Next.js Course 2024 Edition

Ultimate Next.js Course 2024 Edition

Sources: developedbyed.com
Learn to build a fully functional web application using React and Next.js. This course covers topics like authentication, ORM, creating responsive UIs...
29 hours 39 minutes 9 seconds