[Hoàn thiện Full-stack] Clone 3 trang web với Supabase (Next.js 14)

Supabase sẽ chắp cánh cho việc phát triển Full-stack của bạn! Thông qua 3 dự án clone, bạn sẽ được học cấp tốc cách phát triển Full-stack cấp độ thực tế với Next.js 14 và Supabase.

(4.9) 56 đánh giá

875 học viên

Độ khó Cơ bản

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

Next.js
Next.js
supabase
supabase
TailwindCSS
TailwindCSS
react-query
react-query
Firebase
Firebase
Next.js
Next.js
supabase
supabase
TailwindCSS
TailwindCSS
react-query
react-query
Firebase
Firebase

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

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

4.9

5.0

official

63% đã tham gia

Đối với những ai đang thắc mắc có nên tham gia khóa học này hay không, tôi muốn giải thích những lợi ích mà tôi cảm nhận được khi tham gia khóa học này. Chúng tôi cũng đã biên soạn một danh sách những người có thể thấy hữu ích khi lắng nghe. công lao 1. Bạn có thể nhanh chóng làm quen với việc sử dụng công nghệ mới nhất và Supabase với ba phương pháp mã hóa nhân bản. 2. Bạn có thể trực tiếp trải nghiệm và triển khai các công nghệ mới nhất của NextJS, chẳng hạn như Server Actions. 3. Bạn có thể tập trung vào việc tìm hiểu các chức năng cốt lõi cần thiết khi thực hiện các dự án thực tế, chẳng hạn như cuộn vô hạn. 4. Bạn có thể cải thiện trải nghiệm phát triển của mình bằng cách học cách triển khai cả phiên bản Vercel và AWS. Tôi nghĩ những lợi thế có thể được giải thích theo bốn cách: Tôi đã biên soạn một danh sách những người có thể được hưởng lợi từ việc tham gia bài giảng này. 1. Những người có kiến ​​thức nền tảng cơ bản về quản lý trạng thái toàn cầu và API máy chủ và muốn trở nên thành thạo thông qua việc học tập nhiều lần 2. Những người muốn hoàn thành một dự án bằng cách tích hợp phần phụ trợ và giao diện người dùng 3. Những người muốn trực tiếp trải nghiệm toàn bộ quá trình từ tạo dự án đến phân phối 4. Những người muốn làm quen với việc triển khai mã và hàm thông qua việc học lặp đi lặp lại Mặc dù có một bài giảng ở phần đầu cung cấp lời giải thích chung về nhóm công nghệ được đề cập trong bài giảng, chẳng hạn như React Query, Recoil và NextJS, nhưng nó có thể khó hiểu nếu bạn không có kiến ​​thức cơ bản. Vì bài giảng tập trung vào cách sử dụng hơn là giải thích cơ bản về công nghệ hay thư viện nên nếu bạn chưa có kiến ​​thức nền tảng, chúng tôi khuyên bạn nên tìm hiểu những kiến ​​thức cơ bản trước rồi mới học bài giảng này. Vì tiến độ nhanh hơn các khóa học khác và số lượng dự án phải hoàn thành lớn, bạn sẽ có thể cảm nhận được kỹ năng của mình được cải thiện bằng cách thực hiện nhiều lần các chức năng trong một khoảng thời gian ngắn. Tôi giới thiệu nó cho bất cứ ai đang cân nhắc tham gia một khóa học để thành thạo.

5.0

Jane

66% đã tham gia

Tôi muốn sử dụng Supabase nhưng gặp khó khăn khi sử dụng nó với Next.js do thiếu tài liệu nên tôi đã tham gia khóa học này. Tôi thích thực tế là sau khi tìm hiểu những điều cơ bản về Supabase thông qua một dự án đơn giản như ToDoList, tôi có thể trực tiếp triển khai các chức năng chính như Lưu trữ và Xác thực. Nội dung bài giảng được tổ chức tốt trên Notion nên không khó để theo dõi bài giảng, phần giải thích được giải thích từng bước nên mình đã được nghe khá nhiều bài giảng khi làm việc tại công ty.☺️ Cảm ơn bạn đã tạo ra những bài giảng hay như vậy. Nó rất hữu ích

