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

Solidity & Ethereum in React (Next JS): The Complete Guide

Solidity & Ethereum in React (Next JS): The Complete Guide

Sources: udemy
Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.
38 hours 47 minutes 24 seconds
Complete Next.js with React & Node - Beautiful Portfolio App

Complete Next.js with React & Node - Beautiful Portfolio App

Sources: udemy
Master Next.js (Next 9), React (React 16+) & Node. Learn how to build Isomorphic Website, incl. SEO, Blog, Deployment
59 hours 43 minutes
Full-Stack Fundamentals 1 - Frontend

Full-Stack Fundamentals 1 - Frontend

Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
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