강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Dự án thực tế cắt nhỏ vừa miếng ăn - Phần SNS

Bây giờ là lúc để thử thách với thực tế 🔥 Chúng ta sẽ cùng nhau phát triển một mạng xã hội cấp độ thực tế bằng React.js + TypeScript + Supabase, đồng thời xây dựng các tính năng như xác thực & phân quyền, cuộn vô hạn, tải lên hình ảnh, lượt thích, bình luận lồng nhau vô hạn và chế độ tối. Trong quá trình này, chúng ta cũng sẽ tìm hiểu các kỹ thuật quản lý trạng thái server và trạng thái toàn cục bằng Zustand và Tanstack Query.

(5.0) 88 đánh giá

1,320 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.

  • Chúng ta sẽ cùng nhau xây dựng một dự án SNS cấp độ thực tế bằng cách sử dụng React.js + TypeScript + Supabase.

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

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


> Đăng ký nhận thông báo tuyển sinh One Bite Challenge khóa 8https://link.onebitefe.com/r/e3mm1n

로드맵-강의상세

Nhấp vào hình ảnh để chuyển đến lộ trình học tập.
> Link lộ trình: https://link.onebitefe.com/r/3fr3f6

Link các khóa học trong series
> React vừa miếng :https://inf.run/v3XAj
TypeScript vừa miếng : https://inf.run/FpLm4
Next.js vừa miếng : https://inf.run/v3XAj

Thông qua React.js + TypeScript

Chúng ta sẽ cùng nhau tạo ra một dịch vụ SNS cấp độ thực tế.

Nếu bạn chỉ đang lặp đi lặp lại các bài hướng dẫn, thì 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 để

Chúng ta sẽ cùng nhau xây dựng từ đầu đến cuối một dịch vụ SNS cấp độ thực tế, đạt tiêu chuẩn để cung cấp cho người dùng thật.

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

> Email tài khoản thử nghiệm: test@onebitefe.com

> Mật khẩu tài khoản thử nghiệm : 123456


Không chỉ đơn thuần là triển khai UI,

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 bạn trực tiếp xây dựng.

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

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. của

Bạn sẽ được trực tiếp thiết kế và triển khai các tính năng cốt lõi đang đượ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 lại mật khẩu

  • Quản lý phiên làm việc

  • Phân quyền bằng RLS

⚙️ Cuộn vô hạn cho bảng tin

  • Quản lý cuộn vô hạn cho feed bằng cách sử dụ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 sử dụng Supabase Storage

  • Thực hiện chức năng tải lên 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 bộ nhớ đệm (cache)


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

  • Thực hiện 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 các chủ đề Hệ thống, Tối và Sáng

  • Triển khai tính năng duy trì chủ đề (theme) và ngăn chặn hiện tượng nhấp nháy bằng cách sử dụng Persist




Giới thiệu các công cụ giúp ứng dụng React mạnh mẽ hơn

TailwindCSS + Zustand + Tanstack Query

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

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 hướng dẫn dưới đây và

Chúng tôi dự định sẽ tích cực áp dụng chúng vào các dự án thực tế.


Tailwind CSS


  • Công cụ giúp việc tạo kiểu CSS trở nên thuận tiện hơn

  • Không cần tệp CSS riêng biệt để tạo kiểu dáng (styling)

  • https://tailwindcss.com/


Shadcn/ui


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

  • Cung cấp các thành phần 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ỏ và nhẹ

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

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

Tanstack Query


  • Thư viện quản lý trạng thái server

  • Hỗ trợ xử lý trạng thái loading và lỗi khi fetch dữ liệu bất đồng bộ


  • https://tanstack.com/query/latest


Đây không phải là khóa học clone coding chỉ biết gõ theo mẫu.

Bao gồm đầy đủ các giải thích về khái niệm, từ bối cảnh đến cấu trúc của các tính năng.

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

Tại sao lại hiện thực như vậy, và cấu trúc được hình thành theo luồng nào.

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

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

Khóa học này được thực hiện dành cho những người đã có nền tảng 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, tôi khuyên bạn nên tham gia các khóa học tiên quyết dưới đây trước.

5 nguyên tắc của series Một Miếng (Hanyip)

⚖ Nguyên tắc 1. Tài liệu hình ảnh trực quan và phong phú

Giống như việc cùng một món ăn nhưng nếu trông đẹp mắt thì sẽ cảm thấy ngon miệng hơn,
tôi tin rằng cùng một lời giải thích khái niệm nhưng nếu có tài liệu hình ảnh trực quan và hấp dẫn hơn thì sẽ dễ hiểu 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 sinh động, bao gồm cả các hiệu ứng hoạt họa.

⚖ Nguyên tắc 2. Sự tận tâm

Tôi không giải thích qua loa hay vội vàng kết luận rằng các bạn đã biết khi có thuật ngữ hoặc khái niệm mới xuất hiện. Tôi đã nỗ lực hết sức để các bạn không phải mất công tìm kiếm thêm trên Google trong quá trình nghe giảng.

⚖ 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 xây dựng bài giảng với sự chú trọng vào tính logic, đảm bảo rằng khi có nội dung mới xuất hiện, chúng luôn có sự liên kết với nội dung trước đó và không làm người học cảm thấy mạch truyện bị ngắt quãng đột ngột.

⚖ Nguyên tắc 4. Phát âm và giọng đọc tốt

Vì bạn sẽ phải nghe giọng của tôi trong một thời gian dài, tôi luôn nỗ lực để có được phát âm và giọng nói tốt.
Vì lý do này, tôi đã sản xuất bài giảng sao cho bạn vẫn có thể hiểu được mọi thứ ngay cả khi phát ở tốc độ gấp đôi.

Hãy nghe thử xem! Link phát tốc độ 2x

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

Tập hợp tại cộng đồng dành riêng cho học viên để cùng nhau chia sẻ kiến thức, tin tức và trưởng thành.

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


Lee Jung-hwan | Winterlood

Nhà phát triển Frontend & Nhà giáo dục, người luôn tin rằng
mọi thứ đều có cách giải thích dễ hiểu và thú vị

  • 📚 Sách

     


  • 📹 Bài giảng

    • Next.js vừa tầm một miếng ăn

    • TypeScript vừa miếng (Học TypeScript từng miếng nhỏ)

    • React vừa tầm mắt (Học React từng miếng nhỏ)


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

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

  • Chào các bạn học viên của series "Một ngụm" (Những người đã hoàn thành khóa học React.js + TypeScript)

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

  • Những ai muốn thoát khỏi cấp độ hướng dẫn (tutorial) và muốn thử sức với các dự án thực tế.

  • Những người đang tìm kiếm khóa học có giải đáp thắc mắc diễn ra hàng ngày ít nhất một lần từ thứ Hai đến thứ Sáu.

  • Những người đang tìm kiếm các khóa học có cộng đồng học viên hoạt động sôi nổi do chính người chia sẻ kiến thức trực tiếp vận hành.

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

  • Cơ bản về React.js (Trình độ dành cho người học khóa học One Bite React)

  • TypeScript cơ bản (Trình độ dành cho người học khóa học TypeScript một ngụm)

Xin chào
Đây là

37,213

Học viên

2,605

Đá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 3 ngày ngày

            5.256 ₫

            23%

            1.146.211 ₫

            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!