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

Build a Real Time Chat App With React + NestJS & GraphQL

Xây dựng Ứng dụng Chat Thời gian Thực với React + NestJS & GraphQL

Xây dựng Ứng dụng Chat Thời gian Thực với React + NestJS & GraphQL

Xây dựng một ứng dụng web full-stack, có khả năng mở rộng, đạt cấp độ production bằng cách tuân theo các phương pháp hay nhất. Bao gồm triển khai liên tục (continuous delivery) trên AWS.

4.6
(163 đánh giá)
1,854 học viên
Giảng viên
Michael Guay
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
14.0 giờ video
78 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ì

Xây dựng & triển khai một ứng dụng web nhắn tin thời gian thực
Triển khai xác thực JWT trên backend & giao diện người dùng (UI)
Sử dụng Material UI để phát triển giao diện người dùng nhất quán & responsive
Phát triển một GraphQL API cho chức năng CRUD
Lưu trữ dữ liệu bằng MongoDB & mẫu Abstract Repository
Thực hiện các migration cơ sở dữ liệu tự động
Sử dụng Apollo Client để quản lý trạng thái UI & cache dữ liệu ứng dụng
Sử dụng GraphQL WebSocket Subscriptions để publish & nhận tin nhắn thời gian thực
Định tuyến UI tùy chỉnh với React Router
Sử dụng công cụ code generation để tự động tạo types từ GraphQL schema
Triển khai phân trang phía máy chủ (server-side pagination) để thực hiện infinite scrolling
Sử dụng MongoDB aggregation để thực hiện các truy vấn và gọi DB bằng một thao tác duy nhất
Tải file lên Amazon S3
Triển khai lên môi trường production trên AWS (tất cả đều dùng free-tier)
Continuous Delivery & CI/CD
Kết nối ứng dụng Pub/Sub với Redis để cho phép phân phối tin nhắn & mở rộng quy mô ngang (horizontal scaling)
Kết nối ứng dụng với một tên miền tùy chỉnh & bảo mật lưu lượng HTTPS

Yêu cầu

Có kinh nghiệm với backend Node/Express, ưu tiên NestJS & TypeScript
Có kinh nghiệm xây dựng giao diện người dùng với React

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

Dành cho lập trình viên trình độ trung cấp muốn học các phương pháp hay nhất để xây dựng & triển khai một ứng dụng web có khả năng mở rộng, đạt cấp độ production
Dành cho lập trình viên trình độ trung cấp muốn học cách triển khai ứng dụng web trên AWS với continuous delivery

Nội dung khóa học

