Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

MERN STACK NODE API REACT E-Commerce with 100+ Solutions

Xây Dựng Website Thương Mại Điện Tử với MERN Stack: Node API, React cùng 100+ Giải Pháp Thực Tế

Xây Dựng Website Thương Mại Điện Tử với MERN Stack: Node API, React cùng 100+ Giải Pháp Thực Tế

Hướng dẫn xây dựng website thương mại điện tử với React, NodeJs, MongoDB API, tích hợp thanh toán và 116 giải pháp chi tiết

4.6
(113 đánh giá)
1,394 học viên
Giảng viên
Ryan Dhungel
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
22.5 giờ video
159 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Phát Triển Ứng Dụng Web với React
Phát Triển API với NodeJs
Hiểu Rõ Nguyên Lý Cốt Lõi của Thương Mại Điện Tử
Tự Mình Xây Dựng Tính Năng Giỏ Hàng Cho Người Dùng
Viết Các Component React Chức Năng
Tích Hợp Thanh Toán (Thẻ Tín Dụng, PayPal) sử dụng Braintree - Một Công Ty của PayPal
Xác Thực, Phân Quyền và Bảo Vệ Route (Từ Backend đến Frontend)
Trang Cửa Hàng Chuyên Biệt với Tìm Kiếm Nâng Cao Theo Danh Mục và Khoảng Giá
Thực Hiện CRUD (Tạo, Đọc, Cập Nhật, Xóa) cho Sản Phẩm và Danh Mục
Xem Trước và Tải Ảnh Lên
Tính Năng Tìm Kiếm Sản Phẩm Trong Menu Điều Hướng
Sử Dụng React Context làm State Toàn Cục
Sử Dụng Local Storage để Lưu Trữ Dữ Liệu Lâu Dài
Bảng Điều Khiển cho Quản Trị Viên và Người Dùng
Tính Năng Phân Trang "Tải Thêm"
Cập Nhật Số Lượng Sản Phẩm và Số Lượng Đã Bán Sau Mỗi Giao Dịch
Quản Lý Đơn Hàng bởi Quản Trị Viên
Gửi Thông Báo Qua Email cho Người Dùng
Triển Khai Ứng Dụng Lên Heroku Cloud

Yêu cầu

Hiểu Biết Cơ Bản về JavaScript
Hiểu Biết Cơ Bản về React
Hiểu Biết Cơ Bản về NodeJs

Đối tượng phù hợp

Dành cho Lập Trình Viên JavaScript Muốn Xây Dựng Ứng Dụng Thực Tế với React
Dành cho Lập Trình Viên JavaScript Muốn Xây Dựng API với NodeJs
Dành cho Lập Trình Viên JavaScript Muốn Xây Dựng Ứng Dụng Thương Mại Điện Tử với CRUD Nâng Cao, Xác Thực, Phân Quyền, Tìm Kiếm và Lọc

Nội dung khóa học

