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

The No-BS Solution for Enterprise-Ready Next.js Applications

The No-BS Solution for Enterprise-Ready Next.js Applications

Sources: Jack Herrington
Next.js is one of the most popular frameworks for building web applications. It is fast, flexible, and underpins some of the largest sites on the internet.
8 hours 20 minutes 31 seconds
Planning with Claude Code

Planning with Claude Code

Sources: Mckay Wrigley (takeoff)
In the workshop, participants create a simple front-end project— a landing page generator (marketing pages)- using Claude Code and Next.js. The focus is not...
47 minutes 32 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
NextJS & OpenAI - 2024 Edition

NextJS & OpenAI - 2024 Edition

Sources: udemy
Embark on a journey to mastering modern web development with our comprehensive video course on building applications using Next JS 14 and the OpenAI API. This c
13 hours 41 minutes 21 seconds
Full Stack Development

Full Stack Development

Sources: neetcode.io
This course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up. Whether you're a beg...
4 hours 24 minutes 36 seconds