강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Dự án thực chiến ăn từng miếng vừa đủ - Phần SNS

Bây giờ là lúc thử thách với thực chiến 🔥 Cùng phát triển một SNS cấp độ thực tế với React.js + TypeScript + Supabase, và tạo ra các tính năng như xác thực & phân quyền, infinite scroll, upload ảnh, like, bình luận lồng nhau vô hạn, dark mode, v.v. Trong quá trình này, chúng ta cũng sẽ tìm hiểu về kỹ thuật quản lý trạng thái server và global state sử dụng Zustand và Tanstack Query.

(5.0) 88 đánh giá

1,316 học viên

Độ khó Trung cấp trở lên

Thời gian Không giới hạn

  • winterlood
  • hyobin
supabase
supabase
zustand
zustand
react-query
react-query
React
React
TypeScript
TypeScript
supabase
supabase
zustand
zustand
react-query
react-query
React
React
TypeScript
TypeScript

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

5.0

5.0

민경언

31% đã tham gia

Tôi đã nghe khá nhiều khóa học trả phí trên Inflearn.. nhưng về mọi mặt thì khóa học của anh Lee Jung-hwan là tốt nhất. Vì vậy tôi đã nghe hết tất cả các khóa học của anh Lee Jung-hwan. Khóa học React SNS lần này cũng rất tốt.. Khóa học của anh Lee Jung-hwan thì... 1. Có thể cảm nhận được sự chuẩn bị kỹ lưỡng cho khóa học khi nghe. => Khi xem video của các gi강사 khác thì hầu hết đều không chuẩn bị script gì cả. Có vẻ như phần lớn chỉ chuẩn bị nội dung ở mức tiêu đề. Vì thế khi xem video thì thấy nói lắp bắp, nói lại những gì đã nói.. Ví dụ ra kết quả khác với dự kiến.. có trường hợp tôi không nghe tiếp vì âm thanh nuốt nước bọt quá nhiều khiến khó chịu. Nhưng khóa học của anh Lee Jung-hwan thì có thể cảm nhận được việc chuẩn bị script kỹ lưỡng trước khi quay. Vì thế không có lời lẽ dài dòng, tiến trình mượt mà. Rất hài lòng và thực sự cảm thấy đáng để bỏ tiền ra nghe. 2. Chuẩn bị môi trường quay tốt. => Khác với video của các giảng viên khác, âm thanh đồng đều từ đầu đến cuối. Khi xem khóa học của anh Lee Jung-hwan thì thấy quay gần như không di chuyển. Có vẻ như vì nếu di chuyển thì âm thanh sẽ không được ghi âm với độ cao thấp đều đặn. 3. Chất lượng nội dung khóa học tốt. => Khi xem video của các giảng viên khác thì phần lớn chỉ đánh máy trên PPT rồi cho xem. Không có cảm giác tâm huyết lắm. Ở vị trí người xem trả phí thì có cảm giác hơi phí tiền. Khóa học của anh Lee Jung-hwan không có màn hình hiển thị bằng PPT. Tất cả đều giải thích bằng màn hình được animation hóa. Vì thế có thể hiểu nhanh hơn. Nhưng khi xem khóa học của anh Lee Jung-hwan thì.. có vấn đề. Khi xem preview video trả phí của các giảng viên khác thì chất lượng không vừa ý nên ngại mua... Các giảng viên khác cần xem và học hỏi từ khóa học của anh Lee Jung-hwan. Phía Inflearn cũng nên học hỏi từ khóa học của anh Lee Jung-hwan, lấy đó làm tiêu chuẩn và yêu cầu các giảng viên muốn vận hành khóa học trả phí phải tuân theo. Đã bỏ tiền ra xem thì việc cung cấp dịch vụ với chất lượng tốt hơn là điều đương nhiên phải không? Vì vậy.. tôi chỉ gọi khóa học của anh Lee Jung-hwan là khóa học. Video của các giảng viên khác thì tôi chỉ gọi là video.. chưa đủ để gọi là khóa học.

5.0

kaeuhy

10% đã tham gia

Nhìn vào chương trình giảng dạy, tôi nghĩ rằng nó thực sự rất đầy đủ và chất lượng. Không tồn tại khóa học nào hoàn hảo hơn thế này cho frontend. Frontend = 이정환

