강의

멘토링

로드맵

Programming

/

Full-stack

Inflearn clone coding Part 2: Từ học tập đến triển khai, hoàn thành Inflearn thực sự

🔥 Đây là khóa học full-stack thực chiến giúp bạn tái hiện trọn vẹn quy trình một học viên trải qua, từ việc tham gia khóa học, thanh toán đến triển khai. Bạn sẽ tự tay xây dựng mọi thứ: từ tìm kiếm khóa học, trang chi tiết, đăng ký, xem video, bình luận và đặt câu hỏi, giỏ hàng cùng thanh toán thực tế, chức năng xem tiếp, cho đến triển khai với Docker + AWS. Đồng thời, bạn sẽ nắm vững luồng người dùng và thiết kế cấu trúc gần với dịch vụ thực tế, qua đó hoàn thiện trải nghiệm full-stack cao cấp.

(5.0) 5 đánh giá

132 học viên

  • lopun
실습 중심
클론코딩
사이드프로젝트
ai활용
도커
AWS
Docker
Next.js
NestJS
Prisma

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

  • Xu hướng phát triển full-stack mới nhất (Next.js 15, NestJS, Prisma)

  • Hoàn thiện nền tảng 'Inflearn của riêng tôi' có thể dùng làm portfolio.

  • Triển khai 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 đến đăng ký, xem tiếp và thanh toán.

  • Chế tác UI tinh tế cấp độ thực tế với Shadcn UI + TailwindCSS + Cursor AI

  • Mô hình hóa CSDL bằng Prisma và thiết kế kiến trúc trên PostgreSQL

  • Phương pháp triển khai gần với thực tiễn sử dụng AWS và Docker

🚀

Đầu tiên tại Hàn Quốc!

Next.js 15 + NestJS Khóa học lập trình clone fullstack

Bạn có phải là học sinh đang theo học tại trường không?

🔗 Liên kết Google Form giảm giá sinh viên (-40%) 🔗


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


Kết hợp fullstack mạnh mẽ NextJS, NestJS

Thông qua Prisma, ORM hot nhất hiện tại


Học tập · Thanh toán · Phân phốihoàn thiện đến cùng

Tạo bản sao Inflearn

Trở thành một lập trình viên fullstack với nền tảng vững chắc!

"Thử qua loa thì thôi! Hãy trải nghiệm fullstack thực sự."

Bắt đầu hành trình fullstack hoàn thành từ lập kế hoạch, phát triển, triển khai chỉ với một khóa học duy nhất.

"Tạo ra nền tảng Inflearn gần với thực tế từ đầu bằng sự kết hợp Next.js + NestJS."

🧩 Next.js + NestJS = Sự kết hợp tối ưu cho fullstack đơn ngôn ngữ

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 fullstack từ đăng ký khóa học, tiếp tục xem, thanh toán đến phân phối.

Next.js 15 thêm Server Components · App Router · Server Actions vào các dự án dựa trên React, cho phép xử lý từ việc render giao diện đến các API đơn giản trong cùng một codebase.

NestJS được viết bằng TypeScript, và nhờ vào dependency injection cùng cấu trúc modular, có thể xây dựng backend dễ bảo trì ngay cả khi quy mô team ngày càng lớn.

Khi sử dụng hai framework cùng nhau, UI và server sẽ chia sẻ một định nghĩa kiểu dữ liệu, giúp giảm thiểu sự không nhất quán của dữ liệu và cho phép developer chuyển đổi giữa frontend và backend mà không cần thay đổi ngôn ngữ hay bộ công cụ.

💡 Giới thiệu Part 2

Trong khóa học Part 2 này

  • Triển khai từ tìm kiếm danh sách bài giảng đến các nút trang chi tiết, yêu thích, đăng ký học.

  • Tạo trang học tập bao gồm tính năng lưu thời gian xem và tiếp tục xem.

  • Thiết kế chức năng đánh giá khóa học và hỏi đáp, hoàn thiện giao diện quản lý người chia sẻ kiến thức.

  • Giỏ hàng, API thanh toán, tích hợp PortOne(Toss Payments) để triển khai quy trình thanh toán thực tế.

  • AWS EC2 triển khai, kết nối HTTPS, tự động hóa GitHub Actions để hoàn thiện đến mức vận hành.

Part 1에서 만든 프로젝트를 기반으로 khóa học tìm kiếm, học tập, giỏ hàng, thanh toán 등의 기능을 추가하고,
최종적으로 triển khai AWS까지 완료하여 "Dịch vụ thực sự mà bất kỳ ai cũng có thể truy cập" để hoàn thành.