5.0

조현석

100% đã tham gia

Tôi bắt đầu học khóa này vì muốn tạo ra một ứng dụng web riêng của mình trong quá trình phát triển frontend. Khi tôi tự thử tích hợp Next.js và Supabase thì thấy rất khó khăn, nhưng thông qua khóa học này tôi đã có thể học được rất nhiều điều. Cảm ơn anh đã tạo ra một khóa học tuyệt vời! Nhờ đó tôi sẽ có thêm 3 portfolio nữa 😊😊 Thêm vào đó, hiện tại Next.js đã lên phiên bản 15 nhưng trong khóa học sử dụng phiên bản 14 nên sự khác biệt về cú pháp nhiều hơn tôi nghĩ. Nếu anh có thể thêm tài liệu bổ sung về sự khác biệt giữa các phiên bản vào khóa học, hoặc hướng dẫn sử dụng lệnh npx create-next-app@14 ... thì việc học sẽ thuận tiện hơn.

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

  • Cách phát triển full-stack không cần máy chủ với Supabase (Xác thực người dùng, Tải lên tệp, Trò chuyện thời gian thực)

  • Next.js phiên bản 14 (feat. App Router, Server Action)

  • Triển khai đăng nhập Kakao OAuth

  • Các thư viện Tailwind CSS, React Query, Recoil

  • Cách triển khai dự án thông qua Vercel và AWS

  • Thực hiện tính năng cuộn vô hạn và kéo thả

  • Mua và kết nối tên miền

Thông qua khóa học này, các bạn sẽ


phiên bản NextJS 14

sự kết hợp giữa dịch vụ backend mạnh mẽ Supabase


tiến hành 3 dự án clone

Bạn sẽ nhanh chóng phát triển thành một nhà phát triển Full-stack cấp độ thực chiến!

Chắp thêm đôi cánh cho việc phát triển Full-stack,
đối thủ nặng ký của Firebase,

🚀 Supabase 🚀

Dễ dàng triển khai các yêu cầu phức tạp dựa trên PostgreSQL

Với tính năng cơ sở dữ liệu thời gian thực, việc phát triển chat trực tuyến không còn là điều đáng sợ nữa

Dễ dàng triển khai tính năng đăng nhập mạng xã hội (Kakao, Google, v.v.)

Dễ dàng tích hợp theo cách thuận tiện nhất cho bạn như SDK, GraphQL, API

Trang quản trịtính năng AI tự động tạo SQL đều hoàn toàn miễn phí

Tất cả những người tham gia khóa học này

Tự mình triển khai đến tổng cộng 4 trang web

hoàn thành tất cả 🚀

🔗 Hãy thử nhấp vào các liên kết trong mỗi dự án (văn bản màu xanh).

[Dự án 1] Danh sách việc cần làm (Dự án thực hành)

  • Triển khai CRUD với Supabase Database

  • Tạo danh sách việc cần làm, thực hiện xóa, tìm kiếm và hoàn tất, deleting, searching, and completing.

  • Dự án Full-stack NextJS đầu tiên

[Dự án 2] Dropbox Clone (Tải lên tệp tin)

  • Xử lý các tính năng tệp với Supabase Storage

  • Tải lên tệp, xóa và triển khai tìm kiếm

  • Kéo và thả thực hiện chức năng

[Dự án 3] Netflix Clone

  • Xử lý các câu lệnh SQL phức tạp bằng Supabase SDK

  • Màn hình danh sách phim, chức năng tìm kiếm, triển khai trang chi tiết

  • Cuộn vô hạn (intersection-observer)

[Dự án 4] Instagram Clone (Đăng ký, Trò chuyện)

  • Dễ dàng xây dựng tính năng thành viên với Supabase Auth

  • Xử lý các tính năng thời gian thực với Supabase Realtime

  • Thực hiện đăng ký và đăng nhập theo 2 cách khác nhau

  • Trò chuyện thời gian thực, trạng thái truy cập thời gian thực được triển khai

  • + Bài giảng hướng dẫn triển khai chức năng đăng nhập Kakao đã được thêm vào!

