English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 157 lectures (22h 8m) | 10.32 GB
Use Next 15, React 19, TypeScript, PostgreSQL and Prisma to build a real-world ecommerce website
If you want to take your React skills to the next level and learn to use Next.js in an actual real-world project, this is the course for you. We are using Next.js, TypeScript and many other technologies to create “Prostore”. A full-featured shopping platform with reviews, PayPal and Stripe integration, email receipts and more.
This course is for people that already know React. Knowing the basics of Next.js is even better. You will learn how to use many different technologies together to create a full project that you can then display on your portfolio.
Here is a list of some of the technologies and libraries that we’ll be using:
- Next.js v15
- React v19
- TypeScript
- ES Lint
- PostgreSQL
- Prisma
- Zod
- Next Auth
- React Hook Form
- PayPal & Stripe API
- ShadCN UI
- Tailwind CSS
- Recharts
- Uploadthing
- Jest
Even though this is a project-based course, it is not simply “watch me code”. I will explain in detail what I am doing so that you can understand rather than just copy. You can then use that knowlege to create your own awesome projects.
What you’ll learn
- Build a professional ecommerce website from absolute scratch
- PayPal, Stripe and Cash On Delivery payment options
- Learn Next 15, React 19, PostgreSQL, Prisma, TypeScript & Zod
- Full Authentication, admin area, review system, featured projects, sorting, search filters, user profiles, image uploading & more
- Continuous deployment with Vercel & Git
- Shopping cart, sessions, JWT & cookies
- Learn how to write TypeSafe code with TypeScript, Zod for validation & React Hook Form for easy form management
- Full admin dashboard with stats and montly sales chart as well as product, order and user management
Table of Contents
Introduction
1 Welcome To The Course
2 The Stack
3 The Project
4 The Environment
5 Premium Docs
App Creation & Basic Layout
6 Section Intro
7 Create Next App & Assets
8 ShadCN UI Setup
9 Root Layout & Constants
10 Header & Footer Components
11 Theme Mode Toggle
12 Loading & Not Found Pages
13 Responsive Sheet Menu
14 Sample Products & Product List
15 Product Card Component
16 Product Price Component
Database, Prisma & Product Display
17 Section Intro
18 PostgreSQL & Prisma Setup
19 Prisma Models & Migrations
20 Seed Sample Data
21 Load Products From Database
22 Zod Validation & Type Inference
23 Servlerless Environment Config
24 Product Details Page
25 Product Images Component
26 Initial Deployment
27 A Note On ES Lint Errors
Authentication With Next Auth
28 Section Intro
29 Prisma User-Related Models
30 Seed User Data
31 Next Auth Setup
32 Next Auth Catch All API Route
33 Sign In & Sign Out Action
34 Credentials Sign In Form
35 Hook Up Sign In Form
36 Callback URL Redirect
37 User Button & Sign Out
38 Sign Up Zod Schema & Action
39 Sign Up Page & Form
40 Sign Up Error Handling
41 Customize Token With JWT Callback
Add To Cart
42 Section Intro
43 Cart Zod Schema & Prisma Model
44 Add To Cart Component
45 Session Cart ID Cookie
46 Get Item From Cart
47 Price Calc & Add To Database
48 Handle Quantity & Multiple Products
49 Remove Cart Action
50 Dynamic Cart Button
51 Smooth UI With useTransition Hook
Cart & Shipping Pages
52 Section Intro
53 Cart Page
54 ShadCN UI Table
55 Subtotal Card
56 Shipping Address Zod Schema & Page
57 Shipping Address & Form
58 Update User Address
59 Checkout Steps Component
60 Persist Session Cart
61 Protecting Paths
Payment Method & Order Pages
62 Section Intro
63 Payment Method Action & Zod Schema
64 Payment Method Page
65 Payment Method Form & Update
66 Order & OrderItem Prisma Schema
67 Order Zod Schemas & Types
68 Place Order Page
69 Create Order Action
70 Place Order Form
71 Order Page & Action
72 Format Utility Functions
73 Order Details Table
PayPal Payments
74 Section Intro
75 PayPal Sandbox Setup
76 Generate Access Token
77 Jest Testing For Access Token
78 Create Order & Capture Payment Request
79 Jest Testing For Order Payment
80 Create PayPal Order Action
81 Approve & Update Order
82 Implement PayPal Button
Order History & User Profile
83 Section Intro
84 User Layout & Menu
85 Get My Orders Action
86 Orders Page
87 Orders Pagination
88 Update Profile Action
89 Update Profile Form
90 Profile Form Submission
Admin Overview & Orders
91 Section Intro
92 Admin Layout & Main Nav
93 Get Order Summary
94 Admin Overview Display Data
95 Monthly Sales Chart
96 Admin Orders Page & Action
97 Delete Orders
98 Update Order Actions (COD)
99 Update Order Buttons (COD)
Admin Products & Image Upload
100 Section Intro
101 Get Products For Admin Page
102 Display Products
103 Delete Products
104 Create & Update Actions
105 Create Product Page & Form
106 Form Fields & Slugify
107 Create Product Form Submission
108 Uploadthing Configuration
109 Add Image Uploads
110 Product Cleanup
111 Is Featured & Banner
112 Product Update Form
Admin Users & Search
113 Section Intro
114 Get & Display Users
115 Delete Users
116 User Edit Page
117 Update User Form
118 Update User Action
119 Admin Search Form
120 Admin Order Search
121 Admin User Search
Search Filtering, Drawer & Carousel
122 Section Intro
123 Category Drawer
124 Featured Products Carousel
125 Search Component
126 Search Page
127 Search Filters
128 Get Filter URL Function
129 Category & Price UI Filters
130 Rating Filter & Filter Display
131 Sorting Products
132 Dynamic Metadata
Ratings & Reviews
133 Section Intro
134 Review Prisma Schema, Zod & Type
135 Review List Component
136 Review Form Dialog Component
137 Create & Update Review Action
138 Connect Review Form To Action
139 Get Reviews Action
140 Display Reviews
141 Update & Reload Reviews
Stripe Payments
142 Section Intro
143 Stripe Seup
144 Order Form Payment Intent
145 Stripe Payment Component
146 Stripe Payment Success Page
147 Webhook To Mark Order As Paid
Email Purchase Receipts
148 Section Intro
149 Resend API Key & Setup
150 Resend Main Function
151 Purchase Email Receipt Template
152 Preview Email In Browser With React Email
153 Sending Emails
Homepage Components & Wrap Up
154 Section Intro
155 Icon Boxes Component
156 Deal Countdown Component
157 Wrap Up
Resolve the captcha to access the links!