![[Nhập môn Fullstack] Supabase tốt gấp 10 lần so với FirebaseHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/334439/cover/9e628f60-3721-4d03-b36d-a577593b96fd/334439.jpg?w=420)
[Nhập môn Fullstack] Supabase tốt gấp 10 lần so với Firebase
lopun
Supabase! Chắp cánh phát triển Full-stack! Với Supabase, vượt trội hơn Firebase, hoàn tất phát triển Full-stack chỉ trong 2 giờ.
Cơ bản
PostgreSQL, Next.js, TailwindCSS
🔥 Đây là khóa học Full-stack thực chiến giúp bạn hiện thực hóa toàn bộ quy trình mà học viên trải nghiệm, từ việc đăng ký khóa học, thanh toán cho đến triển khai hệ thống. Bạn sẽ tự tay xây dựng tất cả các tính năng: tìm kiếm khóa học, trang chi tiết, đăng ký học, xem video, đánh giá và đặt câu hỏi, giỏ hàng và thanh toán thực tế, xem tiếp video đang dở, cho đến triển khai bằng Docker + AWS. Qua đó, bạn sẽ nắm vững thiết kế cấu trúc và luồng người dùng gần với dịch vụ thực tế, đồng thời hoàn thiện trải nghiệm Full-stack cao cấp.
178 học viên
Độ khó Trung cấp trở lên
Thời gian Không giới hạn
Đánh giá từ những học viên đầu tiên
5.0
조내일
Sau Part 1, cuối cùng tôi đã hoàn thành toàn bộ khóa học Part 2! Trong khóa học Part 2 lần này, các kỹ thuật mà tôi thường thắc mắc (như triển khai trình phát video, giỏ hàng, xử lý thanh toán, tích hợp Sentry, v.v.) đã được giải thích một cách tự nhiên cùng với mã code thực tế, khiến tôi cảm thấy rất thú vị và bổ ích. Đối với một lập trình viên junior như tôi, có rất nhiều phần có thể áp dụng ngay vào thực tế công việc, và cũng rất thú vị khi vừa theo dõi vừa học hỏi :) Vì bạn cũng giải thích cả ý đồ thiết kế và lý do lựa chọn, nên đây là một khóa học mà tôi có thể "hiểu và triển khai" chứ không chỉ đơn thuần là gõ theo. Cảm ơn bạn đã tạo ra một khóa học tuyệt vời! Tôi cũng mong chờ khóa học tiếp theo 🙌
5.0
5undaye
Tôi đang xem bài giảng Part 2 tiếp theo sau bài giảng Part 1 và nó đang giúp ích rất nhiều. Tôi đang đảm nhận vị trí nhà phát triển frontend, nhưng việc được biết thêm về nội dung backend cũng giúp dễ dàng nắm bắt luồng xử lý. Cảm ơn bạn đã cung cấp bài giảng hay.
5.0
cafe small house
Cá nhân tôi nghĩ đây thực sự là một khóa học tuyệt vời. Bạn có thể sử dụng cursor để hiểu cách cấu trúc frontend, xây dựng backend có quy mô nhất định, học về thanh toán qua PortOne để áp dụng trong thực tế, và khi hoàn thành các mission, bạn sẽ có thể tạo được một portfolio. Đây là khóa học phù hợp cho cả những người đã có kinh nghiệm phát triển và những người mới bắt đầu lập trình.
Xu hướng phát triển Full-stack mới nhất (Next.js 15, NestJS, Prisma)
Hoàn thành nền tảng ‘Inflearn của riêng tôi’ có thể sử dụng làm portfolio
Thực hiện toàn bộ hệ thống học tập lấy người dùng làm trung tâm, từ tìm kiếm bài giảng đến đăng ký khóa học, học tiếp và thanh toán.
Tạo giao diện UI tinh tế cấp độ thực tế với Shadcn UI + TailwindCSS + Cursor AI
Mô hình hóa cơ sở dữ liệu với Prisma và thiết kế cấu trúc dựa trên PostgreSQL
Phương pháp triển khai thực tế sử dụng AWS và Docker
Bắt đầu hành trình full-stack hoàn thiện từ lập kế hoạch, phát triển đến triển khai chỉ với duy nhất một khóa học.
"Bằng cách kết hợp Next.js + NestJS, chúng ta sẽ tự tay xây dựng nền tảng Inflearn sát với thực tế ngay từ những bước đầu tiên."
Trong khóa học này, dựa trên sự kết hợp này, chúng ta sẽ triển khai toàn bộ quy trình full-stack từ đăng ký khóa học, xem tiếp, thanh toán cho đến triển khai.
Next.js 15 bổ sung Server Components, App Router và Server Actions vào các dự án dựa trên React, cho phép xử lý mọi thứ từ hiển thị màn hình đến các API đơn giản trong cùng một codebase.
NestJS được viết bằng cùng một ngôn ngữ TypeScript, và nhờ vào cấu trúc mô-đun cùng với tiêm phụ thuộc (dependency injection), nó giúp xây dựng một backend dễ dàng bảo trì ngay cả khi quy mô đội ngũ phát triển tăng lên.
Khi sử dụng kết hợp hai framework này, UI và máy chủ sẽ chia sẻ cùng một định nghĩa kiểu dữ liệu giúp giảm thiểu sự không nhất quán về dữ liệu, đồng thời nhà phát triển có thể chuyển đổi qua lại giữa front-end và back-end mà không cần thay đổi ngôn ngữ hay bộ công cụ.
Trong khóa học Part 2 lần này
Thực hiện từ tìm kiếm danh sách bài giảng cho đến trang chi tiết, yêu thích và nút đăng ký khóa học.
Tạo trang học tập bao gồm tính năng lưu thời gian xem và xem tiếp.
Thiết kế tính năng đánh giá khóa học và đặt câu hỏi, đồng thời hoàn thiện giao diện quản lý dành cho người chia sẻ kiến thức.
Thực hiện luồng thanh toán thực tế thông qua giỏ hàng, API thanh toán và tích hợp PortOne (Toss Payments)..
Hoàn thiện đến cấp độ vận hành với triển khai AWS EC2, kết nối HTTPS và tự động hóa GitHub Actions.
Dựa trên dự án đã tạo ở Part 1, chúng ta sẽ thêm các tính năng như tìm kiếm khóa học, đăng ký học, giỏ hàng, thanh toán,
và cuối cùng hoàn thiện thành một "dịch vụ thực tế mà bất kỳ ai cũng có thể truy cập" bằng cách hoàn tất triển khai lên AWS..
Chương trình học được thiết kế để các kiến thức nền tảng từ Phần 1 được kết nối một cách tự nhiên với Phần 2, vì vậy nếu bạn học liên tiếp cả hai phần, bạn có thể trải nghiệm trọn vẹn toàn bộ quy trình full-stack từ thiết kế đến vận hành..
Tìm kiếm khóa học dựa trên danh mục và phân trang
Trang chi tiết bao gồm đánh giá sao và thông tin người chia sẻ kiến thức
Thực hiện chức năng yêu thích và đăng ký khóa học / giỏ hàng
Tự phát triển thành phần trình phát video
Hoàn thành lưu thời gian xem và tính năng xem tiếp
Bao gồm nhiệm vụ tạo nút phát tùy chỉnh
UI danh sách và viết đánh giá khóa học dựa trên xếp hạng sao
Hoàn thành luồng từ đặt câu hỏi/tra cứu/trả lời
Tự tay triển khai cho đến tận trang quản trị dành cho người chia sẻ kiến thức
Trực tiếp thiết kế Giỏ hàng · API thanh toán
Liên kết PortOne server SDK và Toss Payments PG
Từ thanh toán thực tế, xử lý ngoại lệ, cho đến cập nhật danh sách học tập sau khi thanh toán
Liên kết Sentry, phát triển batch job thống kê hàng ngày,
và học chuyên sâu đến cả In-memory caching
Cấu hình triển khai EC2 + Docker + Route53
Hoàn tất tự động hóa CI/CD với GitHub Actions
Vượt qua những ứng dụng Todo đơn giản
để tạo ra một dịch vụ
thực thụ, dành cho nhà phát triển Frontend
Portfolio có thể sử dụng
ngay lập tức cho các ứng viên đang chuẩn bị nhảy việc hoặc xin việc cần dự án
thực tế
Nền tảng bài giảng và những
dịch vụ thực tế tương tự
nhà phát triển độc lập
Phần 2
Từ tìm kiếm khóa học đến trang chi tiết, hoàn thiện luồng trước khi đăng ký
Thực hiện chức năng tìm kiếm bao gồm các tính năng danh mục, phân trang và tạo màn hình danh sách bài giảng cũng như trang tìm kiếm theo danh mục. features, and create the course list screen and category search page.
Trang chi tiết sẽ hiển thị cùng lúc đánh giá xếp hạng sao và thông tin người chia sẻ kiến thức, đồng thời nút đăng ký khóa học sẽ được xử lý để hoạt động khác nhau tùy theo trạng thái đăng nhập và loại khóa học.
Phần 3
Trang học tập có khả năng lưu thời gian xem & xem tiếp
Tự tay tạo component trình phát video và triển khai cả
lưu trữ thời gian xem cùng logic xem tiếp.
Ở phía backend, chúng tôi thiết kế API lưu trữ và phản hồi thông tin khóa học,
còn ở phía frontend, chúng tôi cấu hình giao diện người dùng (UI) hoạt động theo trạng thái xem và các nút phát tùy chỉnh để tạo ra trải nghiệm học tập gần giống với Inflearn thực tế.
Phần 4
Tính năng đánh giá và đặt câu hỏi - Học viên & Người chia sẻ kiến thức
Học viên có thể để lại đánh giá sao và nhận xét,
cũng như đăng câu hỏi để nhận được câu trả lời và
Người chia sẻ kiến thức thiết kế các giao diện người dùng (UI) phù hợp với từng vai trò để có thể phản hồi các đánh giá hoặc trả lời các câu hỏi trong trang quản trị.
Phần 5
Phát triển toàn bộ quy trình mua hàng, từ giỏ hàng đến thanh toán
Thêm bài giảng vào giỏ hàng và thực hiện thanh toán thực tế bằng cách liên kết PortOne SDK với Toss Payments.
Khi thanh toán thành công, khóa học sẽ tự động được cập nhật vào danh sách học tập,
hoàn thiện trải nghiệm người dùng bằng cách cân nhắc đến toàn bộ quy trình thanh toán và cả các tình huống ngoại lệ.
Phần 6~7
Kinh nghiệm vận hành Backend cấp độ thực tế và triển khai thực tế
Sử dụng tính năng Cron của NestJS để tự động thu thập thống kê hàng ngày, và cải thiện tốc độ phản hồi cho các API được gọi thường xuyên bằng In-memory caching.
Liên kết Sentry để theo dõi lỗi trong thời gian thực và tự tay cấu hình môi trường triển khai thực tế bằng
EC2 · Docker · GitHub Actions · Route 53.EC2 · Docker · GitHub Actions · Route 53.
Kết nối HTTPS và tên miền cũng sẽ được thực hành cùng nhau.
Khóa học này là một phần của chuỗi ‘Dự án Clone Inflearn’.
Bạn có thể học riêng biệt Phần 1 và Phần 2, nhưng
nếu học cùng nhau, bạn có thể hoàn thành trọn vẹn một dịch vụ thực tế từ khâu lập kế hoạch cho đến triển khai.
Trọng tâm vào tính năng dành cho người chia sẻ kiến thức
Tập trung vào tính năng dành cho học viên
Đăng ký bài giảng, cấu trúc chương trình học, tải lên video
Tìm kiếm khóa học, đăng ký khóa học, xem video, thanh toán, triển khai
Xác thực JWT, tải lên S3, cấu hình trang quản trị
Lưu lịch sử xem, hỏi đáp/đánh giá khóa học, API thanh toán, triển khai EC2
1⃣ Bạn có thể thiết kế cấu trúc dự án từ đầu đến cuối một cách tự lập.
2⃣ Bạn sẽ có khả năng triển khai các tính năng cần thiết cho dịch vụ theo mô hình End-to-End.
3⃣ Bạn có thể xây dựng cơ sở hạ tầng cần thiết thông qua AWS.
4⃣ Bạn có thể xây dựng dịch vụ với độ hoàn thiện cao bằng cách sử dụng Cursor AI..
5⃣ Bạn sẽ có được sự tự tin có cơ sở rằng “Mình có thể tự tay tạo ra ít nhất một dịch vụ mà mình mong muốn!”
Tổng cộng 7 phần, thời lượng 14+ giờ, 40+ bài giảng (cập nhật trọn đời)
Cung cấp mã ví dụ trên GitHub và tài liệu tham khảo
Dự án hoàn thiện có thể được sử dụng làm portfolio
Ngữ pháp Typescript cơ bản, kinh nghiệm sử dụng React
Hiểu biết về Git, Node.js
#Next.js #Nest.js #NextJS #NestJS #Fullstack #풀스택 #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #클론코딩 #Node.js #AWS #S3 #Cloudfront
Khóa học này dành cho ai?
Đừng chỉ dừng lại ở blog hay ứng dụng To-do! Dành cho những nhà phát triển Frontend muốn trực tiếp hiện thực hóa toàn bộ dịch vụ.
Các nhà phát triển cấp Junior đến Middle muốn học hỏi kinh nghiệm thực tế về thiết kế backend NestJS.
Người đang tìm việc cần những dự án có độ hoàn thiện cao để chuyển việc hoặc làm portfolio.
Học viên hướng đến thực tế, muốn nắm vững các kỹ năng thực chiến từ A đến Z chỉ qua một khóa học duy nhất.
Nhà phát triển định hướng thực hành muốn tự mình triển khai cấu trúc full-stack dựa trên Next.js + NestJS.
Cần biết trước khi bắt đầu?
Cú pháp cơ bản HTML/CSS/JS
Kinh nghiệm sử dụng React cơ bản
Hiểu biết về REST API và Node.js
Xác minh sự nghiệp
3,844
Học viên
237
Đánh giá
67
Trả lời
4.8
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 lại những nội dung có thể giúp ích trực tiếp cho công việc thực tế.
(현) Nhà phát triển cấp cao tại Na-Ka-Ra-Ku-Bae
(Cựu) Đang làm việc tại startup kỳ lân
(Hiện tại) Nhà phát triển Full-stack 8 năm kinh nghiệm
(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 tại Viện Khoa học và Công nghệ Tiên tiến Hàn Quốc (KAIST)
Tất cả
44 bài giảng ∙ (14giờ 11phút)
Tài liệu khóa học:
Tất cả
9 đánh giá
4.9
9 đánh giá
Đánh giá 2
∙
Đánh giá trung bình 5.0
Đánh giá 22
∙
Đánh giá trung bình 4.8
5
Sau Part 1, cuối cùng tôi đã hoàn thành toàn bộ khóa học Part 2! Trong khóa học Part 2 lần này, các kỹ thuật mà tôi thường thắc mắc (như triển khai trình phát video, giỏ hàng, xử lý thanh toán, tích hợp Sentry, v.v.) đã được giải thích một cách tự nhiên cùng với mã code thực tế, khiến tôi cảm thấy rất thú vị và bổ ích. Đối với một lập trình viên junior như tôi, có rất nhiều phần có thể áp dụng ngay vào thực tế công việc, và cũng rất thú vị khi vừa theo dõi vừa học hỏi :) Vì bạn cũng giải thích cả ý đồ thiết kế và lý do lựa chọn, nên đây là một khóa học mà tôi có thể "hiểu và triển khai" chứ không chỉ đơn thuần là gõ theo. Cảm ơn bạn đã tạo ra một khóa học tuyệt vời! Tôi cũng mong chờ khóa học tiếp theo 🙌
Đánh giá 5
∙
Đánh giá trung bình 5.0
Đánh giá 6
∙
Đánh giá trung bình 5.0
Đánh giá 12
∙
Đánh giá trung bình 4.6
5
Cá nhân tôi nghĩ đây thực sự là một khóa học tuyệt vời. Bạn có thể sử dụng cursor để hiểu cách cấu trúc frontend, xây dựng backend có quy mô nhất định, học về thanh toán qua PortOne để áp dụng trong thực tế, và khi hoàn thành các mission, bạn sẽ có thể tạo được một portfolio. Đây là khóa học phù hợp cho cả những người đã có kinh nghiệm phát triển và những người mới bắt đầu lập trình.
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!