강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

Inflearn Clone Coding Part 1: Hands-on Project Starting with Next.js and NestJS

🔥 This is a practical full-stack course that implements the knowledge sharer functionality exactly as is, from course registration to video upload. Using Next.js 15 and NestJS, you will build along the actual Inflearn flow, covering course creation, curriculum setup, thumbnail and video upload, and detailed introduction writing. You will gain practical, real-world experience, including Prisma modeling, JWT authentication, S3 + CloudFront upload, and Swagger API design.

(4.9) 23 reviews

257 learners

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

Reviews from Early Learners

What you will learn!

  • Latest Full-stack Development Trends (Next.js 15, NestJS, Prisma)

  • Completed 'My Own Inflearn' Platform for Portfolio Use

  • Development of overall real-service features including course registration, modification, video upload, and curriculum editing.

  • Create professional, sleek UIs using Shadcn UI + TailwindCSS + Cursor AI

  • Swagger + OpenAPI-based automated backend call architecture

  • Modeling databases with Prisma and designing PostgreSQL-based architecture

  • S3 + CloudFront-based streaming upload system build

🚀

First in Korea!

Next.js 15 + NestJS Full Stack Clone Coding Course

Are you a student currently attending school?

🔗 Student Discount (-40%) Google Form Link 🔗

🔥 Early bird discount to celebrate the release of Part 2 🔥

👉 Go to Part 2 👈


In this lecture, you will:



A powerful full-stack combination of NextJS and NestJS

Through Prisma , a hot ORM



Creating my own Inflearn

Grow into a full-stack developer with solid fundamentals!


Stop taking pictures ! Experience the real full stack .”

Start your full-stack journey from planning, development, to deployment in just one lecture .

"Let's create a practical Inflearn platform from scratch using the combination of Next.js and NestJS ."

🧩 Next.js + NestJS = Best Single Language Full Stack Combination

Next.js 15 adds server components, App Router, and Server Actions to React-based projects, allowing you to handle everything from screen rendering to simple APIs in a single codebase.

NestJS is written in the same TypeScript, and its dependency injection and modular structure allow you to build a backend that is easy to maintain even as your team grows.

Using the two frameworks together reduces data inconsistencies by allowing the UI and server to share a single type definition , and allows developers to move between the front and back ends without switching languages or toolsets.

🔥 Next.js v15 🔥

🔥 Nest.js v10 🔥

🤔 Why "Inflearn Clone Project" ?

It is difficult to properly experience a full-stack cycle with a small example app. This is because you cannot experience “how the actual service works” with a blog or to-do list that only allows login.

So I decided to create a mini Inflearn that replicates the core flow of Inflearn.
You will experience design → authentication → media processing → permission management all at once by directly implementing the process from member management to course registration, curriculum editing, and uploading videos to S3 and streaming them to CloudFront.

💡 Part 1 Introduction

In this Part 1 lecture,

  • Setting up front-end and back-end projects (Next.js 15 · NestJS · Prisma · Docker)

  • After implementing JWT authentication using Auth.js,

  • Complete knowledge sharing functions (lecture management, curriculum management, detailed page creation, video/thumbnail upload).

  • TailwindCSS · ShadcnUI, Cursor AI are designed to help you quickly style your apps while allowing you to focus on the actual logic and full-stack experience.

  • Upon completing the course, you will have a “platform that allows you to upload and stream lectures,” and you will naturally acquire full-stack capabilities ranging from data modeling to cloud streaming.

In Part 2 , we will build on this foundation by adding functions for exploring lectures, taking classes, reviewing classes, and Q&A , and will finally complete the AWS deployment to complete it as a “ real service that anyone can access .”

We designed the curriculum so that the foundation laid in Part 1 naturally leads to Part 2, so if you take both parts consecutively, you can fully experience the full-stack process from design to operation .

🚀

Everyone taking this course

This is the result that will actually be completed.


🥇 Korea's first! Next.js 15 × NestJS Practical Full Stack Completion

  • App Router, Server Action, etc.
    Hands-on with the latest Next features

  • NestJS Module Architecture & REST API Design

  • Implementing a practical backend with Prisma + PostgreSQL + Swagger


🧑🏻‍💻 My own "Mini Inflearn" that I create

  • Register/edit lectures, write detailed introductions, upload thumbnails

  • Ability to add sections/courses and organize curriculum

  • Directly developed management function exclusively for knowledge sharers


🎥 From video upload to streaming

  • Secure video upload with S3 + CloudFront

  • Implementing video upload + preview using Multer

  • Complete display of real-time upload results


