Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

MERN Stack Project Course - Build Fullstack React App

Khóa học dự án MERN Stack - Xây dựng ứng dụng React Fullstack

Khóa học dự án MERN Stack - Xây dựng ứng dụng React Fullstack

Học MERN Stack bằng cách xây dựng ứng dụng Thương mại điện tử nâng cao, bao gồm Thuộc tính sản phẩm, SocketIO, Chat thời gian thực, Biểu đồ

4.4
(337 đánh giá)
2,516 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
30.5 giờ video
326 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Mern Stack #Node Js #React #Web Development

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

Học cách kết hợp MongoDB, Express, React, NodeJS (MERN Stack)
Cách tạo ứng dụng Web Fullstack (Frontend + Backend) từ đầu bằng MERN Stack
Cách tạo các Component React có thể kiểm thử và dễ bảo trì
Cách kiểm thử ứng dụng bằng Jest, Testing Library & Postman/Insomnia
Hiểu Redux thông qua các tình huống thực tế
Tạo tính năng Chat và Biểu đồ thời gian thực
Triển khai lên Heroku/Render
Và còn rất nhiều nội dung khác

Yêu cầu

Ngôn ngữ JavaScript ở mức ít nhất trung cấp
Cú pháp ES6 (object de-structuring và arrow functions)
Kiến thức cơ bản về HTML & CSS
Kiến thức cơ bản về React được khuyến nghị nhưng không bắt buộc

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

Dành cho tất cả những ai muốn xây dựng ứng dụng web full stack bằng MERN Stack
Dành cho những ai muốn bổ sung một dự án MERN Stack nâng cao vào portfolio

Nội dung khóa học

