강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

[Hoàn thành Full-stack] nhân bản 3 website với Supabase (Next.js 14)

Supabase sẽ giúp phát triển full-stack bay cao! Qua 3 dự án clone, bạn sẽ học nhanh chóng cách phát triển full-stack ở cấp độ thực tế với Next.js 14 và Supabase.

(4.8) 53 đánh giá

859 học viên

  • lopun
실습 중심
클론코딩
Next.js
supabase
TailwindCSS
react-query
Firebase

Đánh giá từ những học viên đầu tiê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 server bằng Supabase (Xác thực người dùng, tải lên file, chat thời gian thực)

  • Next.js 14 (feat. App Router, Server Action)

  • Triển khai Kakao OAuth Login

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

  • Cách deploy dự án bằng Vercel và AWS

  • Triển khai cuộn vô hạn, kéo và thả

  • Mua và liên kết tên miền

Trong bài giảng này, bạn sẽ:


Phiên bản NextJS 14

Kết hợp với Supabase , một dịch vụ phụ trợ mạnh mẽ,


Chúng tôi đang thực hiện ba dự án nhân bản

Nhanh chóng trở thành một lập trình viên full-stack trình độ chuyên nghiệp!

Mở rộng khả năng phát triển toàn diện
Một đối thủ mạnh mẽ của Firebase ,

🚀 Siêu Đế 🚀

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

Phát triển trò chuyện thời gian thực không còn đáng sợ nữa nhờ các tính năng cơ sở dữ liệu thời gian thực

Chức năng đăng nhập bằng mạng xã hội cũng được triển khai dễ dàng (Kakao, Google, v.v.)

Dễ dàng kết nối theo cách thuận tiện cho bạn, chẳng hạn như SDK, GraphQL hoặc API.

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

Mọi người tham gia khóa học này

Tôi đã tự mình phân phối tổng cộng 4 trang web .

Tất cả sẽ được hoàn thành 🚀

🔗 Nhấp vào liên kết ( văn bản màu xanh ) trong mỗi dự án .

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

  • Triển khai CRUD với Cơ sở dữ liệu Supabase

  • Thực hiện việc tạo, xóa, tìm kiếm và hoàn thành nhiệm vụ

  • Dự án NextJS full stack đầu tiên của tôi

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

  • Xử lý các chức năng của tệp với Supabase Storage

  • Thực hiện tải lên và xóa tập tin , tìm kiếm

  • Triển khai chức năng kéo và thả

[Dự án 3] Bản sao của Netflix

  • Xử lý SQL phức tạp với Supabase SDK

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

  • Triển khai cuộn vô hạn (intersection-observer)

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

  • Dễ dàng xây dựng các 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

  • Triển khai hai loại đăng ký thành viên và đăng nhập

  • Trò chuyện thời gian thực, triển khai kết nối thời gian thực

  • + Đã thêm hướng dẫn về cách triển khai chức năng đăng nhập Kakao !

Tôi thực sự khuyên những người này nên làm điều này

Thông qua Supabase
Phát triển toàn bộ ngăn xếp mà không cần thiết lập máy chủ
Nhà phát triển mà tôi muốn trở thành

Thông qua nhiều dự án nhân bản khác nhau
Tăng cường kỹ năng phát triển của bạn
Các nhà phát triển muốn phát triển

Sử dụng công nghệ mới nhất
Phát triển full-stack hiện đại
Nhà phát triển mà tôi muốn trở thành

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

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

Chúng tôi sẽ giúp bạn cải thiện kỹ năng của mình một cách nhanh chóng thông qua 3 dự án nhân bản 👩🏻‍🎓

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

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

Đầu tiên,

Tìm hiểu tất cả 4 tính năng cốt lõi của Supabase!

( Học mọi thứ từ truy vấn DB, xác thực thành viên, tải tệp lên đến triển khai chức năng thời gian thực)

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

Tôi đã thử áp dụng nó vào nhiều dự án khác nhau, từng cái một.

Bạn có thể học đúng 4 chức năng cốt lõi 😉

Thứ hai,

Chúng ta hãy cùng nhau tạo tổng cộng 3 dự án nhân bản nhé!

( Bạn có thể nhanh chóng phát triển các kỹ năng thực hành của mình)

Thông qua tổng cộng ba dự án nhân bản

Triển khai tải tệp lên, xác thực thành viên, trò chuyện thời gian thực, chức năng tìm kiếm, cuộn vô hạn, v.v.

Được trang bị “bộ công nghệ có thể áp dụng trực tiếp vào thực tế”

Bạn sẽ được chuyển đổi thành một nhà phát triển full-stack!

(+ Đã thêm bài giảng về đăng nhập Kakao OAuth 😉 )

Thứ ba,

Bạn có thể tìm hiểu công nghệ mới nhất được sử dụng rộng rãi trong thực tế!

( Có bài giảng lý thuyết và thực hành cho từng công nghệ)

Thay vì chỉ tập trung vào “công nghệ mới nhất,”

Chúng tôi đã chọn những công nghệ có thể cho phép phát triển toàn diện hiệu quả 🙂


Không cần phải học riêng các công nghệ mới nhất

Cũng giống như nó được sử dụng trong thực tế

Bạn có thể học tất cả trong khóa học này!

Thứ tư,

Tìm hiểu hai phương pháp triển khai và thậm chí liên kết chúng với một miền !

( Bạn có thể tạo một danh mục đầu tư tuyệt vời với tên miền của riêng bạn)

Cách triển khai tới AWS EC2Vercel

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

Mọi người sẽ học


(+ Bạn có thể hoàn thiện một danh mục đầu tư chuyên nghiệp hơn!)

trong chốc lát! Bạn vẫn còn là học sinh ở trường phải không?

🔗 Giảm giá cho sinh viên (-50%) Liên kết biểu mẫu Google 🔗

Những điều cần lưu ý trước khi tham gia lớp học

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

Kiến thức và ghi chú của người chơi

  • Nếu bạn có kinh nghiệm sử dụng Next.js hoặc React.js , bạn có thể dễ dàng theo dõi khóa học!

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

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

  • Nếu có phần nào khó hiểu , ngoài phần Hỏi & Đáp, chúng tôi sẽ bổ sung thêm bài giảng giải thích .

  • Khóa học sẽ được cập nhật khi Supabase có thêm tính năng mới .

#Next.js, #supabase, #tailwind-css, #react-querySupabase, #recoiljs, #firebase, #Supabase RLS, #Bảo mật cấp hàng

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

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

  • Lập trình viên Front-end muốn hoàn thành Full-stack đến cùng

  • Cá nhân / Nhóm phát triển nhỏ muốn giảm đáng kể độ khó phát triển và vận hành

  • Người đang tìm dịch vụ backend tối ưu cho 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à

3,670

Học viên

213

Đánh giá

64

Trả lời

4.9

Xếp hạng

7

Các khóa học

🚀 “핫한 스택으로 실전 서비스를 만드는 과정을 숨김없이 보여드립니다.”

이론보다는 프로젝트 위주의 실무 강의로 현업에 바로 도움이 될 수 있는 내용을 제공합니다.

  • (현) 네카라쿠배 재직

  • (현) 7년차 풀스택 개발

  • (강의) 스파르타 코딩클럽 강사

  • (교육) 한국과학기술원(KAIST) 전산학과 졸업

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ả

53 đánh giá

4.8

53 đánh giá

  • 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ợ :)

  • 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!

  • 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.

      • fined0006806님의 프로필 이미지
        fined0006806

        Đánh giá 33

        Đá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.

        2.088.431 ₫

        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!