강의

멘토링

커뮤니티

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.

(4.9) 7 đánh giá

152 học viên

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

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

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

🔗 Link 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 từ đầu đến cuối

Tạo bản sao Inflearntrong quá trình

Phát triển 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ôi đủ rồ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 cách sử dụng 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 bổ sung 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, nhờ vào dependency injection và cấu trúc modular nên có thể xây dựng backend dễ bảo trì ngay cả khi quy mô team mở rộng.

Khi sử dụng hai framework cùng nhau, UI và server có thể 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ế tính năng đánh giá khóa học và hỏi đáp, hoàn thành UI 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에서 만든 프로젝트를 기반으로 tìm kiếm khóa học, 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 bài giảng Part 2

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

  • Thông tin đánh giá sao và 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 đến 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 danh sách học tập sau 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,
    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ự chuyên nghiệp
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

Những gì bạn sẽ học trong khóa học


Phần 2
Từ tìm kiếm bài giảng đến trang chi tiết, hoàn thiện quy trình trước khi học

Triển khai chức năng tìm kiếm bao gồm danh mục, phân trang và tạo màn hình danh sách khóa học cùng trang tìm kiếm theo danh mục.

Trang chi tiết hiển thị cùng lúc đánh giá sao và thông tin người chia sẻ kiến thức, đồng thời xử lý nút đăng ký học để 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 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.

Ở backend, chúng ta sẽ thiết kế API lưu trữ và phản hồi thông tin học tập,
còn ở frontend sẽ xây dựng UI hoạt động theo trạng thái xem video 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 thiết kế giao diện người dùng phù hợp với từng vai trò để 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ộ luồng 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, nội dung 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 In-memory caching.

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 đượ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⃣ Bạn có thể xây dựng hạ tầng cần thiết thông qua AWS.

4⃣ Cursor AI를 활용하여 dịch vụ hoàn thiện cao를 구축할 수 있습니다.

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,656

Học viên

212

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

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ả

7 đánh giá

4.9

7 đánh giá

  • tomorrowcho님의 프로필 이미지
    tomorrowcho

    Đánh giá 15

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    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 🙌

    • yoonc017672님의 프로필 이미지
      yoonc017672

      Đánh giá 7

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      • yhkim03203634님의 프로필 이미지
        yhkim03203634

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        • tonyglenn님의 프로필 이미지
          tonyglenn

          Đánh giá 10

          Đánh giá trung bình 5.0

          5

          90% đã tham gia

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

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            45% đã tham gia

            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.

            3.464.442 ₫

            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!