5.0

챙준

100% đã tham gia

Tôi đã nhận được cảm hứng tuyệt vời từ Live Session mà tôi đã tham dự trước khi bắt đầu khóa học, và tôi cảm thấy mình có thể nắm bắt được cảm giác tốt hơn khi làm theo dự án. Tôi đã có thể suy nghĩ sâu hơn về tính hữu ích của việc quản lý trạng thái server bằng Tanstack Query, và theo tôi nghĩ, tôi đã có thể học một cách rộng rãi từ TypeScript, React - những framework chính của tôi - đến Zustand và Supabase. Bất cứ ai có băn khoăn về side project, khi tiếp xúc với khóa học này sẽ có một khởi đầu thực sự tuyệt vời. Tôi thực sự khuyến khích mạnh mẽ!

Bạn sẽ nhận được điều này sau khi học.

  • Tạo dự án SNS cấp độ thực tế sử dụng React.js + TypeScript + Supabase.

  • Tạo các tính năng như xác thực & phân quyền, cuộn vô hạn, tải ảnh lên, thích bài, bình luận lồng nhau vô hạn, chế độ tối, v.v.

  • Tìm hiểu kỹ thuật quản lý trạng thái server và global state sử dụng Zustand và Tanstack Query.

로드맵-강의상세

Bạn có thể di chuyển đến lộ trình bằng cách nhấp vào hình ảnh.
> Link lộ trình :https://link.onebitefe.com/r/3fr3f6

Link khóa học chuỗi
> Học React từng miếng nhỏ :https://inf.run/v3XAj
>
Học TypeScript từng miếng nhỏ : https://inf.run/FpLm4
>
Học Next từng miếng nhỏ : https://inf.run/v3XAj

React.js + TypeScriptthông qua

Xây dựng dịch vụ mạng xã hội cấp độ thực tế.

Nếu bạn chỉ lặp đi lặp lại các hướng dẫn, giờ là lúc thử thách bản thân với một dự án thực tế.

Trong khóa học này, chúng ta sẽ sử dụng React.js + TypeScript + Supabase để

Xây dựng từ đầu đến cuối một dịch vụ SNS cấp độ thực tế có thể cung cấp cho người dùng thực sự.

Trang web demo: https://demo-onebite-log.vercel.app/

> Email tài khoản test: test@onebitefe.com

> Mật khẩu tài khoản test : 123456


Không chỉ là triển khai UI đơn giản,

Các tính năng cốt lõi cấu thành nên một dịch vụ thực tế sẽ được tự tay xây dựng.

Khóa học này không phải là một khóa học hướng dẫn chỉ dạy cách triển khai UI đơn giản hay CRUD.

Xác thực/phân quyền, tải lên hình ảnh, cuộn vô hạn, thích, bình luận lồng nhau vô hạn, chế độ tối, v.v.

Chúng ta sẽ trực tiếp thiết kế và triển khai các tính năng cốt lõi được sử dụng trong các dịch vụ thực tế ngày nay.


⚙️ Xác thực & Phân quyền người dùng

  • Đăng ký/Đăng nhập bằng email

  • Đăng nhập mạng xã hội (GitHub)

  • Tìm mật khẩu

  • Quản lý phiên

  • Phân quyền sử dụng RLS

⚙️ Cuộn vô hạn nguồn cấp dữ liệu

  • Quản lý cuộn vô hạn feed bằng useInfiniteQuery

  • Quản lý dữ liệu cache


⚙️ Đính kèm hình ảnh

  • Tải lên và quản lý hình ảnh bằng Supabase Storage

  • Triển khai tính năng tải lên ảnh bài viết và ảnh đại diện


⚙️ Thích

  • Giải quyết vấn đề đồng thời (RPC)

  • Phản ánh kết quả nhanh chóng thông qua thao tác cache


⚙️ Bình luận lồng nhau vô hạn

  • Triển khai tính năng bình luận lồng nhau vô hạn

  • Render component đệ quy


⚙️ Tính năng thay đổi giao diện

  • Cung cấp chủ đề hệ thống, tối và sáng

  • Triển khai tính năng duy trì theme và chống nhấp nháy bằng Persist