🎨 Pretty UI, fast development

  • Building a Sensational UI with TailwindCSS + ShadcnUI

  • Automate your style and accelerate development with Cursor AI

  • Responsive layout, direct design of common components


🏠

All of this in a practical technology stack.

We are completing it solidly

프론트엔드

  • Next.js 15 – The latest front-end framework

  • TailwindCSS – A CSS library for quick styling

  • Shadcn/UI – A practical UI component library

  • React Query – Server data caching and request state management library

  • Jotai v2 – Intuitive global state management tool


백엔드 · 인프라

  • NestJS – Backend API server framework

  • Prisma – ORM for safe and convenient DB connection

  • PostgreSQL – A relational database with scalability and reliability

  • Docker – A tool for configuring a consistent development and deployment environment

  • AWS S3 / CloudFr

    ont – Cloud infrastructure for storing and quickly transmitting lecture videos


🎯

I highly recommend this to these people!

Beyond a simple to-do app
Proper service
Create and front-end developer

To the portfolio
A project that can be used right away
Job seekers who need to change jobs or prepare for employment

Like a lecture platform
I want to create a real service
Solo developer

We learn this in class


Sections 1-3
Build your foundation and set up your Next + Nest project

Set up the front server with Next.js 15, TailwindCSS, ShadcnUI , Jotai, and React Query.

Prepare the backend and DB at once with NestJS, Prisma, and Docker .
You will also learn practical development workflows using Cursor AI.

Section 4
From login to authentication, just like a real service

Combination of Auth.js (next-auth) and JWT
We implement everything from membership registration, login, session maintenance, and permission protection .

From authentication processing considering SSR/CSR
Get hands-on with a practical authentication system that can be used in real-world situations, including implementing NestJS Auth Guard .

Section 5
Take a look at the Inflearn structure and plan it yourself

Let's first take apart Inflearn to create a real service.

Plan out what functions and data models you need, define models such as Course, Section, and Lecture using Prisma, and create seed data .

Section 6
Implementing knowledge sharing function (lecture management)

We implement the entire flow where knowledge sharers directly register and edit lectures.

Create a detail page using CKEditor
Build a video and thumbnail upload feature with S3 + CloudFront combination. (Streaming also implemented)
Automate API calls with Swagger Codegen .

🧑‍🎓

Through class
You can get these things


1⃣ You can design the project structure yourself from start to finish.

2⃣ The power to implement the functions required for the service end-to-end is created.

3⃣ You can build the necessary infrastructure through AWS .

4⃣ You can build a high-quality service by utilizing Cursor AI .

5⃣ “I can create at least one service that I want !” You will gain a well-founded confidence .

🧰

Lecture Structure

7 sections in total, ~ 15 hours , ~ 50 lectures (lifetime updates)

GitHub example code and references provided

Completed projects can be used as a portfolio

🧩

Preparation before class

Typescript grammar basics, React usage experience

Understanding Git and Node.js

#Next.js #Nest.js #NextJS #NestJS #Fullstack #Fullstack #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #CloneCoding #Node.js #AWS #S3 #Cloudfront

Recommended for
these people

Who is this course right for?

  • No more blogs, To-Do apps! Frontend Developer who wants to directly implement the entire service

  • Junior to mid-level developers wanting hands-on NestJS backend design.

  • Job seekers needing polished projects for career change and portfolio.

  • Hands-on learners eager to master the practical stack A-Z via one lecture

  • Practical student wishing to master single-language full-stack architecture end-to-end.

Need to know before starting?

  • HTML/CSS/JS Basic Syntax

  • Basic React usage experience

Hello
This is

3,479

Learners

176

Reviews

64

Answers

4.9

Rating

6

Courses

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

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

  • (현) 네카라쿠배 재직

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

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

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

Curriculum

All

55 lectures ∙ (14hr 42min)

Course Materials:

Published: 
Last updated: 

Reviews

All

23 reviews

4.9

23 reviews

  • nochikk님의 프로필 이미지
    nochikk

    Reviews 9

    Average Rating 5.0

    Edited

    5

    100% enrolled

    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
      Instructor

      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

    Reviews 3

    Average Rating 5.0

    5

    71% enrolled

    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
      Instructor

      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

    Reviews 2

    Average Rating 5.0

    Edited

    5

    100% enrolled

    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
      Instructor

      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

    Reviews 6

    Average Rating 5.0

    Edited

    5

    100% enrolled

    🎯 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

      Reviews 15

      Average Rating 4.7

      Edited

      5

      100% enrolled

      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! 😊

      $127.60

      lopun's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!