18 phần • 78 bài giảng
1 Giới thiệu
2 Demo Dự án
3 Đối tượng Khóa học
4 Tài nguyên Khóa học
5 Cập nhật Mới nhất
1 Create React App & Material UI
2 React Router DOM & Giao diện Xác thực (Auth UI)
1 Thiết lập NestJS & Tài nguyên Người dùng (Users Resource)
2 Abstract Repository
3 Users Repository & GraphQL CRUD - Phần 1
4 Users Repository & GraphQL CRUD - Phần 2
5 Validation, Logging, & Dọn dẹp Cấu hình (Config Cleanup)
6 Database Migrations
7 Lỗi Cập nhật Người dùng (Update User Bug)
1 Lưu ý về Giao diện (UI Note)
2 Thiết lập Apollo Client
3 Tạo Người dùng (Create User)
1 Passport & Local Strategy
2 Áp dụng Local Strategy
3 JWT Strategy - Phần 1
4 JWT Strategy - Phần 2
5 Áp dụng GQL Auth Guard
1 Đăng nhập Giao diện (UI Login)
2 Xác thực Dữ liệu (Auth Validation) - Phần 1
3 Xác thực Dữ liệu (Auth Validation) - Phần 2
4 Auth Guard
5 Liên kết Đăng xuất (Logout Link)
6 Chuyển hướng Xác thực (Auth Redirect)
1 Header - Phần 1
2 Header - Phần 2
3 Đăng xuất (Logout)
4 Trạng thái Xác thực (Authentication State)
1 Thông báo Lỗi (Error Snack)
1 Danh sách Chat (Chat List)
2 Kết xuất Có điều kiện (Conditional Rendering)
3 Modal Thêm Chat (Add Chat Modal)
4 Tạo Chat Backend (Create Chat Backend)
5 GraphQL Type Generation & Giao diện Tạo Chat (Create Chat UI)
6 Lấy Danh sách Chat (Get Chats)
7 Cập nhật Cache (Update Cache)
8 Dọn dẹp Thêm Chat (Add Chat Cleanup)
1 Giao diện Chat - Phần 1
2 Giao diện Chat - Phần 2
1 Tạo Tin nhắn Backend (Create Message Backend)
2 Tạo Tin nhắn Giao diện (Create Message UI)
3 Lấy Tin nhắn (Get Messages)
4 Cập nhật Cache Tin nhắn (Update Messages Cache)
5 Giao diện Tin nhắn (Messages UI)
1 Giao diện Responsive (Responsive UI)
1 Subscriptions Backend
2 Subscriptions Giao diện (UI Subscriptions)
3 Xác thực & Ngữ cảnh Subscription (Subscription Auth & Context)
4 Cập nhật Cache Tin nhắn (Update Messages Cache)
1 Aggregation Tin nhắn (Messages Aggregation)
2 Aggregation Chat (Chats Aggregation)
3 Thực thể Giao diện (UI Entities)
4 Cache Tin nhắn Mới nhất (Latest Message Cache)
5 Nhiều Subscriptions Tin nhắn (Multiple Message Subscriptions)
1 Phân trang Chat Backend (Chats Backend Pagination)
2 Phân trang Chat Giao diện (Chats UI Pagination)
3 Phân trang Tin nhắn Backend (Messages Backend Pagination)
4 Phân trang Tin nhắn Giao diện & Dọn dẹp (Messages UI Pagination & Cleanup)
1 Thiết lập AWS
2 Tải File lên Backend (Backend File Upload)
3 Tải File lên Giao diện (UI File Upload)
4 Ảnh Hồ sơ Người dùng Backend (User Profile Image Backend)
5 Ảnh Hồ sơ Người dùng Giao diện (User Profile Image UI)
1 Các Nhánh AWS (AWS Branches)
2 Giao diện Amplify (Amplify UI)
3 Elastic Beanstalk
4 CI/CD với Code Pipeline
5 MongoDB Atlas & Cập nhật Ứng dụng
6 Chứng chỉ SSL (SSL Certificate)
7 CORS & Dọn dẹp Ứng dụng
8 Redis Pub/Sub
9 Tên miền Tùy chỉnh (Custom Domain)
1 Cập nhật Backend: Mongoose, GraphQL & Hơn thế nữa
2 Cập nhật Giao diện: Vite & Các Phụ thuộc Mới nhất

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

In this course, we go beyond the documentation & small simple starter apps to build a real-world full-stack chatting application. This application is built from the ground up to be scaleable & production-grade. The goal of the course is for you to be comfortable developing full-stack web apps so you can develop your own afterward.

We use a NestJS backend, a popular Node.js library that allows us to quickly create clean-code HTTP APIs. Our CRUD functionality will be served by a GraphQL API that persists data using a MongoDB database. We'll use this same GraphQL API to create our messaging subscription which allows for WebSocket connection to our UI to facilitate messaging. Of course, everything will be secured with industry-standard JWT auth.

On the UI we will create a React App using the beautiful Material UI to easily create a responsive UI and interact with our backend. We'll choose Apollo Client for state management so we can easily interact with our GraphQL API & cache data.

Finally, all of this will be deployed onto AWS Elastic Beanstalk & Amplify. Backed by a continuous delivery CI/CD pipeline, whenever we push code our latest changes will get built & deployed to our environment of choice.

By the end of the project, you will have learned everything you need to get started in building & deploying your very own production-grade web apps!

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 Full Stack Development
Hiển thị tất cả khoá học Nestjs
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 😊