Chia Sẻ Khóa Học Xây Dựng Facebook Clone Với React JS Và MERN Stack 2022 [Update Tháng 6-2022] [Khóa 8010 A]
24 tháng 6 2022
/
No Comments
Xây dựng một ứng dụng bản sao Facebook trên mạng xã hội hoàn toàn nâng cao và thành thạo React js, Node js, Express js và Mongodb.
Bạn sẽ học được gì:
- ✓ Xây dựng một ứng dụng bản sao mạng xã hội Facebook nâng cao đầy đủ chức năng phiên bản 2022.
- ✓ Thành thạo React js và tất cả các bí mật và thủ thuật của nó và trở nên thoải mái khi sử dụng nó cho công việc frontend của bạn.
- ✓ Xây dựng một backend mạnh mẽ có thể mở rộng bằng cách sử dụng Node js và Express js.
- ✓ Tìm hiểu cách làm việc với Mongodb và cách thêm, cập nhật, xóa và truy vấn như một Pro.
- ✓ Tìm hiểu cách sử dụng Cloudinary để lưu trữ hình ảnh của bạn theo một cách tuyệt vời mới và cách tải lên, tìm kiếm, lọc và mở ra quan điểm mới về cách làm việc với Cloudinary.
- ✓ Xây dựng một hệ thống xác thực mạnh mẽ, nơi bạn có thể đăng ký, đăng nhập, đặt lại mật khẩu.
- ✓ Xây dựng một hệ thống gửi thư từ đầu để gửi email đến người dùng với các liên kết xác minh email và reset code password.
- ✓ Form validation nâng cao mạnh mẽ bằng cách sử dụng Formik và Yup và tìm hiểu về các kỹ thuật xác thực biểu mẫu tốt nhất được sử dụng.
- ✓ Làm việc thành thạo với dates ở cấp độ khác mà bạn chưa làm trước đây và học cách xác minh tuổi theo năm, tháng và ngày đúng cách.
- ✓ Xác thực dữ liệu trực tiếp (Live data validation) từ cơ sở dữ liệu để đảm bảo dữ liệu của bạn (như tên người dùng) là duy nhất và tạo một looping function để cập nhật dữ liệu đó mọi lúc.
- ✓ Tìm hiểu cách schedule requests đến cơ sở dữ liệu vào mỗi ngày cụ thể mà bạn muốn và chúng tôi sẽ sử dụng điều đó để xóa tất cả người dùng chưa được xác minh sau một tháng.
- ✓ Tìm hiểu cách làm việc với JSON web tokens, cookies...!
- ✓ Tìm hiểu cách sử dụng React Redux Store để có một global store được chia sẻ trên tất cả ứng dụng của chúng tôi.
- ✓ Học và thành thạo React router dom v6 và xóa tất cả những rắc rối mà mọi người gặp phải với nó.
- ✓ Tìm hiểu cách tạo protected routes và bảo mật ứng dụng và các trang của bạn.
- ✓ Một ứng dụng hoàn toàn responsive trên tất cả các thiết bị khác nhau và học các thủ thuật hoặc khả năng đáp ứng nâng cao.
- ✓ Tìm hiểu cách thêm dark mode vào ứng dụng của bạn một cách chuyên nghiệp và có một bộ chuyển đổi để chuyển đổi giữa chế độ sáng và tối.
- ✓ Tìm hiểu cách làm việc với useState, useReducer, useEffect, useRef, useCallback, event Listeakers.
- ✓ Tìm hiểu cách tạo các reusable function như btoggling, clicking outside, switching...!
- ✓ Trong ứng dụng này, bạn sẽ có một trang Home, nơi bạn có các menu và danh sách các bài đăng cho những người bạn theo dõi hoặc bạn bè, nơi bạn có thể cuộn vô hạn.
- ✓ Mỗi người dùng sẽ có một trang cá nhân giống hệt như bìa facebook, ảnh đại diện, thông tin chi tiết, ảnh, bạn bè, bài đăng.
- ✓ Bạn có thể cập nhật bìa của mình bằng các bìa cũ bạn đã có hoặc một hình ảnh mới bằng cách sử dụng một crooper để cắt và thu phóng và chọn phần hình ảnh bạn muốn.
- ✓ Vì vậy, về cơ bản bạn sẽ học cách làm việc với hình ảnh xén, phóng to, lật, xoay.
- ✓ Bạn có thể cập nhật ảnh hồ sơ của mình giống như ảnh bìa, bạn có thể chọn và phóng to, cắt xén ...!
- ✓ Khi bạn cập nhật ảnh bìa hoặc ảnh hồ sơ của mình, một bài đăng sẽ tự động được tạo cho biết người dùng đã cập nhật ảnh hồ sơ / ảnh bìa của họ.
- ✓ Bạn có thể tạo một bài đăng bằng cách sử dụng văn bản, biểu tượng cảm xúc, nền, hình ảnh theo cách được tổ chức tốt giống như facebook.
- ✓ Bạn có thể phản ứng trên một bài đăng với tất cả các phản ứng khác nhau, không phản ứng, thay đổi phản ứng của bạn và xem trực tiếp tất cả các thay đổi.
- ✓ Bạn có thể lưu / hủy lưu một bài đăng, tải xuống hình ảnh của nó, xóa nó ...!
- ✓ Bạn có thể bình luận bằng văn bản, biểu tượng cảm xúc và cũng có thể sử dụng hình ảnh và xem các bình luận đã thêm được sắp xếp trực tiếp và cũng hiển thị thêm chức năng bình luận.
- ✓ Bạn có thể thêm và chỉnh sửa các thông tin chi tiết của mình như tên khác, tiểu sử, công việc, nơi làm việc, mối quan hệ, v.v. và chúng sẽ hiển thị trên hồ sơ của bạn và những người khác có thể nhìn thấy nó.
- ✓ Chúng ta sẽ có một hệ thống kết bạn giống như Facebook, bạn có thể thêm bạn bè, / hủy yêu cầu, theo dõi / hủy theo dõi, chấp nhận yêu cầu / xóa yêu cầu, hủy kết bạn ...!
- ✓ Bạn sẽ có một trang bạn bè, nơi bạn có thể xem các yêu cầu kết bạn mà bạn có, các yêu cầu kết bạn mà bạn đã gửi và danh sách bạn bè của bạn cũng có.
- ✓ Chúng tôi cũng thêm một chức năng tìm kiếm trực tiếp (live search) nơi bạn có thể tìm kiếm những người dùng khác và họ sẽ được lưu trữ trong lịch sử tìm kiếm của bạn và bạn luôn có thể xóa họ.
Trong khóa học này, bạn sẽ học cách xây dựng một ứng dụng bản sao Facebook trên mạng xã hội nâng cao (phiên bản 2022) và thành thạo cách làm việc với React js, Node js, Express js, Mongodb và nhiều công cụ khác mà chúng tôi sẽ sử dụng trong suốt khóa học.
- ✓ Vì vậy, ngay từ đầu, chúng tôi sẽ xây dựng một hệ thống xác thực mạnh mẽ để bạn có thể đăng ký, đăng nhập và đặt lại mật khẩu, chúng tôi cũng sẽ có một hệ thống xác thực cho việc đăng ký bằng Formik và Yup với các thông báo lỗi thân thiện để xác minh tên có độ dài nhất định hoặc không có ký tự đặc biệt, xác thực email và mật khẩu, xác thực ngày để xác minh tuổi, tên người dùng sẽ được tạo tự động và chúng tôi sẽ đảm bảo rằng nó là duy nhất.
- ✓ Chúng tôi cũng tạo một hệ thống gửi thư, nơi chúng tôi sẽ gửi liên kết xác minh và đặt lại mã mật khẩu cho người dùng và ngay sau khi đăng ký, người dùng sẽ nhận được liên kết xác minh để kích hoạt tài khoản, vì vậy chúng tôi cũng đang tìm hiểu cách tạo các email html.
- ✓ Chúng tôi có một trang chủ, nơi tất cả các bài đăng của những người bạn theo dõi hoặc bạn bè sẽ được hiển thị xen kẽ với các bài đăng của bạn và được sắp xếp theo thứ tự từ mới nhất đến cũ nhất.
- ✓ Bạn có thể tạo một bài viết bằng văn bản, biểu tượng cảm xúc, hình nền, hình ảnh và thực hiện dame đẹp như chính xác của Facebook.
- ✓ Bạn có thể phản ứng trên một bài đăng và thay đổi phản ứng không phản ứng, sử dụng nút like để thích, không thích và xóa phản ứng hiện có, phản ứng cũng sẽ được hiển thị và ra lệnh và bất kỳ phản ứng nào bạn hoặc xóa sẽ ảnh hưởng đến trực tiếp đó mà không cần làm mới.
- ✓ Bạn có thể bình luận bằng văn bản, biểu tượng cảm xúc và cả hình ảnh, bình luận cũng sẽ được đặt hàng và luôn cập nhật trực tiếp sau khi gửi.
- ✓ Bạn có thể lưu / hủy lưu bài đăng, tải xuống hình ảnh bài đăng, xóa bài đăng ...!
- ✓ Chúng tôi sẽ có tất cả các loại xác thực để tải lên tệp cho kích thước và loại.
- ✓ Bạn sẽ học cách cắt, phóng to, xoay, lật hình ảnh bằng crooper.
- ✓ Bạn có thể cập nhật ảnh bìa của mình bằng cách sử dụng ảnh bìa cũ hoặc ảnh mới với tùy chọn cắt thu phóng và chọn phần ảnh bạn muốn sử dụng và sau khi gửi trực tiếp, nó sẽ tạo ra một bài đăng cho biết người dùng đã cập nhật ảnh bìa của mình.
- ✓ Bạn có thể cập nhật ảnh hồ sơ của mình bằng ảnh bìa cũ hoặc ảnh mới với tùy chọn cắt thu phóng và chọn phần ảnh bạn muốn sử dụng và sau khi gửi trực tiếp, nó sẽ tạo ra một bài đăng cho biết người dùng đã cập nhật ảnh hồ sơ của mình và bạn cũng có thể sử dụng văn bản và biểu tượng cảm xúc.
- ✓ Mỗi người dùng đều có hồ sơ riêng của mình, nơi hiển thị tất cả thông tin chi tiết từ bìa, ảnh hồ sơ, thông tin chi tiết (tên khác, tiểu sử, công việc, nơi làm việc, mối quan hệ ...), ảnh, bạn bè, bài đăng.
- ✓ Bạn có thể cập nhật tất cả thông tin chi tiết của mình và xem các thay đổi trực tiếp.
- ✓ Chúng tôi sẽ sử dụng Cloudinary để tải lên hình ảnh của chúng tôi theo một cách sáng tạo mới, bạn sẽ rất ấn tượng.
- ✓ Chúng tôi có hệ thống kết bạn đầy đủ khi bạn có thể thêm bạn, hủy yêu cầu, chấp nhận yêu cầu, xóa yêu cầu, hủy kết bạn, theo dõi, hủy theo dõi.
- ✓ Ngoài ra, chúng tôi có trang bạn bè nơi bạn có thể kết bạn với tất cả các yêu cầu và bạn bè của mình.
- ✓ Chúng tôi có chức năng tìm kiếm trực tiếp khi bạn nhập kết quả mới xuất hiện, bất kỳ người dùng nào bạn nhấp vào cũng sẽ được thêm vào lịch sử tìm kiếm của bạn và nó cũng sẽ được hiển thị theo thứ tự cho người được nhấp vào gần nhất.
- ✓ Chúng tôi sẽ sử dụng skeleton loaders khi tải trang hoặc trong khi chúng tôi lấy dữ liệu từ backend và cũng sử dụng tất cả các loại loader khác nhau trên ứng dụng của chúng tôi.
- ✓ Chúng tôi sẽ có protected routes.
- ✓ Chúng tôi sẽ sử dụng react redux store để thiết lập một global store để chia sẻ dữ liệu trên tất cả các component.
- ✓ Chúng tôi sẽ sử dụng react router dom v6 được giải thích chi tiết.
- ✓ Chúng tôi sẽ làm việc với cookies và JSON web tokens để lưu trữ dữ liệu tạm thời.
- ✓ Chúng tôi sẽ sử dụng nhiều react js function như useState, useEffect, useReducer, useRef, useCallback, event listeners và cũng có thể tạo custom hooks.
Khóa học này dành cho ai:
- ✓ Beginner Web Developer.
- ✓ Junior Web Developer.
- ✓ React js Developer.
- ✓ Node js Developer.
- ✓ Web Seveloper.
Mục lục:
- ✓ 01. Welcome.
- ✓ 02. Setup Project.
- ✓ 03. Authentification và gửi email (Backend).
- ✓ 04. Authentification Frontend.
- ✓ 05. Header.
- ✓ 06. Home.
- ✓ 07. Forgot, Reset Password, Activate Account, Logout.
- ✓ 08. Tạo Post, Cloudinary, emojis..vv.
- ✓ 09. Post component.
- ✓ 10. Profile.
- ✓ 11. Yêu cầu kết bạn, gửi, hủy, xóa, chấp nhận, theo dõi, hủy theo dõi.
- ✓ 12. Phản ứng.
- ✓ 13. Bình luận.
- ✓ 14. Đăng bài.
- ✓ 15. Tìm kiếm trực tiếp, lịch sử tìm kiếm v.v.
- ✓ 16. Trang Yêu cầu Bạn bè.
- ✓ 17. Dark Mode.
- ✓ 18. Hiệu ứng Skeleton loader (rất hay).
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU
CUNG CẤP TÀI KHOẢN ONEDRIVE 5TB VÀ OFFICE 365 GIÁ RẺ, XEM CHI TIẾT TẠI ĐÂY
Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Tuyên bố miễn trừ bản quyền:
Trang web này không lưu trữ bất kỳ tệp nào trên máy chủ của nó. Chúng tôi chỉ lập chỉ mục và liên kết đến nội dung được cung cấp bởi các trang web khác. Vui lòng liên hệ với các nhà cung cấp nội dung để xóa nội dung bản quyền nếu có.