31 phần • 158 bài giảng
1 Tổng quan dự án từ góc độ người dùng
2 Tổng quan dự án từ góc độ quản trị viên
3 Bạn đã sẵn sàng cho khóa học này chưa?
4 Tải Mã Nguồn
1 Cách khởi tạo dự án với NPM
2 Cách tạo máy chủ Express
3 Cách chạy máy chủ Express liên tục bằng nodemon
4 Cách sử dụng import/export trong NodeJs
5 Cách sử dụng file ENV và gitignore trong NodeJs
1 Cách kết nối với MongoDB trên máy local
2 Cách sử dụng MongoDB Atlas làm cơ sở dữ liệu trên đám mây
1 Giải thích khái niệm Routes và Middlewares
2 Cách sử dụng các hàm Controller
3 Cách tạo Mongoose Model bằng Schema
1 Cách sử dụng bcrypt để mã hóa và so sánh mật khẩu
2 Cách sử dụng morgan làm middleware để ghi log các endpoint request
3 Cách sử dụng Postman để kiểm thử NodeJs API
4 Cách lưu dữ liệu vào MongoDB
5 Cách đăng ký người dùng với validation và phản hồi lỗi
6 Cách tạo JWT (JSON Web Token)
7 Cách đăng nhập người dùng bằng cách so sánh mật khẩu
1 Cách gửi token xác thực trong HTTP request headers
2 Cách bảo vệ route bằng JWT verify
3 Cách bảo vệ route chỉ dành cho admin bằng middleware isAdmin
1 Cách tạo model danh mục
2 Cách thực hiện POST request với JWT token trong request headers và body
3 Cách tạo danh mục và lưu vào MongoDB
4 Tạo các route CRUD cho danh mục
5 Cách thực hiện CRUD với NodeJs và MongoDB
6 Cách kiểm thử các endpoint CRUD API bằng Postman
1 Cách viết product schema để tạo product model
2 Tạo sản phẩm bằng dữ liệu JSON so với form data
3 Cách xử lý form data với tải ảnh lên và áp dụng validation
4 Cách lưu sản phẩm vào MongoDB
5 Cách gửi danh sách sản phẩm dưới dạng JSON response
6 Cách lấy thông tin một sản phẩm từ MongoDB
7 Cách gửi ảnh cho từng sản phẩm
8 Cách xóa một sản phẩm khỏi MongoDB
9 Cách cập nhật sản phẩm trong MongoDB
1 Cách tạo một dự án React mới
2 Cách tạo các trang trong React
3 Cách thêm hệ thống định tuyến vào ứng dụng React
4 Cách sử dụng Bootstrap CSS trong ứng dụng React
5 Cách tạo menu điều hướng bằng Bootstrap 5
6 Cách tạo Jumbotron trong Bootstrap 5
1 Cách tạo các component có thể tái sử dụng trong React bằng props
2 Cách sử dụng useState hook trong React để lưu trữ dữ liệu người dùng nhập
3 Cách tạo form đăng ký người dùng trong React
4 Thực hiện API request bằng Axios
5 Cách kiểm tra thông báo lỗi API request trong React
6 Cách giải quyết vấn đề CORS và hiển thị thông báo lỗi bằng Toast
7 Cách tạo một trang đăng nhập hoạt động trong React
1 Cách tạo context và truy cập giá trị của nó trong React
2 Lưu phản hồi đăng nhập người dùng vào context
3 Duy trì state khi tải lại trang bằng local storage
1 Cách chuyển hướng người dùng trong React
2 Cách hiển thị và ẩn các liên kết điều hướng theo điều kiện
3 Trang bảng điều khiển người dùng
4 Cách bảo vệ trang bằng private route trong React sử dụng React Router 6
5 Cách trì hoãn chuyển hướng bằng setInterval
6 Cách hiển thị chỉ báo đang tải
7 Cách bảo vệ route dựa trên phản hồi từ máy chủ
1 Cách cấu hình Axios với base url và token
2 Cách tạo trang 404 không tìm thấy trong React
3 Cách đưa người dùng đến trang dự định sau khi đăng nhập
4 Cách tạo định tuyến dựa trên vai trò với tùy chọn dropdown
1 Tạo trang bảng điều khiển admin
2 Cách giới hạn quyền truy cập chỉ dành cho admin
3 Cách tạo menu sidebar cho admin
4 Các trang admin dùng chung menu sidebar
5 Các trang người dùng dùng chung menu sidebar
1 Cách thực hiện Axios POST request để tạo danh mục từ ứng dụng React
2 Cách hiển thị tất cả danh mục trong React
3 Cách chuyển code sang component để tái sử dụng
4 Cách sử dụng Modal của Ant Design để cập nhật danh mục
5 Cách thực hiện Axios PUT request để cập nhật danh mục
6 Cách thực hiện Axios DELETE request từ ứng dụng React
1 Cách sử dụng dropdown Select có thể tìm kiếm để hiển thị danh sách danh mục
2 Cách chọn file ảnh để tải lên trong React
3 Cách hiển thị xem trước ảnh của file đang tải lên trong React
1 Cách xây dựng form để tạo sản phẩm
2 Cách gửi form data để tạo sản phẩm kèm ảnh
3 Cách hiển thị danh sách sản phẩm cho admin
4 Cách hiển thị danh sách sản phẩm trong Bootstrap cards
5 Cách điền sẵn dữ liệu sản phẩm vào form cập nhật
6 Cách thực hiện Axios PUT request để cập nhật sản phẩm
7 Sửa các vấn đề cập nhật sản phẩm liên quan đến ảnh và trường shipping
8 Cách thực hiện Axios DELETE request từ React
9 Xử lý lỗi: Không thể đặt headers sau khi đã gửi đến client
1 Cách sắp xếp sản phẩm dựa trên ngày tạo và số lượng đã bán
2 Cách tạo bố cục responsive 2 cột bằng Bootstrap
3 Cách sử dụng component thẻ sản phẩm có thể tái sử dụng và hiển thị ảnh responsive
4 Cách thêm nút bấm và hiệu ứng hover vào thẻ sản phẩm
5 Cách sử dụng ribbons để hiển thị thông tin sản phẩm trong thẻ
6 Cách định dạng giá sản phẩm theo tiền tệ địa phương
7 CSS tạo hiệu ứng màu cho Jumbotron
8 Cách tạo màu nền có hiệu ứng chuyển động cho Jumbotron
1 Trang cửa hàng với danh sách sản phẩm
2 Cách hiển thị tùy chọn lọc theo danh mục dưới dạng checkbox
3 Cách hiển thị tùy chọn lọc theo khoảng giá dưới dạng radio buttons
4 Cách tìm sản phẩm dựa trên các tùy chọn lọc danh mục và khoảng giá
5 Cách hiển thị sản phẩm dựa trên các tùy chọn lọc trong React
6 Cách thêm chức năng đặt lại các tùy chọn lọc trong React
1 Cách tạo endpoint sản phẩm phân trang trên server
2 Cách thêm tính năng "Tải thêm" trong React
1 Cách đặt form tìm kiếm trong menu điều hướng
2 Cách tạo component tìm kiếm với state để thực hiện API request
3 Cách tạo truy vấn MongoDB để lấy kết quả tìm kiếm dựa trên nhiều thuộc tính
4 Cách thay thế local state bằng context trong React
5 Cách hiển thị kết quả tìm kiếm cùng với ô nhập tìm kiếm trong menu điều hướng
1 Cách tạo trang xem chi tiết một sản phẩm
2 Hiển thị sản phẩm trong trang chi tiết
3 Cách sử dụng React icons
4 Hiển thị thông tin bổ sung về sản phẩm
5 Cách hiển thị sản phẩm liên quan trong Thương Mại Điện Tử React
6 Hiển thị sản phẩm liên quan trong thẻ sản phẩm
1 Cách tạo custom hook của riêng bạn để lấy dữ liệu
2 Cách hiển thị danh sách danh mục trong menu dropdown
3 Cách hiển thị danh sách danh mục trên một trang
4 Tạo trang xem chi tiết một danh mục
5 Cách hiển thị sản phẩm theo danh mục
1 Cách tạo cart context
2 Cách triển khai tính năng thêm vào giỏ hàng
3 Cách tạo menu dính trên đầu trang
4 Tạo trang giỏ hàng
5 Cách hiển thị sản phẩm trong trang giỏ hàng
6 Cách xóa mặt hàng khỏi giỏ hàng
7 Duy trì giỏ hàng khi tải lại trang
8 Cách hiển thị tổng tiền giỏ hàng
1 Cách tạo trang cập nhật hồ sơ người dùng trong React
2 Cách triển khai cập nhật hồ sơ người dùng bao gồm địa chỉ
3 Hiển thị có điều kiện cho địa chỉ giao hàng
4 Chuyển hướng người dùng đến trang giỏ hàng sau khi đăng nhập
1 Đăng ký Braintree payment
2 Các hàm Braintree để tạo token và xử lý thanh toán
3 Chuyển code từ trang giỏ hàng sang các component
4 Hiển thị Braintree Web Drop In UI trong React
5 Tạo tài khoản PayPal sandbox
6 Lấy payment method nonce khi nhấn nút mua
7 How to process payment with Braintree
8 How to charge exact amount based on cart total
9 Create a new order on successful payment
10 How to add loading state to disable buy button
1 How to get logged-in user's all orders
2 Display order status in a table
3 How to display user order's each product
4 Cách trừ tồn kho mỗi khi sản phẩm được bán
1 Hiển thị danh sách đơn hàng cho quản trị viên
2 Cách sử dụng component Select của Ant Design
3 Cách cập nhật trạng thái đơn hàng bởi quản trị viên
1 Đăng nhập Sendgrid để lấy API keys gửi email
2 Cách gửi email khi trạng thái đơn hàng thay đổi
3 Nhận email cập nhật trạng thái đơn hàng
1 Triển khai NodeJs API lên Heroku Phần 1
2 Triển khai NodeJs API lên Heroku Phần 2
3 Triển khai Ứng dụng Web React lên Heroku
4 Triển khai lên Cloud Servers Digital Ocean
1 Các khóa học khác bạn có thể thích

