강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

Inflearn Clone Coding Part 1: Dự án thực tế bắt đầu với Next.js và NestJS

🔥 Từ đăng ký khóa học đến upload video, đây là khóa học fullstack thực chiến triển khai nguyên bản các tính năng của người chia sẻ kiến thức. Sử dụng Next.js 15 và NestJS để tạo khóa học, cấu thành curriculum, upload thumbnail và video, viết giới thiệu chi tiết theo đúng quy trình của Inflearn, giúp bạn tích lũy kinh nghiệm gần với thực tế thông qua Prisma modeling, JWT authentication, S3 + CloudFront upload, thiết kế Swagger API.

(4.8) 32 đánh giá

293 học viên

  • lopun
실습 중심
인프런
AWS
Docker
Next.js
NestJS
Prisma

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

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 thành nền tảng 'Inflearn của riêng tôi' có thể sử dụng làm portfolio

  • Phát triển toàn bộ các tính năng dịch vụ thực tế như đăng ký khóa học, chỉnh sửa, tải lên video, chỉnh sửa chương trình giảng dạy

  • Tạo UI cảm giác chuyên nghiệp với Shadcn UI + TailwindCSS + Cursor AI

  • Cấu trúc gọi backend tự động hóa dựa trên Swagger + OpenAPI

  • Thiết kế mô hình cơ sở dữ liệu với Prisma và cấu trúc dựa trên PostgreSQL

  • Xây dựng hệ thống upload streaming dựa trên S3 + CloudFront

🚀

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

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

[Tặng AirPods khi chiến thắng + Hoàn tiền 100%]

🔥 Thử thách hoàn thành bản sao Inflearn trong 6 tuần (Đang giảm giá 30%) 🔥
🔗 Đi đến thử thách ngay

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


Tạo Inflearn của riêng mìnhtrong quá trình xây dựng

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 là đủ 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, đế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ữ

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, 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ụ.

🔥 Next.js v15 🔥

🔥 Nest.js v10 🔥

🤔 Tại sao lại là "Dự án nhân bản Inflearn"?

Với các ứng dụng ví dụ nhỏ thì khó có thể trải nghiệm đúng nghĩa một chu kỳ fullstack hoàn chỉnh. Bởi vì chỉ với blog có chức năng đăng nhập hoặc danh sách todo thì không thể cảm nhận được "dịch vụ thực tế hoạt động như thế nào" một cách trực quan.

Vì vậy tôi đã quyết định tạo ra một mini Inflearn bằng cách chuyển nguyên xi luồng cốt lõi của Inflearn.
Từ quản lý thành viên đến đăng ký khóa học, chỉnh sửa chương trình giảng dạy, tải video lên S3 rồi streaming qua CloudFront, thông qua việc trực tiếp triển khai các quy trình này, bạn sẽ trải nghiệm một lần thiết kế → xác thực → xử lý media → quản lý quyền.

💡 Part 1 Giới thiệu

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

  • Thiết lập dự án frontend và backend (Next.js 15 · NestJS · Prisma · Docker)

  • Sau khi triển khai xác thực JWT bằng cách sử dụng Auth.js

  • Chức năng người chia sẻ kiến thức (quản lý bài giảng, quản lý chương trình học, viết trang chi tiết, tải lên video·thumbnail) được hoàn thành.

  • TailwindCSS · ShadcnUI, Cursor AI được sử dụng để tiến hành styling nhanh chóng và được thiết kế để tập trung vào logic thực tế cũng như trải nghiệm fullstack.

  • Sau khi hoàn thành khóa học, bạn sẽ có trong tay "nền tảng có thể đăng tải bài giảng và streaming", đồng thời tự nhiên thu được năng lực fullstack từ mô hình hóa dữ liệu đến streaming trên cloud.

Part 2에서는 trên nền tảng này sẽ xây dựng các tính năng tìm kiếm khóa học·học tập·đánh giá·Q&A, và cuối cùng hoàn thành việc triển khai AWSDị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 tiếp 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.

🚀

Tất cả những người tham gia khóa học này

Bạn sẽ thực sự hoàn thành sản phẩm như thế này


🥇 Đầu tiên tại Hàn Quốc! Hoàn thành thực chiến Full-stack Next.js 15 × NestJS

  • App Router, Server Action và các
    tính năng Next mới nhất thực hành

  • Kiến trúc module NestJS & Thiết kế REST API

  • Prisma + PostgreSQL + Swagger để triển khai backend thực tế


🧑🏻‍💻 "Mini Inflearn" của riêng tôi do tôi tạo ra

  • Đăng ký/chỉnh sửa khóa học, viết giới thiệu chi tiết, tải lên hình thu nhỏ

  • Thêm phần/bài giảng và tính năng cấu trúc chương trình học

  • Phát triển trực tiếp tính năng quản trị viên chuyên dụng cho người chia sẻ kiến thức