Giới thiệu các công cụ để xây dựng ứng dụng React mạnh mẽ hơn

TailwindCSS + Zustand + Tanstack Query

Để xử lý tốt các tính năng phức tạp, công cụ của chúng ta cũng cần được nâng cấp cùng.

Trong khóa học này, chúng ta sẽ lần lượt làm quen với các công cụ mạnh mẽ được giới thiệu dưới đây

Chúng ta sẽ tích cực áp dụng vào dự án thực tế.


Tailwind CSS


  • Công cụ hỗ trợ styling CSS thuận tiện hơn

  • Không cần file CSS riêng biệt cho việc styling

  • https://tailwindcss.com/


Shadcn/ui


  • Thư viện thiết kế dựa trên Tailwind CSS

  • Cung cấp các component chất lượng cao (ví dụ: Input, Button, Dialog, v.v.)

  • https://ui.shadcn.com/

Zustand


  • Thư viện quản lý trạng thái toàn cục nhỏ gọn và nhẹ

  • Thế lực mới nổi đang thay thế Redux truyền thống

  • https://zustand-demo.pmnd.rs/

Tanstack Query



Đây không phải là clone coding chỉ gõ theo.

Giải thích hoàn hảo cả bối cảnh và cấu trúc của tính năng, kèm theo khái niệm chi tiết.

Khóa học này tuyệt đối không phải là khóa học chỉ đơn thuần gõ theo code rồi kết thúc.

Tại sao lại triển khai như vậy, được cấu thành theo luồng nào

Tôi đã đưa vào rất nhiều phần giải thích lý thuyết để bạn có thể tự hiểu và tiếp thu trực tiếp.

Hướng dẫn đối tượng học viên

Khóa học này được thiết kế dành cho những người đã có kiến thức cơ bản về React.js và TypeScript

Nếu bạn chưa quen thuộc với các công nghệ trên, chúng tôi khuyến nghị bạn nên học các khóa học tiên quyết dưới đây trước.

5 nguyên tắc của series Haníp

⚖ Nguyên tắc 1. Tài liệu trực quan phong phú và dễ hiểu

Giống như cùng một món ăn nhưng trông đẹp mắt sẽ cảm thấy ngon hơn,
tôi nghĩ rằng cùng một khái niệm được giải thích nhưng với tài liệu trực quan hấp dẫn và dễ hiểu hơn sẽ dễ tiếp thu hơn.

Vì vậy, tôi đã nỗ lực không ngừng để tạo ra các tài liệu trực quan bao gồm cả hoạt hình.

⚖ Nguyên tắc 2. Thân thiện

Khi xuất hiện thuật ngữ hoặc khái niệm mới, tôi không giải thích qua loa rồi bỏ qua, cũng không tự cho rằng các bạn đã biết trước. Tôi đã cố gắng hết sức để các bạn không phải tìm kiếm thêm trên Google trong khi học.

⚖ Nguyên tắc 3. Tính hợp lý

Để duy trì sự hứng thú của các học viên, tôi luôn suy nghĩ về tính mạch lạc khi tạo bài giảng, luôn cân nhắc xem khi nội dung mới xuất hiện trong bài giảng thì có liên quan đến nội dung trước đó hay không, liệu các bạn có cảm thấy dòng chảy bị gián đoạn đột ngột hay không.

⚖ Nguyên tắc 4. Phát âm và khẩu hình tốt

Vì bạn phải nghe giọng nói của tôi trong thời gian dài nên tôi luôn cố gắng để có phát âm và khẩu hình tốt.
Để làm được điều này, tôi đã sản xuất bài giảng sao cho bạn có thể nghe hiểu được ngay cả khi phát ở tốc độ 2x.

Hãy nghe thử! Link phát x2 tốc độ

⚖ Nguyên tắc 5. Giao tiếp

Học viên tập trung tại cộng đồng dành riêng để chia sẻ kiến thức, tin tức và cùng nhau phát triển.

Giới thiệu người chia sẻ kiến thức


Lee Jeong-hwan | Winterlood

