강의

멘토링

로드맵

Inflearn brand logo image
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 tải video lên, đây là một khóa học full-stack thực chiến để triển khai đầy đủ các tính năng của người chia sẻ kiến thức. Sử dụng Next.js 15 và NestJS, bạn sẽ xây dựng theo luồng thực tế của Inflearn, bao gồm tạo khóa học, cấu trúc chương trình giảng dạy, tải ảnh bìa và video lên, viết phần giới thiệu chi tiết. Bạn cũng có thể tích lũy kinh nghiệm thực tế gần với công việc như mô hình hóa Prisma, xác thực JWT, tải lên S3 + CloudFront, thiết kế API Swagger, v.v.

(4.9) 23 đánh giá

257 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 mình' dùng làm portfolio

  • Phát triển toàn diện các chức năng dịch vụ thực tế như đăng ký, chỉnh sửa khóa học, tải video lên, biên tập chương trình học, v.v.

  • Tạo UI chuyên nghiệp, tinh tế với Shadcn UI + TailwindCSS + Cursor AI

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

  • Mô hình hóa cơ sở dữ liệu bằng Prisma và thiết kế kiến trúc dựa trên PostgreSQL

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

🚀

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 🔗

🔥 Giảm giá cho người đặt mua sớm để chào mừng sự ra mắt của Phần 2 🔥

👉 Đến Phần 2 👈


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



Tạo Inflearn của riêng tôi

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 tốt nhất

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

🔥 Next.js v15 🔥

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

Thật khó để trải nghiệm đúng chu kỳ full-stack với một ứng dụng mẫu nhỏ. Điều này là do bạn không thể trải nghiệm "cách dịch vụ thực tế hoạt động" với một blog hoặc danh sách việc cần làm chỉ cho phép đăng nhập.

Vì vậy, tôi quyết định tạo một Inflearn thu nhỏ mô phỏng luồng cốt lõi của Inflearn.
Bạn sẽ trải nghiệm thiết kế → xác thực → xử lý phương tiện → quản lý quyền cùng một lúc bằng cách trực tiếp triển khai quy trình từ quản lý thành viên đến đăng ký khóa học, biên tập giáo trình và tải video lên S3 và phát trực tuyến lên CloudFront.

💡 Phần 1 Giới thiệu

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

  • Thiết lập các dự án front-end và back-end (Next.js 15 · NestJS · Prisma · Docker)

  • Sau khi triển khai xác thực JWT bằng Auth.js,

  • Hoàn thiện các chức năng chia sẻ kiến ​​thức (quản lý bài giảng, quản lý chương trình giảng dạy, tạo trang chi tiết, tải lên video/hình thu nhỏ).

  • TailwindCSS · ShadcnUI, Cursor AI được thiết kế để giúp bạn nhanh chóng định dạng ứng dụng của mình đồng thời cho phép bạn tập trung vào logic thực tế và trải nghiệm toàn diện.

  • Sau khi hoàn thành khóa học, bạn sẽ có một "nền tảng cho phép bạn tải lên và phát trực tuyến bài giảng" và bạn sẽ có được các khả năng đầy đủ, từ mô hình hóa dữ liệu đến phát trực tuyến trên đám mây.

Trong Phần 2 , chúng ta sẽ xây dựng trên nền tảng này bằng cách thêm các chức năng khám phá bài giảng, tham gia lớp học, xem lại lớp học và hỏi đáp , và cuối cùng sẽ hoàn tất triển khai AWS để 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 .

🚀

Mọi người tham gia khóa học này

Đây chính là kết quả thực sự sẽ được hoàn thành.


🥇 Đầu tiên của Hàn Quốc! Next.js 15 × NestJS Thực hành Hoàn thiện Full Stack

  • Bộ định tuyến ứng dụng, Hành động máy chủ, v.v.
    Thực hành với các tính năng mới nhất của Next

  • Kiến trúc mô-đun NestJS & Thiết kế API REST

  • Triển khai phần phụ trợ thực tế với Prisma + PostgreSQL + Swagger


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

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

  • Khả năng thêm các phần/khóa học và tổ chức chương trình giảng dạy

  • Chức năng quản lý được phát triển trực tiếp dành riêng cho những người chia sẻ kiến ​​thức


