CF

Next.js Ecommerce

22h 12m 23s
English
Paid
Released
Added to CourseFlix

Next.js Ecommerce is a 157-lesson 22 hours 12 minutes self-paced course by Brad Traversy. Next.

Course facts

Lessons
157
Duration
22 hours 12 minutes
Language
English
Released
December 2024
Added to CourseFlix
December 2024
Instructor
Brad Traversy
Price
Premium

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.

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.

Additional

https://github.com/bradtraversy/prostore

Who teaches Next.js Ecommerce? Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

What lessons are included in Next.js Ecommerce?

This is a demo lesson (10:00 remaining)

Watch the first 10 minutes free. One payment unlocks all 157 lessons here and every other premium course. No auto-renew.

Watch all 157 lessons from $6.67/mo
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
Watch the other 156 lessons

One payment unlocks this course and every other premium course. No auto-renew.

See plans

What courses are similar to Next.js Ecommerce?

More courses by Brad Traversy

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling in the course, you should have a basic understanding of JavaScript, HTML, and CSS. Familiarity with React.js will also be beneficial since the course builds on the Next.js framework, which is based on React. Knowledge of TypeScript is recommended, as it is used extensively throughout the course. Understanding server-side concepts will help, as you will be working with PostgreSQL and Prisma for database management.
What will I build by the end of the course?
By the end of the course, you will have built a fully functional e-commerce platform. This platform includes features such as a responsive product list, product details page, user authentication with Next Auth, a shopping cart with dynamic pricing, shipping address handling, and a checkout process. The course uses Next.js 15, TypeScript, PostgreSQL, and Prisma to achieve these functionalities, providing a well-rounded e-commerce application experience.
Who is the target audience for this course?
The target audience for this course includes web developers who are interested in building scalable and efficient e-commerce platforms using the latest technologies. It is suitable for those who have some experience with web development and want to enhance their skills in using Next.js, TypeScript, and database management with PostgreSQL and Prisma. This course is ideal for developers looking to expand their portfolio with a complex project.
How does the depth of this course compare to similar courses?
This course offers a comprehensive exploration of building an e-commerce platform using modern web technologies over 22 hours of content. It covers a wide range of topics from setting up a development environment to deploying a full application, making it more extensive than typical introductory courses. With 157 lessons, it delves deeply into areas such as serverless environment configuration, user authentication, and advanced UI components, providing a thorough understanding of the entire development process.
What specific tools and platforms will I learn to use?
Throughout the course, you will learn to use several specific tools and platforms. These include Next.js 15 for building server-rendered React applications, TypeScript for adding static types, PostgreSQL for database management, and Prisma for ORM and migrations. You will also work with Zod for validation and type inference, and ShadCN UI for building responsive UI components. These tools collectively provide a robust toolkit for modern web development.
What is not covered in this course?
The course does not cover front-end frameworks other than React, as it focuses exclusively on Next.js and its ecosystem. Advanced topics in PostgreSQL, like performance tuning or complex query optimization, are not part of the curriculum. Additionally, the course does not include marketing or SEO strategies for e-commerce platforms, as it is primarily focused on the technical aspects of building the application.
How much time should I expect to dedicate to this course?
The course has a total runtime of 22 hours spread across 157 lessons. In addition to the video content, you should allocate additional time for hands-on practice, exercises, and reviewing the material, which can significantly enhance your learning experience. Depending on your prior experience, you might need to spend extra time on certain sections, especially if you are new to tools like Prisma or TypeScript.