Rất đề xuất cho những đối tượng sau đây

Supabase thông qua
phát triển full-stack mà không cần xây dựng máy chủ
những nhà phát triển muốn làm điều đó

Nhiều dự án clone đa dạng
giúp các nhà phát triển muốn củng cố kỹ năng lập trình vững chắc

Công nghệ mới nhất và sử dụng nó để
trở thành nhà phát triển muốnphát triển full-stack hiện đại

Sự kết hợp mạnh mẽ giữa Next.js 14 và Supabase 🚀

Chúng tôi sẽ giúp bạn trở thành lập trình viên full-stack một cách nhanh nhất!

Thông qua 3 dự án clone, chúng tôi sẽ giúp bạn nâng cao kỹ năng một cách nhanh chóng 👩🏻‍🎓

Chỉ dành cho những người đã tham gia khóa học này

4 lợi ích mà bạn có thể nhận được!

Thứ nhất,

Học tất cả 4 tính năng cốt lõi của Supabase!

(✅ Học tất cả từ truy vấn DB, xác thực người dùng, tải lên tệp tin cho đến triển khai tính năng thời gian thực)

Các tính năng mạnh mẽ của Supabase

vừa áp dụng vào từng dự án đa dạng vừa học tập,

4 tính năng cốt lõi mà bạn có thể học một cách bài bản 😉 😉

Thứ hai,

Chúng ta hãy cùng nhau tạo ra tổng cộng 3 loại dự án clone nhé!

(✅ Bạn có thể nhanh chóng nâng cao năng lực thực tế)

Thông qua tổng cộng 3 dự án clone,

Thực hiện các chức năng như tải lên tệp, xác thực người dùng, trò chuyện thời gian thực, tìm kiếm, cuộn vô hạn và nhiều tính năng khác,

"Stack công nghệ có thể áp dụng ngay vào thực tế" được trang bị đầy đủ

bạn sẽ trở thành một nhà phát triển Full-stack thực thụ!

(+ Bài giảng về đăng nhập Kakao OAuth đã được thêm vào 😉)

Thứ ba,

Bạn có thể học được stack công nghệ mới nhất được sử dụng nhiều trong thực tế!

(✅ Cung cấp các bài giảng lý thuyết và thực hành cho từng công nghệ)

Không chỉ đơn thuần tập trung vào "công nghệ mới nhất",

Phát triển Full-stack hiệu quả nên tôi đã lựa chọn những công nghệ có thể giúp bạn thực hiện điều đó 🙂


Các công nghệ mới nhất mà không cần phải học riêng biệt separately,

Theo đúng cách thức được sử dụng trong thực tế

Bạn có thể học được tất cả trong khóa học lần này!

Thứ tư,

Học hai phương thức triển khai và kết nối cả tên miền nữa!

(✅ Bạn có thể tạo một danh mục hồ sơ (portfolio) tuyệt vời với tên miền của riêng mình)

Từ phương pháp triển khai bằng AWS EC2Vercel cho đến

cách mua và liên kết tên miền của riêng bạn

Bạn sẽ được học tất cả mọi thứ ☺


(+ Bạn có thể hoàn thiện một bản hồ sơ năng lực chuyên nghiệp hơn nữa!)

Lưu ý trước khi khóa học bắt đầu

Tài liệu học tập

Kiến thức tiên quyết và lưu ý

  • Nếu bạn đã từng sử dụng Next.js hoặc React.js, bạn hoàn toàn có thể theo kịp bài giảng này! ☺, you will be able to follow the course easily! ☺

  • Cần có kiến thức CSS cơ bản. (Ví dụ: flex là gì)

Khóa học liên tục được cập nhật ngay cả sau khi mua

  • Nếu có phần nào khó hiểu, ngoài mục Q&A, các bài giảng giải thích bổ sung cũng sẽ được cập nhật thêm.

  • Nếu Supabase có thêm các tính năng mới, bài giảng sẽ được cập nhật., the course will be updated.

