Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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) 3 đánh giá

105 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

🚀

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

Next.js 15 + Khóa học lập trình NestJS Full Stack Clone

Bạn có phải là học sinh hiện đang đi học không?

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

Đợi đã! Phần 2 Lễ kỷ niệm ra mắt

🔥 Khóa học Phần 1 - Tặng phiếu giảm giá 30% 🔥

👉 Liên kết phiếu giảm giá (~7/30) 👈


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


Sự kết hợp đầy đủ mạnh mẽ của NextJS NestJS

Thông qua Prisma , một ORM nóng


Hoàn thành từ khâu đăng ký khóa học đến khâu thanh toán và phân phối

Tạo bản sao Inflearn

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

Đừng chụp ảnh nữa! Hãy trải nghiệm full stack thực sự .”

Bắt đầu hành trình toàn diện của bạn từ khâu lập kế hoạch, phát triển đến triển khai chỉ trong một bài giảng .

"Hãy cùng tạo ra một nền tảng Inflearn thực tế từ đầu bằng cách kết hợp Next.js và NestJS ."

🧩 Next.js + NestJS = Sự kết hợp ngôn ngữ đơn đầy đủ tốt nhất

Trong bài giảng này , chúng ta sẽ triển khai toàn bộ quy trình đầy đủ từ đăng ký khóa học, tiếp tục, thanh toán và phân phối dựa trên sự kết hợp này.

Next.js 15 bổ sung các thành phần máy chủ, App Router và Server Actions vào các dự án dựa trên React, cho phép bạn xử lý mọi thứ từ hiển thị màn hình đến các API đơn giản trong một cơ sở mã duy nhất.

NestJS được viết bằng cùng một TypeScript, tính năng tiêm phụ thuộc và cấu trúc mô-đun cho phép bạn xây dựng một chương trình phụ trợ dễ bảo trì ngay cả khi nhóm của bạn phát triển.

Việc sử dụng hai khung này cùng nhau sẽ làm giảm sự không nhất quán của dữ liệu bằng cách cho phép UI và máy chủ chia sẻ một định nghĩa kiểu duy nhất và cho phép các nhà phát triển di chuyển giữa giao diện người dùng và giao diện quản trị mà không cần chuyển đổi ngôn ngữ hoặc bộ công cụ.

💡 Phần 2 Giới thiệu

Trong bài giảng Phần 2 này,

  • Chúng tôi triển khai mọi thứ từ tìm kiếm danh sách khóa học đến trang chi tiết, mục yêu thích và nút đăng ký khóa học .

  • Tạo trang khóa học có chức năng lưu thời gian xem và tiếp tục xem.

  • Chúng tôi thiết kế các chức năng đánh giá khóa học và câu hỏi, đồng thời hoàn thiện UI để quản lý người chia sẻ kiến ​​thức.

  • Triển khai 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 được tạo ở Phần 1 , các chức năng như tìm kiếm khóa học, tham gia lớp học, giỏ hàng và thanh toán đã được thêm vào.
Cuối cùng, chúng tôi sẽ hoàn tất việc triển khai AWS và hoàn thiện nó thành “ dịch vụ thực sự mà bất kỳ ai cũng có thể truy cập ”.

Chúng tôi thiết kế chương trình giảng dạy sao cho nền tảng ở Phần 1 sẽ tự nhiên dẫn đến Phần 2, vì vậy nếu bạn học cả hai phần liên tiếp, bạn có thể trải nghiệm đầy đủ quy trình toàn diện từ thiết kế đến vận hành .

🚀

Trong Phần 2 của bài giảng,

Trên thực tế, bạn sẽ hoàn thành kết quả bên dưới!


🥇 Triển khai từ điều hướng khóa học đến trang chi tiết

  • Tìm kiếm khóa học theo danh mục, phân trang

  • Trang chi tiết với xếp hạng sao và thông tin chia sẻ kiến ​​thức

  • Đã triển khai chức năng yêu thích và chức năng đăng ký khóa học/giỏ hàng


📺 Triển khai trang khóa học hoạt động giống như trang thực tế

  • Phát triển thành phần trình phát video của riêng bạn

  • Đã hoàn thành chức năng tiết kiệm thời gian xem và tiếp tục

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


📝 Thiết lập hệ thống câu hỏi và đánh giá khóa học

  • Danh sách đánh giá khóa học theo sao và giao diện người dùng viết

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

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


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

  • Thiết kế giỏ hàng/API thanh toán của riêng bạn

  • Tích hợp PortOne Server SDK và Toss Payments PG

  • Từ thanh toán thực tế, xử lý ngoại lệ, đến phản ánh trong danh sách học tập sau khi thanh toán


💻 Từ phân phối đến giám sát đến tự động hóa cơ sở hạ tầng

  • Tích hợp Sentry, phát triển công việc hàng loạt thống kê hàng ngày,
    Học sâu lên đến bộ nhớ đệm trong bộ nhớ

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

  • Tự động hóa CI/CD hoàn chỉnh với GitHub Actions


🎯

Tôi thực sự muốn giới thiệu điều này tới những người này!

Hơn cả một ứng dụng việc cần làm đơn giản
Dịch vụ phù hợp
Tạo và phát triển front-end