14 phần • 326 bài giảng
1 Giới thiệu về khóa học MERN Stack
2 Demo ứng dụng
3 Kiến thức cơ bản về MERN Stack
4 Khóa học cấp tốc về cú pháp JSX
5 Trình soạn thảo VS Code
6 Cách sử dụng tài nguyên có thể tải xuống
1 Hãy bắt tay vào công việc thôi!
2 Cài đặt ứng dụng React bằng NPM
3 Tạo Trang đầu tiên và Route đầu tiên
4 Tạo Routes cho các trang công khai như Danh sách sản phẩm
5 Tạo Routes cho các trang được bảo vệ dành cho Người dùng thường
6 Tạo Routes cho các trang được bảo vệ dành cho Quản trị viên
7 Tạo các Component Header và Footer
8 Thông tin về video tiếp theo
9 Tạo Component Chat cho người dùng
10 Tạo Header bằng React Bootstrap
11 Tạo Badge hiển thị số lượng sản phẩm trong giỏ hàng và Select List cho danh mục
12 Tùy chỉnh Component Header
13 Định dạng Component Footer
14 Tạo các Component Carousel và Card bằng React Bootstrap
15 Tùy chỉnh Trang chủ
16 Chat Popup – Vòng tròn màu xanh với các biểu tượng
17 Chat Popup – Tạo Header
18 Chat Popup – Trường nhập tin nhắn và Nút gửi
19 Chat Popup – Ví dụ về lịch sử chat
20 Chuẩn bị Trang danh sách sản phẩm
21 Tạo HTML cho hệ thống đánh giá sao
22 Cải thiện HTML cho tính năng Sắp xếp và Lọc sản phẩm
23 Cải thiện Component cho bộ lọc danh mục
24 Cải thiện phần Thuộc tính cho các tùy chọn lọc
25 Cải thiện Component cho danh sách sản phẩm
26 Cải thiện Component phân trang
27 Tạo chức năng cuộn lên đầu trang
28 Chuẩn bị Trang chi tiết sản phẩm
29 Tiếp tục phát triển Trang chi tiết sản phẩm
30 Cải thiện Component thông báo
31 Cập nhật Trang mô tả sản phẩm
32 Cải thiện phần Đánh giá
33 Tạo hiệu ứng di chuột trên hình ảnh
34 Chuẩn bị Trang giỏ hàng
35 Hoàn thiện Trang giỏ hàng
36 Chuẩn bị Trang đăng ký
37 Tiếp tục phát triển Trang đăng ký
38 Hoàn thiện Template cho Trang đăng ký
39 Chuẩn bị Trang đăng nhập
40 Chuẩn bị Trang hồ sơ người dùng
41 Chuẩn bị Trang đơn hàng của người dùng
42 Hoàn thiện Trang đơn hàng của người dùng (hiện tại là template)
43 Trang chi tiết đơn hàng của người dùng
44 Hoàn thiện Trang chi tiết đơn hàng của người dùng
45 Chuẩn bị Trang chi tiết giỏ hàng của người dùng
46 Chuẩn bị Trang đơn hàng dành cho Admin
47 Tạo Component chứa các liên kết dành cho Admin
48 Chuẩn bị Trang chi tiết đơn hàng dành cho Admin
49 Tạo Trang danh sách sản phẩm dành cho Admin
50 Chuẩn bị Trang tạo sản phẩm bởi Admin
51 Hoàn thiện Trang tạo sản phẩm bởi Admin
52 Hoàn thiện Trang chỉnh sửa sản phẩm dành cho Quản trị viên
53 Tạo Trang người dùng dành cho Admin
54 Tạo Trang chỉnh sửa người dùng dành cho Admin
55 Tạo Trang chat dành cho Admin
56 Tạo Component chat dành cho Admin
57 Chuẩn bị Trang phân tích dành cho Admin
58 Hoàn thiện Trang phân tích dành cho Admin
1 Cài đặt máy chủ Express JS cho Backend của ứng dụng
2 Express Middleware
3 Chuẩn bị tạo API
4 Giới thiệu Controllers trong Express
5 Xử lý lỗi trong Express
6 Middleware tùy chỉnh để xử lý lỗi
1 Giới thiệu và Cấu hình MongoDB
2 Giới thiệu Mongoose - Kết nối với MongoDB
3 Thao tác cơ sở dữ liệu MongoDB đầu tiên
4 Hoàn thiện Product Model
5 Một sản phẩm có thể có nhiều đánh giá
6 Tìm hiểu thêm về quan hệ cơ sở dữ liệu
7 Tạo Indexes trên Product Model
8 Tìm hiểu thêm về Database Indexes
9 Tạo Category Model
10 User Model
11 Order Model
12 Giới thiệu Seeders
13 Seeder cho sản phẩm
14 Seeder cho đánh giá
15 Thêm quan hệ Reviews vào collection Products
16 Seeder cho người dùng
17 Seeder cho đơn hàng
1 Tạo API Endpoints và Controllers
2 Hoàn thiện API Endpoint đầu tiên (GET)
3 API Endpoint để lưu danh mục mới
4 Hoàn thiện API Endpoint để lưu danh mục mới (POST)
5 Tìm hiểu thêm về mã trạng thái phản hồi
6 API để xóa danh mục (DELETE)
7 API Endpoint để lưu thuộc tính danh mục
8 API Endpoint để lấy sản phẩm
9 Bắt đầu phát triển tính năng phân trang
10 Hoàn thiện truy vấn cơ sở dữ liệu cho phân trang
11 Sắp xếp sản phẩm
12 Lọc kết quả sản phẩm
13 Lấy sản phẩm từ danh mục cụ thể (thanh tìm kiếm)
14 Lấy sản phẩm từ danh mục cụ thể (trang lọc)
15 Lấy sản phẩm theo thuộc tính
16 Truy vấn tìm kiếm sản phẩm qua hộp tìm kiếm
17 Lấy sản phẩm theo Id
18 Truy vấn cơ sở dữ liệu cho sản phẩm bán chạy nhất
19 Lấy dữ liệu sản phẩm dành cho Admin
20 API Endpoint để xóa sản phẩm bởi Admin
21 Tạo sản phẩm bởi Admin
22 Admin có thể cập nhật sản phẩm
23 Bắt đầu phát triển tính năng tải tệp lên
24 Xác thực hình ảnh
25 Chuẩn bị cho lần tải lên cuối cùng
26 Thực hiện tải lên cuối cùng
27 Lưu đường dẫn của hình ảnh đã tải lên
28 API Endpoint để xóa một hình ảnh
29 Xóa đường dẫn cơ sở dữ liệu của hình ảnh đã xóa
30 Lấy danh sách người dùng dành cho Admin
31 Đăng ký người dùng mới
32 Băm mật khẩu trước khi lưu vào cơ sở dữ liệu
33 Tạo Cookie và gửi nó cùng với phản hồi
34 Sử dụng JsonWebToken để xác thực và phân quyền
35 Bắt đầu phát triển chức năng đăng nhập
36 Hoàn thiện quá trình đăng nhập
37 Tạo Middleware để kiểm tra quyền truy cập tài nguyên
38 Tạo Middleware để kiểm tra quyền truy cập tài nguyên của Admin
39 Cập nhật hồ sơ người dùng
40 Lấy dữ liệu người dùng cho hồ sơ
41 Tạo đánh giá cho một sản phẩm
42 Cập nhật collection Products bằng đánh giá đã thêm
43 Mỗi người dùng chỉ được đánh giá sản phẩm một lần
44 Giới thiệu Transactions cho đánh giá
45 Lấy dữ liệu người dùng để cập nhật trong Admin Panel
46 Cập nhật người dùng
47 Xóa người dùng
48 API Endpoint để lấy đơn hàng cho người dùng thường
49 Lấy chi tiết đơn hàng cho người dùng thường
50 Tạo một đơn hàng
51 Cập nhật trạng thái đơn hàng thành đã thanh toán
52 Cập nhật trạng thái đơn hàng thành đã giao hàng
53 Lấy tất cả đơn hàng dành cho Admin
54 Lấy đơn hàng để phân tích
1 Tạo Scripts để chạy Frontend và Backend dễ dàng hơn
2 Tạo lệnh Console cho Seeders
3 Hiển thị thông báo lỗi trong Console
4 Kết nối Frontend với Backend
1 Chia Trang người dùng thành hai tệp: Component và Page
2 Quản lý Local State cho Component React
3 Sử dụng Local State để lưu trữ người dùng
4 Ngắt kết nối cơ sở dữ liệu khi rời khỏi trang
5 Hiển thị người dùng trên trang
6 Xóa người dùng khỏi danh sách
7 Hiển thị danh sách sản phẩm
8 Xóa sản phẩm khỏi danh sách
9 Lấy đơn hàng cho Admin Panel
10 Hiển thị đơn hàng cho Admin Panel
11 Hiển thị Trang chi tiết đơn hàng
12 Gọi API cho chi tiết đơn hàng
13 Hiển thị dữ liệu động cho Trang chi tiết đơn hàng
14 Hiển thị các mục giỏ hàng trên Trang chi tiết đơn hàng
15 Đánh dấu đơn hàng là đã giao
16 Sửa Component mục giỏ hàng
1 Cài đặt và giới thiệu Redux
2 Cài đặt Redux Devtools Extension
3 Tổ chức Redux thành Actions, Constants và Reducers
4 Đọc dữ liệu từ Redux State
1 Bắt đầu phát triển Trang đăng nhập
2 Thông tin trạng thái đăng nhập
3 Chuyển hướng sau quá trình đăng nhập
4 Lưu người dùng đã đăng nhập vào Redux Global State
5 Sử dụng Local Storage để lưu trữ Redux State ban đầu
6 Hoàn thiện hệ thống đăng nhập
7 Tạo chức năng đăng xuất
8 Đăng ký người dùng mới
9 Kiểm soát Spinner và thông báo trong khi đăng ký người dùng mới
10 Hai mật khẩu phải khớp nhau
1 Hiển thị Thông tin Người dùng trên Header
2 Cập nhật Hồ sơ Người dùng
3 Thông báo cho Trang Hồ sơ Người dùng
4 Hai Mật khẩu phải Khớp nhau
5 Lấy Dữ liệu Người dùng cho Trang Chỉnh sửa Hồ sơ
6 Cập nhật Redux State và Local Storage khi Sửa Người dùng
7 Gọi API lấy Tất cả Sản phẩm
8 Hiển thị Sản phẩm trên Trang Chính
9 Bắt đầu Phát triển Trang Chi tiết Sản phẩm
10 Tiếp tục Trang Chi tiết Sản phẩm
11 Chuẩn bị Hàm Xử lý Thêm vào Giỏ hàng
12 Chuẩn bị Dữ liệu Sản phẩm Đã thêm vào Giỏ hàng cho Redux
13 Tiếp tục Chuẩn bị Dữ liệu Sản phẩm Đã thêm vào Giỏ hàng cho Redux
14 Tính toán Cuối cùng cho Các mục Giỏ hàng
15 Lưu Các mục Giỏ hàng vào Local Storage
16 Thông báo khi Thêm vào Giỏ hàng
17 Bắt đầu Phát triển Trang Giỏ hàng
18 Hiển thị Các mục Giỏ hàng từ Redux State
19 Chuẩn bị Hàm Xử lý Xóa khỏi Giỏ hàng
20 Hoàn thành Xóa khỏi Giỏ hàng
21 Trang Chi tiết Giỏ hàng của Người dùng
22 Hoàn thiện Dữ liệu Giỏ hàng cho Trang Chi tiết Giỏ hàng của Người dùng
23 Thông tin Người dùng trên Trang Chi tiết Giỏ hàng
24 Vô hiệu hóa Nút bấm trên Trang Chi tiết Giỏ hàng
25 Thiết lập Thông tin Địa chỉ Thiếu trên Trang Chi tiết Giỏ hàng
26 Chuẩn bị Dữ liệu Đơn hàng
27 Lưu Dữ liệu Đơn hàng vào Cơ sở dữ liệu
28 Trang Chi tiết Đơn hàng của Người dùng
29 Hiển thị Dữ liệu Người dùng trên Trang Chi tiết Đơn hàng của Người dùng
30 Lấy Dữ liệu Đơn hàng cho Trang Chi tiết Đơn hàng của Người dùng
31 Thiết lập Thông báo sau khi Đặt hàng
32 Liệt kê Tất cả Mục Giỏ hàng trên Trang Chi tiết Đơn hàng của Người dùng
33 Chuẩn bị Hàm Xử lý Đặt hàng
34 Cài đặt PayPal cho Trang Chi tiết Đơn hàng
35 Hiển thị Nút PayPal
36 Tạo Phương thức cho Nút PayPal
37 Hoàn thành Hàm PayPal để Tạo Đơn hàng (Thanh toán)
38 Tiếp tục Hàm PayPal để Xác nhận Đơn hàng
39 Tiếp tục Hàm PayPal để Xác nhận Đơn hàng (Phần 2)
40 Bắt đầu Trang Đơn hàng của Người dùng
41 Hiển thị Đơn hàng của Người dùng
42 Tạo File Redux cho Danh mục
43 Trang Chỉnh sửa Sản phẩm – Liệt kê Danh mục
44 Trang Chỉnh sửa Sản phẩm – Lấy Dữ liệu Sản phẩm
45 Điền các Trường Form cho Trang Chỉnh sửa Sản phẩm
46 Thu thập Tất cả Trường Form cho Trang Chỉnh sửa Sản phẩm
47 Chỉnh sửa Sản phẩm
48 Hiển thị Thuộc tính cho Trang Chỉnh sửa Sản phẩm
49 Lấy Giá trị cho Thuộc tính Đã chọn
50 Xử lý Thay đổi Danh mục trên Trang Chỉnh sửa Sản phẩm
51 Thuộc tính của Sản phẩm trên Trang Chỉnh sửa Sản phẩm
52 Tạo Hàm Wrapper cho Bảng Thuộc tính
53 Xóa Thuộc tính khỏi Bảng
54 Thiết lập Danh mục cho Sản phẩm Đã chỉnh sửa
55 Ngăn Gửi Form khi Thêm Thuộc tính
56 Vô hiệu hóa Trường Khóa Thuộc tính nếu Giá trị Trống
57 Hoàn thành Bảng Thuộc tính cho Trang Chỉnh sửa Sản phẩm
58 Lưu Thuộc tính vào Collection Danh mục
59 Xóa Đường dẫn Ảnh trên Trang Chỉnh sửa Sản phẩm
60 Tải Ảnh lên
61 Trang Tạo Sản phẩm - Bắt đầu
62 Yêu cầu API để Tạo Sản phẩm
63 Trang Tạo Sản phẩm – Yêu cầu API
64 Tải Ảnh lên Cloudinary
65 Lưu Đường dẫn Ảnh Cloudinary vào Cơ sở dữ liệu
66 Xóa Đường dẫn Ảnh từ Cloudinary
67 Tái cấu trúc Mã
68 Tạo Danh mục Mới
69 Gọi API cho Danh mục Mới
70 Xóa Danh mục
71 Tái cấu trúc Mã
72 Tiếp tục Tái cấu trúc Mã
73 Tái cấu trúc Mã (Tiếp theo)
74 Xóa Thuộc tính cho Trang Tạo Sản phẩm
75 Lưu Thuộc tính vào Document Danh mục
76 Hoàn thành Trang Tạo Sản phẩm
77 Bắt đầu Trang Chỉnh sửa Người dùng
78 Lấy Dữ liệu Người dùng để Chỉnh sửa
79 Cập nhật Người dùng
80 Lấy Chi tiết Sản phẩm
81 Lấy Ảnh trên Trang Chi tiết Sản phẩm
82 Lấy Đánh giá trên Trang Chi tiết Sản phẩm
83 Chuẩn bị Hàm Xử lý Gửi Đánh giá
84 Viết Đánh giá Sản phẩm
85 Cuộn Thanh cuộn Xuống
86 Trang Danh sách Sản phẩm
87 Chỉnh sửa Trang Chủ
88 Thuộc tính cho Danh mục Đã chọn
89 Thu thập Thuộc tính Sản phẩm Đã chọn
90 Mảng với Thuộc tính Đã chọn
91 Nút Đặt lại Bộ lọc
92 Bộ lọc Giá
93 Bộ lọc Đánh giá
94 Bộ lọc Danh mục
95 Thu thập ID của Danh mục Đã chọn
96 Vô hiệu hóa Danh mục Không liên quan
97 Lấy Thuộc tính cho Danh mục Đã chọn
98 Kiểm soát Hiển thị Phần Danh mục trên Thanh lọc
99 Chuẩn bị Tùy chọn Sắp xếp
100 Chuẩn bị Phân trang
101 Tiếp tục Phân trang (Chỉ phần frontend)
102 Phân trang – Phần Backend
103 Lọc Sản phẩm
104 Danh mục trên Header
105 Chuẩn bị Hàm Xử lý cho Form Tìm kiếm
106 Điều hướng đến Route Đúng khi Tìm kiếm Sản phẩm
107 Sản phẩm Bán chạy – Tạo Yêu cầu API
108 Hoàn thành Sản phẩm Bán chạy
109 Dependency Injection & Presentational Components
1 Trang Phân tích
2 Lấy Dữ liệu Đơn hàng cho Hai Ngày
3 Chuẩn bị Đối tượng JavaScript cho Biểu đồ
4 Vẽ Biểu đồ
5 Cài đặt SocketIO
6 Chuẩn bị Hàm Xử lý Lắng nghe Sự kiện từ Socket
7 Hoàn thành Trang Phân tích Doanh số
1 Gửi Tin nhắn Socket từ Client đến Server
2 Hiển thị Tin nhắn Chat của Người dùng trong Hộp chat
3 Admin Nhận Tin nhắn Chat
4 Redux cho Chat
5 Hộp chat cho Admin
6 Admin có thể Đóng Hộp chat
7 Hiển thị Tin nhắn Chat từ Client
8 Hiển thị Văn bản do Admin viết trong Hộp chat Admin
9 Cải thiện Thanh cuộn ChatRoom
10 Gửi Tin nhắn từ Admin đến Client
11 Vòng tròn Đỏ thông báo Tin nhắn Chat Mới đến
12 Cho Admin - Vòng tròn Đỏ thông báo Tin nhắn Chat Mới đến
13 Âm thanh thông báo Tin nhắn Chat Mới đến
14 Cho Admin - Âm thanh thông báo Tin nhắn Chat Mới đến
15 Thu thập Admin trong Socket Server
16 Giao tiếp Một-một
17 Client Ngắt kết nối khỏi Chat
18 Client Ngắt kết nối khỏi Chat – Phần 2
19 Hoàn thành Chức năng Chat
1 Cài đặt Gói Helmet SEO
2 Cài đặt Gói Helmet cho Bảo mật
3 Về Dịch vụ Miễn phí của Heroku
4 Chuẩn bị Triển khai lên Heroku
5 Triển khai lên Heroku
6 Triển khai lên Render.com
1 Tạo Ví dụ Kiểm thử Jest
2 Kiểm thử Component React Ví dụ dùng Jest và Testing Library
3 Kiểm thử Component HomePage
4 Mock Hàm Redux
5 Kiểm thử Component Login Page
6 Kiểm thử Home Page dùng jest.mock()
7 Dùng Jest cho Backend
8 Tạo Kiểm thử Snapshot
9 Code Coverage
10 Mã nguồn đầy đủ của ứng dụng

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