🎥 Từ tải lên video đến streaming

  • S3 + CloudFront để tải lên video được xử lý bảo mật

  • Triển khai upload video + xem trước sử dụng Multer

  • Hoàn thành hiển thị kết quả tải lên theo thời gian thực


🎨 UI đẹp mắt, phát triển nhanh chóng

  • TailwindCSS + ShadcnUI để tạo giao diện người dùng tinh tế

  • Cursor AI để tự động hóa style và phát triển nhanh

  • Thiết kế trực tiếp layout responsive và component chung


🏠

Tất cả những điều này với công nghệ stack cấp độ thực tếbằng

Hoàn thiện một cách vững chắc

Frontend

  • Next.js 15 – Framework frontend mới nhất

  • TailwindCSS – Thư viện CSS giúp tạo kiểu nhanh chóng

  • Shadcn/UI – Thư viện component UI thực tế

  • React Query – Thư viện quản lý trạng thái yêu cầu và cache dữ liệu server

  • Jotai v2 – Công cụ quản lý trạng thái toàn cục trực quan


Backend · Hạ tầng

  • NestJS – Framework máy chủ API backend

  • Prisma – ORM an toàn và tiện lợi để kết nối DB

  • PostgreSQL – Cơ sở dữ liệu quan hệ có tính mở rộng và ổn định

  • Docker – Công cụ thiết lập môi trường phát triển và triển khai nhất quán

  • AWS S3 / CloudFr

    ont – Cơ sở hạ tầng đám mây để lưu trữ video bài giảng và truyền tải nhanh chóng


🎯

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

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


Phần 1~3
Xây dựng nền tảng cơ bản và thiết lập dự án Next + Nest

Next.js 15, TailwindCSS, ShadcnUI, Jotai, React Query để thiết lập front-end server,

NestJS, Prisma, Docker để chuẩn bị cả backend và DB cùng một lúc.
Cùng học quy trình phát triển thực tế sử dụng Cursor AI.

Phần 4
Từ đăng nhập đến xác thực như dịch vụ thực tế

Auth.js(next-auth) kết hợp với JWT để
triển khai đầy đủ đăng ký, đăng nhập, duy trì phiên và bảo vệ quyền.

SSR/CSR từ xử lý xác thực có xem xét đến
NestJS Auth Guard cho đến việc áp dụng, làm quen với hệ thống xác thực có thể sử dụng ngay trong thực tế.

Phần 5
Phân tích cấu trúc Inflearn và thực hành lập kế hoạch trực tiếp

Để tạo ra một dịch vụ thực sự, trước tiên chúng ta sẽ phân tích Inflearn.

Hãy tự lập kế hoạch xem cần những tính năng và mô hình dữ liệu nào, tự định nghĩa các mô hình như Course, Section, Lecture bằng Prisma và tạo cả Seed 데이터 nữa nhé.

Phần 6
Triển khai chức năng người chia sẻ kiến thức (quản lý bài giảng)

Triển khai toàn bộ quy trình để người chia sẻ kiến thức trực tiếp đăng ký và chỉnh sửa bài gi강.

Sử dụng CKEditor để tạo trang chi tiết và
xây dựng tính năng upload video và thumbnail với sự kết hợp S3 + CloudFront. (Cũng triển khai streaming)
Tự động hóa việc gọi API với Swagger Codegen.

📦 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ên 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 tính 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

Khám phá 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ể được 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ụ theo 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를 구축할 수 있습니다.

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, ~15 giờ nội dung, ~50 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?

  • Blog, ứng dụng todo thôi đủ rồi! Dành cho các lập trình viên frontend muốn tự tay triển khai toàn bộ dịch vụ

  • Các lập trình viên junior~middle muốn học thiết kế backend NestJS thông qua thực hành

  • Sinh viên chuẩn bị việc làm cần dự án hoàn thiện chất lượng cao để chuyển việc và làm portfolio

  • Học viên hướng thực tiễn muốn học từ A đến Z về stack thực tế thông qua một khóa học

  • Học viên hướng thực tiễn muốn nắm vững cấu trúc fullstack dựa trên ngôn ngữ đơn từ đầu đến cuối

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 cơ bản React

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

Xin chào
Đây là

3,587

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ả