Giới thiệu khóa học

A FullStack E-commerce App is one of the most popular project for most developers. Everything you learn building an E-commerce project will help you build many other full stack projects because they all share the same concept. Plus, you learn to implement Payment System which is vital to E-commerce apps any many other apps that has some type of monetization system in place. This is one of the main reason why E-commerce based courses are some of the most popular courses here on Udemy.


Why would you want to enroll into this course?

In this course, I have proved that E-commerce apps do not have to be overly complicated. You will be surprised how easy it is to build such rich app. With just the basic knowledge of React and Node, you will be able to build incredible apps of any kind. What you need is an effective way of learning complex topics in easy, practical way which I have provided in this course.


Why yet another E-commerce course?

I already have two E-commerce courses here on Udemy. So why create another one? First of all those existing E-commerce apps are very different in terms of functionalities and extra features. Another reason is the timing. The technology changes at rapid speed. The packages uses last year to create apps are no longer the same this year. That makes it very hard for new students to follow along. Besides E-commerce is one of the most popular project based course here in Udemy. So I had to make another one to make it easier for new developers. There is a lot of improvements in this course, the steps are much easier and straight forward. The code is cleaner and easier to understand.


Is this course suitable for you?

Yes, If you already know the basics of JavaScript, React and NodeJs. If not, then do not worry. Checkout the first few videos of this course for detailed instructions on how to make yourself ready to take on this project. Once you know the basics, you need more and more practice and I can not think of any other project than building E-commerce app from absolute scratch. The amount of knowledge you will gain in this course will be amazing. You will be able to start and successfully build any type of full stack app on your own after completing this course.


