Next.js Ecommerce

22h 12m 23s
English
Paid

Course description

Next.js Ecommerce Course is a comprehensive 22-hour program that teaches step by step how to create a full-fledged e-commerce platform using Next.js 15, TypeScript, PostgreSQL, and Prisma.

Read more about the course

Main Features of the Course:

  • Full Stack Development:
    • Learn to create an e-commerce platform with features such as an admin panel, product reviews, and payment integrations with PayPal and Stripe.
  • TypeScript and Validation:
    • Utilize TypeScript for robust type checking and the Zod library for ensuring data integrity.
  • Database Management:
    • Master PostgreSQL and Prisma for efficient database modeling and migrations.
  • Working with Forms:
    • Apply React Hook Form for convenient form management in your application.
  • Authentication:
    • Set up authentication systems using Next Auth, including JWT, sessions, and cookies for secure user management.
  • UI Components:
    • Use the ShadCN UI component library to create a responsive and user-friendly interface.
  • Testing:
    • Learn the basics of unit testing using Jest to ensure code reliability.

By the end of the course, you will gain skills in developing, deploying, and maintaining high-performance e-commerce web applications, ready to tackle real-world web development challenges.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online Next.js Ecommerce

0:00
/
#1: Welcome To The Course

All Course Lessons (157)