#Next.js, #supabase, #tailwind-css, #react-query슈파베이스, #recoiljs, #firebase, #Supabase RLS, #Row level Security

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

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

  • Nhà phát triển Front-end muốn chinh phục phát triển Full-stack đến cùng

  • Cá nhân / nhóm phát triển quy mô nhỏ muốn giảm thiểu tối đa độ khó trong việc phát triển và vận hành

  • Những người đang tìm kiếm dịch vụ backend tối ưu cho dự án phụ (side project)

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

  • Hiểu biết cơ bản về Next.js hoặc React.js

  • Kiến thức CSS cơ bản

Xin chào
Đây là lopun

3,774

Học viên

229

Đánh giá

64

Trả lời

4.9

Xếp hạng

8

Các khóa học

🚀 “Tôi sẽ tiết lộ toàn bộ quá trình tạo ra một dịch vụ thực tế bằng các công nghệ hot nhất hiện nay.”

Thay vì lý thuyết suông, tôi cung cấp các bài giảng thực hành tập trung vào dự án, mang đến những nội dung có thể áp dụng ngay vào công việc thực tế.

  • (Hiện tại) Đang làm việc tại Na-Ka-Ra-Ku-Bae

  • (Hiện tại) 7 năm kinh nghiệm phát triển Full-stack

  • (Giảng dạy) Giảng viên tại Sparta Coding Club

  • (Giáo dục) Tốt nghiệp Khoa Khoa học Máy tính, Viện Khoa học và Công nghệ Tiên tiến Hàn Quốc (KAIST)

Thêm

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

Tất cả