Chúng tôi đã thiết kế chương trình học sao cho nền tảng được xây dựng trong Part 1 kết nối tự nhiên với Part 2, vì vậy nếu bạn học liên tục cả hai phần, bạn có thể trải nghiệm hoàn toàn từ thiết kế đến vận hành toàn bộ quy trình fullstack.

🚀

Trong Part 2, bài giảng sẽ

Bạn sẽ thực sự hoàn thành sản phẩm cuối cùng dưới đây!


🥇 Triển khai từ tìm kiếm khóa học đến trang chi tiết

  • Danh mục, phân trang tìm kiếm bài giảng dựa trên

  • Đánh giá sao và thông tin người chia sẻ kiến thức bao gồm trang chi tiết

  • Triển khai tính năng yêu thích và tính năng đăng ký khóa học / giỏ hàng


📺 Triển khai trang học tập hoạt động như thật

  • Thành phần trình phát video phát triển trực tiếp

  • Hoàn thành lưu thời gian xem và tính năng xem tiếp

  • Tạo nút phát tùy chỉnh bao gồm nhiệm vụ


📝 Xây dựng hệ thống đánh giá khóa học · câu hỏi

  • Giao diện danh sách và viết đánh giá khóa học dựa trên điểm sao

  • Hoàn thành luồng tạo/xem/trả lời câu hỏi

  • Triển khai trực tiếp cả trang quản lý dành cho người chia sẻ kiến thức


💳 Hoàn thành luồng thanh toán thực tế

  • API Giỏ hàng · Thanh toán thiết kế trực tiếp

  • [[STRONG_1]]PortOne[[/STRONG_1]] 서버 SDK와 [[STRONG_2]]토스페이먼츠 PG[[/STRONG_2]] 연동

  • Thanh toán thực tế, xử lý ngoại lệ, phản ánh vào danh sách học tập sau khi thanh toán


💻 Triển khai · Giám sát · Tự động hóa hạ tầng

  • Tích hợp Sentry, phát triển batch job thống kê hàng ngày,
    Từ In-memory caching đến học tập nâng cao

  • EC2 + Docker + Route53 cấu hình triển khai

  • GitHub Actions로 CI/CD 자동화까지 hoàn thành


🎯

Tôi thực sự khuyến khích những người như thế này!

Thoát khỏi ứng dụng todo đơn giản
Tạo ra dịch vụ thực sự
và trở thành nhà phát triển frontend

Portfolio có thể
sử dụng ngay làm dự án
cần thiết cho người chuẩn bị chuyển việc·tìm việc

Nền tảng giảng dạy như vậy
Muốn tạo ra dịch vụ thực tế
Lập trình viên độc lập

Đây là những gì bạn sẽ học trong khóa học


Phần 2
Từ tìm kiếm khóa học đến trang chi tiết, hoàn thiện quy trình trước khi học

Danh mục, phân trang triển khai chức năng tìm kiếm bao gồm các tính năng này và tạo màn hình danh sách bài giảng cùng trang tìm kiếm theo danh mục.

Trang chi tiết hiển thị cùng lúc điểm đánh giá sao và thông tin người chia sẻ kiến thức, đồng thời nút đăng ký học được xử lý để hoạt động khác nhau tùy theo trạng thái đăng nhập và loại bài giảng.

Phần 3
Trang học có thể lưu thời gian xem & tiếp tục xem

Tạo trực tiếp component video player
triển khai cả việc lưu thời gian xem và logic xem tiếp.

Phía backend sẽ thiết kế API lưu trữ và phản hồi thông tin học tập,
phía frontend sẽ cấu thành UI hoạt động theo trạng thái xem và 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
Chức năng đánh giá và hỏi đáp - 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,
đăng ký câu hỏi để nhận được câu trả lời và

Người chia sẻ kiến thức sẽ thiết kế UI phù hợp với vai trò của mình để có thể trả lời đánh giá khóa học hoặc trả lời câu hỏi trong trang quản lý.

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 khóa học vào giỏ hàng,
tích hợp PortOne SDK토스페이먼츠 để triển khai thanh toán thực tế.

Khi thanh toán thành công, khóa học sẽ tự động được phản ánh trong danh sách học tập,
hoàn thiện trải nghiệm người dùng bằng cách xem xét toàn bộ quy trình thanh toán và 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 sự

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 của các API được gọi thường xuyên bằng bộ nhớ đệm In-memory.

Tích hợp Sentry để giám sát lỗi theo thời gian thực và
trực tiếp cấu hình môi trường triển khai thực tế sử dụng 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.