#Lesson TitleDurationAccess
1
Welcome To The Course Demo
05:21
2
The Stack
05:37
3
The Project
06:03
4
The Environment
04:54
5
Premium Docs
01:35
6
Section Intro
02:00
7
Create Next App & Assets
07:48
8
ShadCN UI Setup
04:45
9
Root Layout & Constants
10:05
10
Header & Footer Components
09:34
11
Theme Mode Toggle
13:30
12
Loading & Not Found Page
08:52
13
Responsive Sheet Menu
08:12
14
Sample Products & Product List
09:35
15
Product Card Component
06:43
16
Product Price Component
04:59
17
Section Intro
02:37
18
PostgreSQL & Prisma Setup
04:15
19
Prisma Models & Migrations
09:10
20
Seed Sample Data
04:05
21
Load Products From Database
10:16
22
Zod Validtation & Type Inference
16:52
23
Serverless Environment Config
08:10
24
Product Details Page
14:50
25
Product Images Component
08:00
26
Initial Deployment
04:57
27
A Note On ES Lint Errors
02:27
28
Section Intro
02:58
29
Prisma User-Related Models
09:46
30
Seed User Data
07:01
31
Next Auth Setup
17:32
32
Sign In & Sign Out Action
08:28
33
Auth Layout & Sign In Page
06:59
34
Credentials Sign In Form
06:40
35
Hook Up Sign In Form
09:29
36
Callback URL Redirect
04:27
37
User Button & Sign Out
11:49
38
Sign Up Zod Schema & Action
08:16
39
Sign Up Page & Form
07:36
40
Sign Up Error Handling
12:41
41
Customize Token With JWT Callback
08:20
42
Section Intro
01:10
43
Cart Zod Schema & Prisma Model
13:02
44
Add To Cart Component
12:02
45
Session Cart ID Cookie
08:29
46
Get Item From Cart
13:15
47
Price Calc & Add To Database
15:39
48
Handle Quantity & Mutliple Products
11:46
49
Remove Cart Action
08:02
50
Dynamic Cart Button
08:02
51
Smooth UI With useTransition Hook
05:58
52
Section Intro
01:23
53
Cart Page
08:24
54
ShadCN UI Table
10:53
55
Subtotal Card
08:08
56
Shipping Address Zod Schema & Page
09:31
57
Shipping Address Form
20:08
58
Update User Address
08:22
59
Checkout Steps
07:02
60
Persist Session Cart
05:31
61
Protecting Paths
05:48
62
Section Intro
01:32
63
Payment Method Action & Zod Schema
09:28
64
Payment Method Page
08:02
65
Payment Method Form & Update
13:10
66
Order & OrderItem Prisma Schema
11:08
67
Order Zod Schemas & Types
08:17
68
Place Order Page
18:06
69
Create Order Action
14:16
70
Place Order Form
07:38
71
Order Page & Action
08:28
72
Format Utility Functions
08:22
73
Order Details Table
14:06
74
Section Intro
01:14
75
PayPal Sandbox Setup
03:33
76
Generate Access Token
07:21
77
Jest Test For Access Token
07:43
78
Create Order & Capture Payment Request
08:46
79
Jest Testing For Order & Payment
08:08
80
Create PayPal Order Action
07:58
81
Approve & Update Order
15:31
82
Implement PayPal Button
12:05
83
Section Intro
01:07
84
User Layout & Menu
14:01
85
Get My Orders Action
05:29
86
Orders Page
12:57
87
Orders Pagination
15:29
88
Update Profile Action
05:37
89
Update Profile Form
12:10
90
Profile Form Submission
06:54
91
Section Intro
00:56
92
Admin Layout & Menu
08:07
93
Get Order Summary
10:22
94
Admin Overview Data Display
16:48
95
Monthly Sales Chart
08:25
96
Admin Orders Page & Action
11:32
97
Delete Orders
15:54
98
Update Order Actions (COD)
05:41
99
Update Order Buttons (COD)
13:03
100
Section Intro
01:12
101
Get Products For Admin Page
08:25
102
Display Products
07:56
103
Delete Products
04:17
104
Create & Update Actions
08:31
105
Create Product Page & Form
09:36
106
Form Fields & Slugify
13:28
107
Create Product Form Submission
06:24
108
Uploadthing Configuration
08:10
109
Add Image Uploads
12:57
110
Product Cleanup
07:58
111
Is Featured & Banner
08:56
112
Product Update Form
09:59
113
Section Intro
01:09
114
Get & Display Users
12:58
115
Delete Users
03:13
116
User Edit Page
09:15
117
Update User Form
14:17
118
Update User Action
06:49
119
Admin Search Form
11:05
120
Admin Order Search
05:42
121
Admin User Search
03:16
122
Section Intro
01:20
123
Category Drawer
08:45
124
Featured Products Carousel
13:34
125
Search Component
08:39
126
Search Page
12:53
127
Search Filters
10:56
128
Get Filter URL Function
06:38
129
Category & UI Price Filters
09:52
130
Rating Filter & Filter Display
10:02
131
Sorting Products
05:51
132
Dynamic Metadata
07:47
133
Section Intro
01:00
134
Review Prisma Schema, Zod & Type
10:33
135
Review List Component
09:28
136
Review Form Dialog
15:31
137
Create & Update Review Action
11:51
138
Connect Review Form To Action
07:03
139
Get Reviews Action
03:49
140
Display Reviews
12:01
141
Update & Reload Reviews
03:59
142
Section Intro
01:41
143
Stripe Setup
04:45
144
Order Form Payment Intent
11:53
145
Stripe Payment Component
17:21
146
Stripe Payment Success Page
11:17
147
Webhook To Mark Orders As Paid
13:51
148
Section Intro
01:02
149
Resend API Key & Setup
02:55
150
Resend Main Function
05:43
151
Purchase Receipt Email Template
13:17
152
Preview Email In Browser With React Email
12:49
153
Sending Emails
04:45
154
Section Intro
00:46
155
Icon Boxes Component
03:49
156
Deal Countdown Components
18:53
157
Wrap Up
01:18

Unlock unlimited learning

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

Build A Slack Clone

Build A Slack Clone

Sources: Code With Antonio
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.
15 hours 13 minutes 30 seconds
Stripe for SaaS

Stripe for SaaS

Sources: fireship.io
You will build a Stock Photography Subscription SaaS Product from scratch where users can sign up for a subscription to access a library of images. Every monetized action is tra...
1 hour 11 minutes 29 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS product

Sources: Max Stoiber (@mxstbr)
The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.