강의

멘토링

커뮤니티

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) 52 đánh giá

847 học viên

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

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

Dịch cái này sang tiếng Việt

  • 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,589

Học viên

200

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

52 đánh giá

4.8

52 đánh giá

  • official님의 프로필 이미지
    official

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    63% đã tham gia

    For those of you who are wondering whether or not to take this course, I would like to explain the advantages I felt while taking the course. I have also compiled a list of people who will benefit from listening. Advantages 1. You can quickly get used to using the latest technologies and Supabase with 3 clone codings. 2. You can directly experience and implement the latest technologies of NextJS, such as Server Actions. 3. You can focus on learning the core functions required for actual projects, such as infinite scroll. 4. You can improve your development experience by learning the deployment methods of both Vercel and AWS. I think I can explain the advantages in four ways. I have compiled a list of people who will benefit from listening to this lecture. 1. Those who have basic background knowledge of global state management and server API and want to become proficient through repeated learning. 2. Those who want to integrate the backend and frontend to complete a single project. 3. Those who want to experience the entire process from project creation to deployment. 4. Those who want to become familiar with code and function implementation through repeated learning. Although the lecture initially provides a comprehensive explanation of the technology stack covered in the lecture, such as React Query, Recoil, and NextJS, If you don't have basic knowledge, it may be difficult to understand. Since the lecture focuses on utilization rather than basic explanations of technology or libraries, if you don't have background knowledge, I recommend that you learn the basics first and then take this lecture. Compared to other lectures, the progress is fast and the number of projects to be completed is large, so you will be able to feel your skills improving by repeatedly implementing functions in a short period of time. I recommend this lecture to anyone who is considering taking it for proficiency.

    • lopun
      Giảng viên

      Wow, thank you so much for writing such a detailed course review!! I was worried about how the students would perceive the many projects, but I'm so touched that they said it actually helped them. ㅎㅎ By the way, you're almost done with the course already 🫢 Good luck with the remaining courses, beginners! If there's any difficult content in the latter half, I'll actively help you out :)

  • hamjw01224657님의 프로필 이미지
    hamjw01224657

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    66% đã tham gia

    I wanted to try Supabase, but I was having trouble because there was not enough material to use it in Next.js, and then I came across this course. I liked that I could learn the basics of Supabase with a simple project like a to-do list and then implement major functions like Storage and Auth myself. The lecture content is well organized in Notion, so it was easy to follow the lecture, and the explanations were step-by-step, so I was able to listen to the lecture quite a bit while working at the company☺️ Thank you for making such a great course. It was very helpful.

    • lopun
      Giảng viên

      Hello Jane! It's so cool that you're able to take the course so quickly while working. 🫢 I'm explaining it slowly so that students can understand it well. If it seems a little slow, you can use the speed function. Thank you so much for leaving a valuable review!

  • joy40176271님의 프로필 이미지
    joy40176271

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    I started taking this course because I wanted to create my own web app while doing frontend development. When I tried integrating Next.js and Supabase on my own, it was quite difficult, but through this course, I was able to learn a lot. Thank you for creating such a great course! Thanks to it, I'm getting 3 portfolios as a bonus 😊😊 Additionally, Next.js is currently at version 15 while the course uses version 14, so there were more syntax differences than I expected. It would be more convenient for learning if you could add supplementary materials about version differences to the course, or guide students to use the npx create-next-app@14 ... command.

    • swerty142487님의 프로필 이미지
      swerty142487

      Đánh giá 1

      Đánh giá trung bình 4.0

      4

      30% đã tham gia

      Adding theoretical parts about technology is recommended.

      • fined0006806님의 프로필 이미지
        fined0006806

        Đánh giá 27

        Đánh giá trung bình 4.7

        5

        100% đã tham gia

        Thank you for creating such great examples with the latest version, I learned a lot.

        2.088.232 ₫

        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!