55 bài giảng ∙ (14giờ 42phú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ả

32 đánh giá

4.8

32 đánh giá

  • nochikk님의 프로필 이미지
    nochikk

    Đánh giá 9

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    I am currently a frontend developer and had been wanting to try backend development as well. Remembering the positive experience I had with Ropan-nim's Next.js full-stack course, I decided to enroll in this one. Personally, I had wanted to create a site like Inflearn and had even officially inquired if I could crawl Inflearn's course data, but it was rejected. It seems I was able to fulfill that wish through this course. As someone new to Nest.js, this course helped me grasp how a project could be structured if I were to develop one. Because it also included a planning section titled "Exploring the Inflearn Product," I think I was able to contemplate the architecture and structure. Although it's a bit disappointing that deployment isn't included in Part 1, if Part 2 comes out quickly, I'd like to have a complete portfolio including deployment 😊😊.

    • lopun
      Giảng viên

      Chihyun, thank you so much for your thoughtful course review! I'm happy to hear that this course helped you realize your wish of wanting to build a site like Inflearn yourself, even just a little bit 😊😊 You mentioned you were new to Nest.js, but it's rewarding from the course creator's perspective that you were able to understand the structure and get the hang of it! As you mentioned, I understand you might have felt a bit disappointed that deployment wasn't included in Part1. I'll do my best to prepare well so that you can build a more complete portfolio with deployment in Part2. Please look forward to it! 😊 Thank you once again for your valuable course review!

  • upustream6450님의 프로필 이미지
    upustream6450

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    71% đã tham gia

    I purchased both Part1 and Part2 together. As a working professional, I'm currently exploring technologies to introduce to my company and need to implement technologies using nest and next frameworks. Through the lectures, I'm learning about various technologies and applying them. The flow is good, and rather than being a project that somehow just works with whatever libraries, I think it's a configuration that directly impacts efficient development/management/operations, so the lecture gets a million points out of a perfect score. Thank you for the excellent lecture. But teacher... We students don't know what you know, which is why we want to learn and are taking the lectures... This lecture is not beginner level... Most students probably think "What on earth am I supposed to look at?" even when looking at official documentation... because we don't know much...😊 When you suddenly say "I'll delete this part because this part replaces that part," most students have to think for a long time about what "this part" and "that part" actually are, and it seems they feel great difficulty in figuring it out... Your lectures are good. You're providing everything I need and everything I want. Just... just a little bit, a very little bit. I would be grateful if you could think of us as "poor potatoes" who can't even breathe on our own yet.

    • lopun
      Giảng viên

      Thank you for leaving such great feedback! I'll work hard to reflect your suggestions so that beginners can follow along more easily :) If you have any questions or get stuck on anything, please feel free to reach out on Slack anytime. Fighting until you complete the course!

  • chanwoolee747485님의 프로필 이미지
    chanwoolee747485

    Đánh giá 2

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    I am currently studying to become a frontend developer. Ро펀's previous supabase course was very helpful, which led me to take this clone coding course as well. When working on team projects, I would receive APIs from the backend team and write frontend code referencing Swagger. I was always curious about the data flow logic on the backend side, and this course was really beneficial as I could experience that flow firsthand. There were difficult parts as I encountered many new technologies like NestJS and Prisma for the first time. However, the instructor explained the latest technologies frequently used in practice very well, and the material was well-organized on Notion, making it easy to follow. The process of using various tools like Shadcn UI, TailwindCSS, and S3 was also interesting, and I learned many tips and know-how that can be immediately used in real work. Specifically, by directly implementing how the frontend and backend are connected and how the overall structure operates, my understanding of full-stack development has definitely increased. I recommend this course to anyone who wants to create a high-quality project that can be used for a portfolio, or those who want to learn practice-oriented full-stack development!

    • lopun
      Giảng viên

      Thank you for your valuable course review, Chanwoo! I feel very rewarded that you found the lecture beneficial. 😊😊 Thank you for your hard work completing the course. I hope you have a happy day! :)

  • rach님의 프로필 이미지
    rach

    Đánh giá 6

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    🎯 A course that allows frontend developers to easily learn the full-stack flow As I developed in frontend and felt the need for backend knowledge, I previously took the "Backend 101 for Frontend Developers" course. Since I was highly satisfied, I decided to take this course immediately afterwards. This course goes beyond simple feature implementation. It first covers the theory of the latest technology stack including Next.js 15, NestJS, Prisma, React Query, TailwindCSS, Cursor AI, and Jotai, making it suitable for beginners to follow. Implementing each feature while cloning a real service, I felt this course is highly appropriate for frontend developers who want to understand the backend flow together. Particularly impressive were: ✅ API implementation using Prisma and database modeling based on PostgreSQL ✅ Configuration of an automated backend call structure based on Swagger + OpenAPI ✅ Building a video streaming upload system based on AWS S3 + CloudFront There was a lot of specific implementation content at a level that can be directly used in practice. Furthermore, I was very satisfied with the learning environment as I could ask questions or get feedback on points I was curious about during learning via the Slack channel and receive answers. However, one drawback was that the video order was not smooth in some parts due to CKEditor related issues. It didn't affect the overall flow significantly, but it was a bit confusing. 👉 I highly recommend this course for those who want to gain project experience covering both frontend and backend. ⭐⭐⭐⭐⭐ Satisfied with practical sense, technology stack, and cloning target.

    • tomorrowcho님의 프로필 이미지
      tomorrowcho

      Đánh giá 15

      Đánh giá trung bình 4.7

      Đã chỉnh sửa

      5

      100% đã tham gia

      Since it was based on Next.js, I could start comfortably, and although NestJS and Prisma were new, I found them interesting to work with. Because it's a clone project like a real service, I was satisfied that I could develop practical skills as well! I'm also looking forward to Part 2! 😊

      3.460.894 ₫

      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!