What will you learn in this course?

There is so much to learn. In short, you will learn to build React Web App that interacts with NodeJs API. Your app will be fully protected with the Authentication, Authorization and Protected Routes. With hundreds of how-to solutions, you will be amazed at how much you learn in one single course. Each line of code is explained and the clarity of code makes it an absolute joy to build this project.


What makes this course special?

This is the only course where you will learn well over hundreds of how-to solutions. All that in one single course, in one single project. With the beautiful workflow of building an entire E-commerce app from absolute scratch, adding features one after another, the understanding will flow into your brain in a natural way. With hundreds of how-to concepts covered throughout the building process, you will naturally get better at each exercise and implementation makes a lot of sense without any confusion.


What are some of the course highlights?

There are so many exciting features covered in this one course, you will be blown away by excitement and joy. Here are some of the exciting features you will learn to add to your web development skill set:


  • Creating, reading, updating and deleting products and categories

  • Uploading images

  • Using custom product card components to display products

  • Advance searching and filtering of products

  • Products based on categories

  • Sorting products by created date and sold quantity

  • Product in-stock/out-of-stock, sold quantity update etc

  • View product with relative products (suggestive selling)

  • User cart and orders history

  • Admin and user dashboards

  • Order management by admin

  • Email notification to users on order status change

  • Protected routes for logged-in and admin users

  • Braintree Payment System (Credit Card and PayPal)

  • Role based access

  • Deployment to heroku cloud

  • 116 How-to's solutions

  • and lots more...


Join this incredible full stack course that guides you on how to build a real E-commerce app from absolute scratch with each line of code explained for you.

Experience the best learning experience with me Ryan while we build this beautiful project from the very beginning to live running live in Heroku cloud servers.


Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Mern Stack
Hiển thị tất cả khoá học Node Js
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