In this course, you will learn the MERN Stack by building an amazing e-commerce application from scratch. The application will have not only basic functionalities such as a shopping cart and product search, but also advanced things such as chat, real-time sales charts, product attributes (e. g. product color to choose from), creating testable components in React and other things (see free videos and curriculum).


MERN Stack is a very popular development kit for building web applications. MERN consists of MongoDB (as a database), Express (a framework to make it easier to use Node), React (to create user interfaces), and Node (as a server). You will learn how to combine all four technologies together and build an advanced fully responsive e-commerce application step by step.

In the first part, you will learn the basics of MERN Stack and the JSX extension. Thanks to JSX we can easily create components in React. I will also show you the entire application and give you some tips about VS Code and downloadable resources. And the rest of this course is about covering and going through the steps of creating each MERN Stack application from scratch using e-commerce as example app. I will explain you everything in elegant and understandable way. You will deeply understand Redux using real life scenarios.

  1. We'll start by installing React and creating an HTML template for the entire application (using React Bootstrap). We will link the created subpages with routing

  2. Next, we will install Express JS to handle the Node server for our application

  3. We will connect to the MongoDD database and save example data to this database, such as a list of products for the store

  4. We will create an API through which the frontend will retrieve data from the database, log in to the application, etc.

  5. Once we have the frontend, backend and API, we can connect everything together and develop the application further by supplementing the frontend code with backend operations

  6. We will test our app using Jest & Testing Library



Some of the e-commerce app features:

  • shopping cart

  • login, register

  • PayPal payment

  • upload images to Cloudinary and to local disk

  • searching, sorting, filtering, pagination of product list

  • multilevel categories

  • bestsellers carousel

  • star rating system and reviews

  • real time sales charts using SocketIO

  • chat using SocketIO

  • deploy application to Heroku & Render

  • React local state

  • Redux state

  • beautiful functional programming using React Hooks

  • Much more!

Please go through the curriculum and see free videos to get better understanding of the course


Almost all of my students are satisfied with my courses! Take a look at some of the comments from them:

"I loved this course, the author explains everything in a good way, even for me non native speaker. I was a bit scared to do an english course but it paid off.

Thanks a lot and greetings from Germany"

another:

"This course is outstanding! It covers ground that no other course does. The instructor is well organized and thorough in all his examples and explanations. I'm looking forward to more of his courses."


Sign up for the course now and become a MERN Stack web developer !

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 😊