Lập trình viên Frontend & Giáo viên tin rằng
luôn có cách giải thích mọi thứ một cách dễ dàng và thú vị

  • 📚 Sách

    Nhà phát triển Frontend & Giảng viên tin rằng có cách giải thích mọi thứ một cách thú vị 📚 Sách "Next.js cắt nhỏ từng miếng" đã xuất bản "React cắt nhỏ từng miếng" đã xuất bản


  • 📹 Khóa học

    • Next.js Cắn Từng Miếng Nhỏ

    • TypeScript cho người mới bắt đầu

    • React cắt nhỏ từng miếng vừa ăn


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Các bạn học viên của series Hanip (đã hoàn thành khóa React.js + TypeScript)

  • Những người đã có kiến thức về React.js và TypeScript

  • Những người muốn vượt qua mức độ hướng dẫn cơ bản và thử thách bản thân với các dự án thực tế

  • Những người đang tìm khóa học có trả lời câu hỏi ít nhất 1 lần mỗi ngày từ thứ Hai đến thứ Sáu

  • Những người đang tìm kiếm khóa học có cộng đồng học viên sôi nổi do chính gi강사 vận hành

Cần biết trước khi bắt đầu?

  • Kiến thức cơ bản về React.js (trình độ học viên đã hoàn thành khóa học Một Miếng React)

  • Kiến thức cơ bản về TypeScript (trình độ học viên đã hoàn thành khóa học TypeScript Cơ Bản)

Xin chào
Đây là

37,195

Học viên

2,604

Đánh giá

1,600

Trả lời

4.9

Xếp hạng

13

Các khóa học

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

Chương trình giảng dạy

Tất cả

