Inflearn brand logo image
Inflearn brand logo image
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) 15 reviews

198 students

AWS
Docker
Next.js
NestJS
Prisma

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

Students

153

Reviews

58

Answers

4.9

Rating

6

Courses

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

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

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

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

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

Curriculum

All

55 lectures ∙ (14hr 42min)

Course Materials:

Published: 
Last updated: 

Reviews

All

15 reviews

4.9

15 reviews

  • 치현님의 프로필 이미지
    치현

    Reviews 9

    Average Rating 5.0

    Edited

    5

    100% enrolled

    프론트엔드 개발을 하고 있고, 백엔드도 두드려보고 싶었던 상태인데, 로펀님의 Next.js 풀스택 강의를 좋게 들었던 기억에 수강하게 되었습니다. 개인적으로 인프런같은사이트를 만들어보고 싶어서, 인프런의 강의데이터들을 크롤링해도 되냐고 공식적으로 문의했다가 반려당하기도 했었는데, 제 바램을 이번 강의로 이룰 수 있었던 것 같습니다. Nest.js를 처음 접하는 사람으로서, 프로젝트를 진행하면 이런 식으로 구성하면 되겠다는 감을 잡을 수 있는 강의었고, "인프런 프로덕트 둘러보기"라는 기획 부분도 포함되어있어 아키텍쳐나 구조를 고민해볼 수 있었던 것 같습니다. Part1에는 배포가 포함되어 있지 않아서 다소 아쉽지만, 빨리 Part2가 나온다면 배포까지 곁들인 완성된 포트폴리오를 가져가고 싶네요 ㅎㅎ

    • 로펀
      Instructor

      치현님, 정성스러운 수강평 정말 감사드립니다! 인프런 같은 사이트를 직접 만들어보고 싶다는 바람을 이번 강의로 조금이나마 실현하셨다니 기쁩니다 ㅎㅎ Nest.js를 처음 접하셨다고 하셨지만, 구조를 이해하고 감을 잡으셨다니 강의를 만든 입장에서도 뿌듯하네요! 말씀주신 대로 Part1에는 배포가 포함되어 있지 않아 아쉬움이 있으셨을 것 같은데요, Part2에 배포와 함께 더욱 완성도 높은 포트폴리오를 구성하실 수 있도록 최대한 잘 준비해보겠습니다. 기대해 주세요! 😊 다시 한 번 소중한 수강평 감사드립니다!

  • 찬우 이님의 프로필 이미지
    찬우 이

    Reviews 2

    Average Rating 5.0

    Edited

    5

    100% enrolled

    저는 프론트엔드 개발자가 되기 위해 공부 중인데, 이전에 로펀님의 supabase 강의를 듣고 많은 도움이 되어 이번 클론코딩 강의도 수강하게 되었습니다. 팀 프로젝트를 할 때 백엔드 분께 API를 받아 스웨거를 참고해 프론트 코드를 작성하면서, 항상 백엔드에서는 어떤 로직으로 데이터가 흘러가는지 궁금했는데, 이번 강의를 통해 그 흐름을 직접 경험해볼 수 있어서 정말 유익했습니다. NestJS, Prisma 등 처음 접하는 기술도 많아 어려운 부분이 있었지만, 강사님이 실무에서 자주 쓰는 최신 기술들을 잘 설명해주시고 노션에도 정리가 잘 되어 있어 따라가기가 수월했습니다. Shadcn UI, TailwindCSS, S3 등 여러 도구를 활용해보는 과정도 흥미로웠고, 실무에서 바로 쓸 수 있는 팁과 노하우를 많이 배울 수 있었습니다. 특히, 프론트와 백엔드가 어떻게 연결되고 전체적으로 어떤 구조로 동작하는지 직접 구현해보면서 풀스택 개발에 대한 이해도가 확실히 높아졌습니다. 포트폴리오로 활용할 만한 완성도 높은 프로젝트를 만들고 싶은 분이나, 실무 지향적인 풀스택 개발을 배우고 싶은 분들에게 이 강의를 추천합니다!

    • 로펀
      Instructor

      소중한 수강평 감사합니다 찬우님! 강의가 유익했다고 해주시니 많이 보람차네요 ㅎㅎ 끝까지 수강하시느라 너무 수고 많으셨습니다. 행복한 하루 보내시길 바랍니다! :)

  • Rach님의 프로필 이미지
    Rach

    Reviews 6

    Average Rating 5.0

    Edited

    5

    100% enrolled

    🎯프론트엔드 개발자도 부담 없이 풀스택 흐름을 익힐 수 있는 강의 프론트엔드 개발을 하면서 백엔드 지식의 필요성을 느껴 이전에 "프론트 개발자를 위한 백엔드 101" 강의를 수강했는데, 만족도가 높아 이번 강의도 바로 이어서 듣게 되었습니다. 이 강의는 단순한 기능 구현을 넘어서, Next.js 15, NestJS, Prisma, React Query, TailwindCSS, Cursor AI, Jotai 등 최신 기술 스택의 이론을 먼저 짚고 넘어가주기 때문에 초급자도 충분히 따라갈 수 있는 구성이었습니다. 실제 서비스를 클론하면서 하나하나 기능을 구현해보니, 프론트엔드 개발자로서 백엔드 흐름을 함께 이해하고 싶은 분들에게 매우 적합한 강의라고 느꼈습니다. 특히 인상 깊었던 부분은 ✅ Prisma를 활용한 API 구현과 PostgreSQL 기반의 데이터베이스 모델링 ✅ Swagger + OpenAPI 기반의 자동화된 백엔드 호출 구조 구성 ✅ AWS S3 + CloudFront 기반의 영상 스트리밍 업로드 시스템 구축 등 실무에서 바로 써먹을 수 있는 수준의 구체적인 구현 내용이 많았다는 점입니다. 또한, 학습 중 궁금한 점이나 피드백이 필요한 부분은 Slack 채널을 통해 질문을 남기면 답변을 받을 수 있어 학습 환경도 매우 만족스러웠습니다. 다만 아쉬운 점은 CKEditor 관련 이슈로 인해 영상 순서가 매끄럽지 못한 부분이 있었던 점입니다. 큰 흐름에는 지장이 없지만, 조금 헷갈렸습니다. 👉 프론트엔드에서 백엔드까지 아우르는 프로젝트 경험을 쌓고 싶은 분들에게 적극 추천드리는 강의입니다. ⭐⭐⭐⭐⭐ 실무 감각, 기술 스택, 클론 대상 모두 만족스러웠습니다.

    • 조내일님의 프로필 이미지
      조내일

      Reviews 15

      Average Rating 4.7

      Edited

      5

      100% enrolled

      Next.js 기반이라 익숙하게 시작할 수 있었고, NestJS랑 Prisma는 처음이었지만 흥미롭게 다뤄볼 수 있었어요. 실제 서비스 같은 클론 프로젝트라 실무 감각도 키울 수 있어서 만족스러웠어요! Part 2도 기대됩니당! 😊

      • 로펀
        Instructor

        소중한 수강평 감사합니다 조내일님! Next.js에 익숙한 분들이라면 시작이 조금 더 수월하셨을 텐데, NestJS와 Prisma도 잘 따라와 주셔서 다행이에요 ㅎㅎ 클론 프로젝트가 실제 흐름을 익히는 데 도움이 되었다니 뿌듯합니다. Part 2도 더 알차게 준비 중이니 기대해주세요 😊

    • 주구름님의 프로필 이미지
      주구름

      Reviews 2

      Average Rating 5.0

      5

      100% enrolled

      강의 구성은 좋아요~ Nest.js와 Next.js를 함께 효과적으로 배울 수 있었던 것 같습니다.

      • 로펀
        Instructor

        소중한 수강평 감사드립니다! 마지막 미션까지 총 4개의 미션을 모두 완료해주셨는데 너무 고생 많으셨습니다 ㅎㅎ Part 2 강의에서 더 좋은 모습으로 다시 인사드리겠습니다.

    lopun's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!