40 bài giảng ∙ (10giờ 55phú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ả

56 đánh giá

4.9

56 đánh giá

  • joy40176271님의 프로필 이미지
    joy40176271

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi bắt đầu học khóa này vì muốn tạo ra một ứng dụng web riêng của mình trong quá trình phát triển frontend. Khi tôi tự thử tích hợp Next.js và Supabase thì thấy rất khó khăn, nhưng thông qua khóa học này tôi đã có thể học được rất nhiều điều. Cảm ơn anh đã tạo ra một khóa học tuyệt vời! Nhờ đó tôi sẽ có thêm 3 portfolio nữa 😊😊 Thêm vào đó, hiện tại Next.js đã lên phiên bản 15 nhưng trong khóa học sử dụng phiên bản 14 nên sự khác biệt về cú pháp nhiều hơn tôi nghĩ. Nếu anh có thể thêm tài liệu bổ sung về sự khác biệt giữa các phiên bản vào khóa học, hoặc hướng dẫn sử dụng lệnh npx create-next-app@14 ... thì việc học sẽ thuận tiện hơn.

    • swerty142487님의 프로필 이미지
      swerty142487

      Đánh giá 1

      Đánh giá trung bình 4.0

      4

      30% đã tham gia

      Thêm phần lý thuyết về công nghệ có lẽ sẽ tốt hơn.

      • hamjw01224657님의 프로필 이미지
        hamjw01224657

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        66% đã tham gia

        Tôi muốn sử dụng Supabase nhưng gặp khó khăn khi sử dụng nó với Next.js do thiếu tài liệu nên tôi đã tham gia khóa học này. Tôi thích thực tế là sau khi tìm hiểu những điều cơ bản về Supabase thông qua một dự án đơn giản như ToDoList, tôi có thể trực tiếp triển khai các chức năng chính như Lưu trữ và Xác thực. Nội dung bài giảng được tổ chức tốt trên Notion nên không khó để theo dõi bài giảng, phần giải thích được giải thích từng bước nên mình đã được nghe khá nhiều bài giảng khi làm việc tại công ty.☺️ Cảm ơn bạn đã tạo ra những bài giảng hay như vậy. Nó rất hữu ích

        • lopun
          Giảng viên

          Xin chào Jane! Thật tuyệt khi bạn có thể tham gia khóa học nhanh như vậy khi đang làm việc tại công ty. 🫢 Tôi ​​giải thích mọi thứ một cách chậm rãi để học viên có thể hiểu được. Nếu thấy hơi chậm, bạn có thể sử dụng chức năng tốc độ gấp đôi. Cảm ơn bạn rất nhiều vì đã để lại đánh giá có giá trị của bạn!

      • fined0006806님의 프로필 이미지
        fined0006806

        Đánh giá 46

        Đánh giá trung bình 4.7

        5

        100% đã tham gia

        Tôi đã học được rất nhiều điều nhờ việc bạn tạo ra những ví dụ hay với phiên bản mới nhất.

        • official님의 프로필 이미지
          official

          Đánh giá 1

          Đánh giá trung bình 5.0

          5

          63% đã tham gia

          Đối với những ai đang thắc mắc có nên tham gia khóa học này hay không, tôi muốn giải thích những lợi ích mà tôi cảm nhận được khi tham gia khóa học này. Chúng tôi cũng đã biên soạn một danh sách những người có thể thấy hữu ích khi lắng nghe. công lao 1. Bạn có thể nhanh chóng làm quen với việc sử dụng công nghệ mới nhất và Supabase với ba phương pháp mã hóa nhân bản. 2. Bạn có thể trực tiếp trải nghiệm và triển khai các công nghệ mới nhất của NextJS, chẳng hạn như Server Actions. 3. Bạn có thể tập trung vào việc tìm hiểu các chức năng cốt lõi cần thiết khi thực hiện các dự án thực tế, chẳng hạn như cuộn vô hạn. 4. Bạn có thể cải thiện trải nghiệm phát triển của mình bằng cách học cách triển khai cả phiên bản Vercel và AWS. Tôi nghĩ những lợi thế có thể được giải thích theo bốn cách: Tôi đã biên soạn một danh sách những người có thể được hưởng lợi từ việc tham gia bài giảng này. 1. Những người có kiến ​​thức nền tảng cơ bản về quản lý trạng thái toàn cầu và API máy chủ và muốn trở nên thành thạo thông qua việc học tập nhiều lần 2. Những người muốn hoàn thành một dự án bằng cách tích hợp phần phụ trợ và giao diện người dùng 3. Những người muốn trực tiếp trải nghiệm toàn bộ quá trình từ tạo dự án đến phân phối 4. Những người muốn làm quen với việc triển khai mã và hàm thông qua việc học lặp đi lặp lại Mặc dù có một bài giảng ở phần đầu cung cấp lời giải thích chung về nhóm công nghệ được đề cập trong bài giảng, chẳng hạn như React Query, Recoil và NextJS, nhưng nó có thể khó hiểu nếu bạn không có kiến ​​thức cơ bản. Vì bài giảng tập trung vào cách sử dụng hơn là giải thích cơ bản về công nghệ hay thư viện nên nếu bạn chưa có kiến ​​thức nền tảng, chúng tôi khuyên bạn nên tìm hiểu những kiến ​​thức cơ bản trước rồi mới học bài giảng này. Vì tiến độ nhanh hơn các khóa học khác và số lượng dự án phải hoàn thành lớn, bạn sẽ có thể cảm nhận được kỹ năng của mình được cải thiện bằng cách thực hiện nhiều lần các chức năng trong một khoảng thời gian ngắn. Tôi giới thiệu nó cho bất cứ ai đang cân nhắc tham gia một khóa học để thành thạo.

          • lopun
            Giảng viên

            Wow, cảm ơn bạn rất nhiều vì đã viết bài đánh giá khóa học chi tiết như vậy!! Tôi đã rất lo lắng về việc làm thế nào các sinh viên sẽ chấp nhận sự thật là có rất nhiều dự án, nhưng tôi rất cảm động khi họ nói rằng nó rất hữu ích haha. Nhân tiện, bạn gần như đã hoàn thành xong bài giảng rồi 🫢 Chúc may mắn với những bài giảng còn lại, người mới bắt đầu! Nếu ở hiệp 2 có nội dung nào khó chúng tôi sẽ tích cực hỗ trợ :)

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

        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!

        2.089.025 ₫