Xây dựng Blog với NestJs & ReactJs #11: Login Authentication, Global Loading, Validation với ReactJs

Trong loạt video này, mình sẽ record lại chi tiết cách xây dựng một blog với sự kết hợp giữa NestJs và ReactJs. Trong những video trước mình đã tạo phần Backend API với NestJs, từ video này mình sẽ chuyển qua làm phần Frontend với ReactJs để tích hợp với API.
Phần #11 gồm các nội dung chính như sau:
- Khởi tạo Codebase cho Admin Dashboard
- Apply Protected Routes trong ReactJs
- Login, Logout với ReactJs
- Validate form
- Hiển thị lỗi từ Backend API với React Toastify
- Tạo Global Loading với Redux và React Spinners
***** Đón xem phần tiếp theo #12 với nội dung******
- Refresh token trong ReactJs, xử lý khi Access token expired
- Intercepter in ReactJs
- Sử dụng Access token để request những private API
******Nếu bạn chưa xem những phần trước về cách xây dụng Backend API với NestJs, có thể xem lại tại đây******
• Xây dựng Blog với Nest...
****** Link GitHub*******
- Frontend: bitbucket.org/...
- Backend: bitbucket.org/...
Chúc các chiến hữu thành công!!!!

[@ngoclamnguyen3086]

anh làm thêm video giải quyết trường hợp khi mình request nhiều api cùng 1 lúc nhưng lúc đó access token hết hạn đi anh

[@ngocdo1262]

Hết series ReactJS bro làm tiếp 1 series nữa về NextJS kết hợp vs NestJS đc ko? Về căn bản NextJS cũng kế thừa từ ReactJS nhưng nó có mấy cái ưu việt hơn.

[@NxBDev-Spkt]

Ok bro. Mình cũng tính sài NextJS cho cái website show blog cho end user. NextJS hỗ trợ Server rendering tốt cho SEO hơn. ReactJS chỉ làm cho phần Admin dashboard này thôi

[@NxBDev-Spkt]

Anh em có thể mở thêm bài nhạc không lời này làm nhạc nền trong lúc xem video cho nó đỡ chán, tâm tịnh hơn hẳn :)) kzbin.info/www/bejne/nXy5qmyies5mkMU 😂

[@devitliu1428]

Cho em.hỏi là tại sao anh k dùng redux toolkit ạ

[@NxBDev-Spkt]

Video này dùng redux kiểu truyền thống, redux toolkit sẽ dùng trong những series video khác đó em cho đa dạng cách dùng. Để so sánh thấy dc redux toolkit có ưu điểm gì hơn. cảm ơn e đã góp ý 👍

[@vunam-uz8dk]

bạn ơi sao không cho FE BE vào 1 thư mục thành 1 project

[@NxBDev-Spkt]

Đang làm theo mô hình multi repo. Deploy source FE và BE riêng ra đó bạn!

[@vunam-uz8dk]

@@NxBDev-Spkt mình mới học cho mình hỏi 1 con VPS có chứa được cả source BE và cả FE không ? hay phải ở 2 nơi khác nhau

[@NxBDev-Spkt]

@@vunam-uz8dk dc bạn. Fe sẽ chạy port 80, còn Be chạy một port khác ví dụ 3000 chẳng hạn. Fe gọi api BE qua port 3000 như dưới máy local của bạn vậy đó. Một vps còn có thể chứa nhiều Fe,Be nữa

[@DatNguyen-wb8jr]

sờ pai nơ nha, ko phải sờ nip pơ

[@Tran-Nhan]

Cảm ơn bạn về series này, bạn có thể cho mình xin link github hoặc link source này để đối chiếu code.

[@NxBDev-Spkt]

- Link bitbucket cho phần backend api đây nhe bạn: bitbucket.org/nghiembao/blog-nestjs/src/master/ - Còn phần frontend mình chưa đẩy lên git. Khi nào xong Admin dashboard mình sẽ đưa lên git luôn

[@Tran-Nhan]

@@NxBDev-Spkt Cảm ơn bạn nhiều.