Đến danh mục đầu tư
Một dự án có thể sử dụng ngay
Người tìm việc cần thay đổi công việc hoặc chuẩn bị tìm việc làm

Giống như một diễn đàn giảng bài
Tôi muốn tạo ra một dịch vụ thực sự
Nhà phát triển đơn lẻ

Chúng ta học điều này trong lớp


Phần 2
Hoàn thành quy trình trước khi tham gia khóa học, từ khám phá khóa học đến trang chi tiết

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

Trang chi tiết hiển thị xếp hạng sao và thông tin về người chia sẻ kiến ​​thức, còn nút đăng ký khóa học hoạt động khác nhau tùy thuộc vào việc bạn đã đăng nhập hay chưa và loại khóa học.

Mục 3
Trang khóa học nơi bạn có thể tiết kiệm thời gian xem và tiếp tục xem

Tạo thành phần trình phát video của riêng bạn,
Nó thậm chí còn thực hiện chức năng tiết kiệm thời gian xem và tiếp tục xem .

Ở phần phụ trợ, chúng tôi thiết kế một API để lưu trữ và phản hồi thông tin khóa học .
Ở mặt trước, chúng tôi tạo ra trải nghiệm học tập gần giống với Inflearn thực tế bằng cách cấu hình UI và các nút phát tùy chỉnh hoạt động tùy thuộc vào trạng thái xem .

Mục 4
Chức năng đánh giá và đặt câu hỏi khóa học - Học viên & Người chia sẻ kiến ​​thức

Học sinh để lại xếp hạng và đánh giá,
Bạn có thể đăng ký câu hỏi và nhận câu trả lời.

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

Mục 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 của bạn,
Triển khai thanh toán thực tế bằng cách liên kết PortOne SDKToss Payments .

Khi thanh toán thành công, thông tin sẽ tự động được phản ánh trong danh sách học tập.
Trải nghiệm người dùng hoàn chỉnh bằng cách xem xét toàn bộ luồng thanh toán và các trường hợp ngoại lệ.

Phần 6-7
Từ kinh nghiệm vận hành back-end cấp độ hiện trường đến triển khai thực tế

Tự động thu thập số liệu thống kê hàng ngày bằng chức năng Cron của NestJS và cải thiện tốc độ phản hồi bằng bộ nhớ đệm trong bộ nhớ cho các API thường được gọi.

Kết nối với Sentry để theo dõi lỗi theo thời gian thực
Cấu hình môi trường triển khai thực tế bằng EC2, Docker, GitHub Actions và Route 53 .

Chúng tôi cũng sẽ thực hành kết nối tên miền bằng HTTPS .

📦 Phần 1 và Phần 2 được kết nối như thế này

Bài giảng này là một phần của loạt bài 'Dự án bản sao Inflearn' .
Phần 1 và Phần 2 có thể được thực hiện độc lập với nhau, nhưng
Nếu chúng ta cùng nhau lắng nghe, chúng ta có thể hoàn thành một dịch vụ thực sự từ khâu lập kế hoạch đến phân phối .

Phần 1

Tập trung vào chức năng chia sẻ kiến ​​thức

Chức năng tập trung vào học sinh

Đăng ký lớp học, tạo giáo trình, tải video lên

Phần 2

Khám phá các bài giảng, đăng ký lớp học, xem video, thanh toán và phân phối

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

Xem lịch sử lưu trữ, câu hỏi/đánh giá, API thanh toán, triển khai EC2

🧑‍🎓

Qua lớp học
Bạn có thể có được những thứ này


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

2⃣ Tạo ra khả năng triển khai các chức năng cần thiết cho dịch vụ đầu cuối .

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ụ chất lượng cao bằng cách sử dụng Cursor AI .

5⃣ “Tôi có thể tạo ra ít nhất một dịch vụ mà tôi muốn !” Bạn sẽ có được sự tự tin vững chắc .

🧰

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

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

Mã ví dụ GitHub và tài liệu tham khảo được cung cấp

Các dự án đã hoàn thành có thể được sử dụng như một danh mục đầu tư

🧩

Chuẩn bị trước khi vào lớp

Cơ bản về ngữ pháp Typescript , kinh nghiệm sử dụng React

Hiểu về Git và Node.js

#Next.js #Nest.js #NextJS #NestJS #Fullstack #Fullstack #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #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

Xin chào
Đây là

3,447

Học viên

176

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

3 đánh giá

5.0

3 đánh giá

  • tomorrowcho님의 프로필 이미지
    tomorrowcho

    Đánh giá 15

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    Following Part 1, I've finally completed Part 2! In this Part 2 lecture, technologies I was always curious about (such as video player implementation, shopping cart, payment processing, Sentry integration, etc.) were naturally explained with actual code, which was truly enjoyable and beneficial. As a junior developer, there were many parts I could immediately apply to actual work, and I also enjoyed learning by following along :) The lecture explained the design intentions and reasons for choices, allowing me to go beyond simply typing along and truly "implement with understanding." Thank you for creating such a great lecture! I look forward to your next one 🙌

    • 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

        I'm watching Part 2 lectures following Part 1 lectures and they are very helpful. I'm working as a frontend developer, but learning about backend content makes it easier to understand the overall flow. Thank you for providing such good lectures.

        3.462.471 ₫

        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!