🎥 Từ tải video lên đến phát trực tuyến

  • Tải video an toàn với S3 + CloudFront

  • Thực hiện tải lên video + xem trước bằng Multer

  • Hiển thị đầy đủ kết quả tải lên theo thời gian thực


🎨 Giao diện người dùng đẹp, phát triển nhanh

  • Xây dựng một giao diện người dùng ấn tượng với TailwindCSS + ShadcnUI

  • Tự động hóa phong cách của bạn và tăng tốc phát triển với Cursor AI

  • Bố cục đáp ứng, thiết kế trực tiếp các thành phần chung


🏠

Tất cả những điều này đều có trong một công nghệ thực tế.

Chúng tôi đang hoàn thiện nó một cách vững chắc

프론트엔드

  • Next.js 15 – Khung front-end mới nhất

  • TailwindCSS – Một thư viện CSS để tạo kiểu nhanh

  • Shadcn/UI – Một thư viện thành phần UI thực tế

  • React Query – Bộ nhớ đệm dữ liệu máy chủ và thư viện quản lý trạng thái yêu cầu

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


백엔드 · 인프라

  • NestJS – Khung máy chủ API Backend

  • Prisma – ORM cho kết nối DB an toàn và thuận tiện

  • PostgreSQL – Cơ sở dữ liệu quan hệ có khả năng mở rộng và độ tin cậy

  • Docker – Một công cụ để cấu hình môi trường phát triển và triển khai nhất quán

  • AWS S3 / Đám mây

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


🎯

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 1-3
Xây dựng nền tảng của bạn và thiết lập dự án Next + Nest của bạn

Thiết lập máy chủ phía trước với Next.js 15, TailwindCSS, ShadcnUI , Jotai và React Query.

Chuẩn bị phần phụ trợ và cơ sở dữ liệu cùng lúc với NestJS, Prisma và Docker .
Bạn cũng sẽ học quy trình phát triển thực tế bằng cách sử dụng Cursor AI.

Mục 4
Từ đăng nhập đến xác thực, giống như một dịch vụ thực sự

Sự kết hợp của Auth.js (next-auth) và JWT
Chúng tôi thực hiện mọi thứ từ đăng ký thành viên, đăng nhập, duy trì phiên và bảo vệ quyền .

Từ quá trình xác thực xem xét SSR/CSR
Thực hành với hệ thống xác thực thiết thực có thể sử dụng trong các tình huống thực tế, bao gồm triển khai NestJS Auth Guard .

Mục 5
Hãy xem cấu trúc Inflearn và tự mình lập kế hoạch

Trước tiên, chúng ta hãy phân tích Inflearn để tạo ra một dịch vụ thực sự.

Lên kế hoạch cho các chức năng và mô hình dữ liệu bạn cần, xác định các mô hình như Khóa học, Phần và Bài giảng bằng Prisma và tạo dữ liệu hạt giống .

Mục 6
Triển khai chức năng chia sẻ kiến ​​thức (quản lý bài giảng)

Chúng tôi triển khai toàn bộ quy trình nơi người chia sẻ kiến ​​thức trực tiếp đăng ký và chỉnh sửa bài giảng.

Tạo trang chi tiết bằng CKEditor
Xây dựng tính năng tải lên video và hình thu nhỏ bằng sự kết hợp S3 + CloudFront . (Phát trực tuyến cũng được triển khai)
Tự động hóa các cuộc gọi API với Swagger Codegen .

🧑‍🎓

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

Tổng cộng có 7 phần , ~ 15 giờ , ~ 50 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?

  • Thôi blog, app to-do! Lập trình viên frontend khát khao tự xây dịch vụ trọn gói.

  • Lập trình viên junior đến middle muốn thành thạo thiết kế backend NestJS qua thực tế.

  • Ứng viên cần dự án chất lượng cao cho việc chuyển việc và portfolio.

  • Học viên chú trọng thực tế, muốn nắm vững stack thực chiến từ A đến Z chỉ với một khóa học.

  • Học viên thực tế muốn nắm vững từ A đến Z kiến trúc full-stack đơn ngữ.

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

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ả

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ả

23 đánh giá

4.9

23 đá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.467.728 ₫

      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!