📦 Part 1 và Part 2, chúng được kết nối như thế này

Khóa học này là một phần của series 'Dự án nhân bản Inflearn'.
Part 1 và Part 2 có thể học độc lập với nhau,
nhưng nếu học cùng nhau, bạn có thể hoàn thành một dịch vụ thực sự từ khâu lập kế hoạch đến triển khai.

Phần 1

Tập trung vào chức năng của người chia sẻ kiến thức

Tập trung vào chức năng của học viên

Đăng ký khóa học, cấu thành chương trình giảng dạy, tải lên video

Phần 2

Tìm kiếm khóa học, đăng ký học, xem video, thanh toán, phân phối

JWT xác thực, tải lên S3, cấu hình trang quản trị

Lưu lịch sử xem, câu hỏi/đánh giá khóa học, API thanh toán, triển khai EC2

🧑‍🎓

Thông qua khóa học
bạn có thể thu được những điều này


1⃣ Cấu trúc dự án có thể tự thiết kế từ đầu đến cuối.

2⃣ Bạn sẽ có sức mạnh để triển khai các tính năng cần thiết cho dịch vụ một cách End-to-End.

3⃣ AWS có thể giúp bạn xây dựng hạ tầng cần thiết.

4⃣ Cursor AI를 활용하여 dịch vụ hoàn thiện cao를 xây dựng할 수 있습니다.

5⃣ "Tôi có thể tự tay tạo ra ít nhất một dịch vụ mà mình mong muốn!" - Bạn sẽ có được sự tự tin có căn cứ.

🧰

Cấu trúc bài giảng

Tổng cộng 7 phần, 14+ giờ nội dung, 40+ bài giảng (cập nhật trọn đời)

Cung cấp mã ví dụ GitHub và tài liệu tham khảo

Dự án hoàn thành có thể được sử dụng làm portfolio

🧩

Chuẩn bị trước khi học

Cú 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

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

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

  • Không blog, to-do app nữa! Dev Frontend muốn tự tay phát triển toàn bộ dịch vụ.

  • Lập trình viên Junior ~ Middle muốn thực hành thiết kế backend NestJS qua thực chiến

  • Người tìm việc cần dự án hoàn chỉnh để chuyển việc và portfolio.

  • Học viên chú trọng thực hành, muốn nắm stack thực tế A-Z chỉ một khóa.

  • Nhà phát triển định hướng thực tiễn, muốn tự xây dựng cấu trúc full-stack dựa trên Next.js + NestJS.

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

  • HTML/CSS/JS cú pháp cơ bản

  • Kinh nghiệm sử dụng React cơ bản

  • REST API, hiểu biết về Node.js

Xin chào
Đây là

3,558

Học viên

197

Đánh giá

64

Trả lời

4.9

Xếp hạng

6

Các khóa học

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

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

  • (현) 네카라쿠배 재직

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

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

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

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

Tất cả

44 bài giảng ∙ (14giờ 11phút)

Tài liệu khóa học:

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

5 đánh giá

5.0

5 đánh giá

  • 조내일님의 프로필 이미지
    조내일

    Đánh giá 15

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    파트 1에 이어 드디어 파트 2까지 완강했습니다! 이번 파트 2 강의에서는 평소 궁금했던 기술들 (비디오 플레이어 구현, 장바구니, 결제 처리, Sentry 연동 등) 이 실제 코드와 함께 자연스럽게 설명되어 있어서 정말 재미있고 유익했어요. 주니어 개발자인 저에게는 실무에 바로 적용해볼 수 있는 부분이 많았고, 따라가면서 배우는 재미도 있었습니다 :) 설계 의도나 선택의 이유도 함께 설명해주셔서 단순히 따라 치는 걸 넘어서 “이해하면서 구현”할 수 있었던 강의였습니다. 좋은 강의 만들어주셔서 감사합니다! 다음 강의도 기대할게요 🙌

    • 윤효준님의 프로필 이미지
      윤효준

      Đánh giá 7

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      • 김요한님의 프로필 이미지
        김요한

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        • Tony님의 프로필 이미지
          Tony

          Đánh giá 10

          Đánh giá trung bình 5.0

          5

          90% đã tham gia

          • 5undaye님의 프로필 이미지
            5undaye

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            45% đã tham gia

            Part 2 강의도 Part 1 강의에 이어서 보고 있는데 큰 도움이 되고 있어요. 프론트엔드 개발자 직군을 맡고 있는데, 백엔드 관련 내용도 알게되니 흐름 파악에 용이하네요. 좋은 강의 제공해주셔서 감사합니다.

            3.462.076 ₫

            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!