88 bài giảng ∙ (22giờ 9phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

88 đánh giá

5.0

88 đánh giá

  • nataek2159님의 프로필 이미지
    nataek2159

    Đánh giá 15

    Đánh giá trung bình 3.3

    5

    31% đã tham gia

    Tôi đã nghe khá nhiều khóa học trả phí trên Inflearn.. nhưng về mọi mặt thì khóa học của anh Lee Jung-hwan là tốt nhất. Vì vậy tôi đã nghe hết tất cả các khóa học của anh Lee Jung-hwan. Khóa học React SNS lần này cũng rất tốt.. Khóa học của anh Lee Jung-hwan thì... 1. Có thể cảm nhận được sự chuẩn bị kỹ lưỡng cho khóa học khi nghe. => Khi xem video của các gi강사 khác thì hầu hết đều không chuẩn bị script gì cả. Có vẻ như phần lớn chỉ chuẩn bị nội dung ở mức tiêu đề. Vì thế khi xem video thì thấy nói lắp bắp, nói lại những gì đã nói.. Ví dụ ra kết quả khác với dự kiến.. có trường hợp tôi không nghe tiếp vì âm thanh nuốt nước bọt quá nhiều khiến khó chịu. Nhưng khóa học của anh Lee Jung-hwan thì có thể cảm nhận được việc chuẩn bị script kỹ lưỡng trước khi quay. Vì thế không có lời lẽ dài dòng, tiến trình mượt mà. Rất hài lòng và thực sự cảm thấy đáng để bỏ tiền ra nghe. 2. Chuẩn bị môi trường quay tốt. => Khác với video của các giảng viên khác, âm thanh đồng đều từ đầu đến cuối. Khi xem khóa học của anh Lee Jung-hwan thì thấy quay gần như không di chuyển. Có vẻ như vì nếu di chuyển thì âm thanh sẽ không được ghi âm với độ cao thấp đều đặn. 3. Chất lượng nội dung khóa học tốt. => Khi xem video của các giảng viên khác thì phần lớn chỉ đánh máy trên PPT rồi cho xem. Không có cảm giác tâm huyết lắm. Ở vị trí người xem trả phí thì có cảm giác hơi phí tiền. Khóa học của anh Lee Jung-hwan không có màn hình hiển thị bằng PPT. Tất cả đều giải thích bằng màn hình được animation hóa. Vì thế có thể hiểu nhanh hơn. Nhưng khi xem khóa học của anh Lee Jung-hwan thì.. có vấn đề. Khi xem preview video trả phí của các giảng viên khác thì chất lượng không vừa ý nên ngại mua... Các giảng viên khác cần xem và học hỏi từ khóa học của anh Lee Jung-hwan. Phía Inflearn cũng nên học hỏi từ khóa học của anh Lee Jung-hwan, lấy đó làm tiêu chuẩn và yêu cầu các giảng viên muốn vận hành khóa học trả phí phải tuân theo. Đã bỏ tiền ra xem thì việc cung cấp dịch vụ với chất lượng tốt hơn là điều đương nhiên phải không? Vì vậy.. tôi chỉ gọi khóa học của anh Lee Jung-hwan là khóa học. Video của các giảng viên khác thì tôi chỉ gọi là video.. chưa đủ để gọi là khóa học.

    • cjswodmsgus5064님의 프로필 이미지
      cjswodmsgus5064

      Đánh giá 2

      Đánh giá trung bình 5.0

      Đã chỉnh sửa

      5

      10% đã tham gia

      Nhìn vào chương trình giảng dạy, tôi nghĩ rằng nó thực sự rất đầy đủ và chất lượng. Không tồn tại khóa học nào hoàn hảo hơn thế này cho frontend. Frontend = 이정환

      • jjmullan님의 프로필 이미지
        jjmullan

        Đánh giá 9

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Tôi đã nhận được cảm hứng tuyệt vời từ Live Session mà tôi đã tham dự trước khi bắt đầu khóa học, và tôi cảm thấy mình có thể nắm bắt được cảm giác tốt hơn khi làm theo dự án. Tôi đã có thể suy nghĩ sâu hơn về tính hữu ích của việc quản lý trạng thái server bằng Tanstack Query, và theo tôi nghĩ, tôi đã có thể học một cách rộng rãi từ TypeScript, React - những framework chính của tôi - đến Zustand và Supabase. Bất cứ ai có băn khoăn về side project, khi tiếp xúc với khóa học này sẽ có một khởi đầu thực sự tuyệt vời. Tôi thực sự khuyến khích mạnh mẽ!

        • hyezzm1200님의 프로필 이미지
          hyezzm1200

          Đánh giá 10

          Đánh giá trung bình 5.0

          5

          67% đã tham gia

          Tôi từng nghĩ liệu mình có thể tạo ra những thứ như thế này không, nhưng khi từng bước một tạo ra chúng với những giải thích dễ hiểu và chi tiết, thật kỳ diệu khi thấy chúng dần được hiện thực hóa 😊😊 Tôi nghĩ nếu chỉ nghe đi nghe lại một khóa học này thôi cũng có thể hiểu đúng về luồng hoạt động và hệ sinh thái của frontend và backend rồi. Tôi đã xem hết các bài giảng trước đó, mong rằng sẽ có thêm nhiều bài giảng hay trong tương lai~

          • dudals010126님의 프로필 이미지
            dudals010126

            Đánh giá 4

            Đánh giá trung bình 5.0

            5

            56% đã tham gia

            Tôi chưa hoàn thành toàn bộ khóa học nhưng vẫn để lại đánh giá. Thay vì nghĩ "Tôi phải tạo portfolio thông qua khóa học này~", tôi nghĩ sẽ tốt hơn nếu các bạn học với suy nghĩ "Quy trình của dự án sử dụng supabase và react sẽ diễn ra như thế nào?" để xem toàn bộ luồng hoạt động. Chất lượng bài giảng cực kỳ tốt. Tôi đã học khóa supabase trước khóa này nhưng khác với khóa đó, khóa này giải thích chi tiết ở một tầm cao hoàn toàn khác. Tất nhiên, thay vì chỉ nghe khóa này và nghĩ "À supabase là thế này~", tốt hơn là sau khi nắm được khung khái niệm cơ bản thông qua khóa học này, các bạn nên học thêm qua tài liệu chính thức của supabase thì sẽ hiểu rõ hơn nhiều so với trước. Tất nhiên điều này có thể là nhờ anh 이정환 giải thích rất hay và sử dụng tài liệu trực quan để giải thích dễ hiểu hơn. Vì vậy tôi rất muốn các bạn nhất định phải học khóa này. Và khóa học về zustand và react query cũng được bao gồm trong khóa này mà cực kỳ tốt... Rất dễ hiểu. Tôi nghĩ khóa học này sẽ giúp ích rất nhiều khi tự học thêm sau này.

            Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày

            33 ₫

            23%

            1.144.532 ₫

            Khóa học khác của winterlood

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!