강의

멘토링

로드맵

BEST
Programming

/

Full-stack

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

🔥 From course registration to video uploads, this is a hands-on full-stack course that implements knowledge creator features just like the real thing. Using Next.js 15 and NestJS, you'll build course creation, curriculum composition, thumbnail and video uploads, and detailed description writing following the actual Inflearn workflow, gaining near-professional experience with Prisma modeling, JWT authentication, S3 + CloudFront uploads, Swagger API design, and more.

(4.8) 32 reviews

288 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)

  • Complete your own 'My Inflearn' platform that can be used as a portfolio

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

  • Creating Professional-Level Sophisticated UI with Shadcn UI + TailwindCSS + Cursor AI

  • Swagger + OpenAPI-based Automated Backend Call Structure Configuration

  • Modeling Database with Prisma and Designing PostgreSQL-based Structure

  • Building a Streaming Upload System Based on S3 + CloudFront

🚀

First in Korea!

Next.js 15 + NestJS Full-Stack Clone Coding Course

[AirPods for Winners + 100% Refund]

🔥 Inflearn Clone 6-Week Completion Challenge (-30% discount available) 🔥
🔗 Go to Challenge

Are you currently a student enrolled in school?

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


Through this course, you will



A powerful full-stack combination of NextJS, NestJS and

Through the hot ORM Prisma


Creating my own Inflearnwhile building it

Grow into a full-stack developer with solid fundamentals!


"No more dabbling! Experience real full-stack development."

Start your full-stack journey to complete planning, development, and deployment with just one course.

"Build a real-world Inflearn platform from scratch using the Next.js + NestJS combination."

🧩 Next.js + NestJS = Single Language Full-Stack Optimal 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 within a single codebase.

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

When using both frameworks together, the UI and server share a single type definition, reducing data inconsistencies, and developers can switch between frontend and backend without changing languages or toolsets.

🔥 Next.js v15 🔥

🔥 Nest.js v10 🔥

🤔 Why "Inflearn Clone Project"?

It's difficult to properly experience a full-stack cycle with small example apps. With just a blog that only has login functionality or a todo list, you can't truly feel "how real services actually work."

So I decided to create a mini Inflearn that directly adopts Inflearn's core workflow.
By directly implementing the process from member management to registering courses, editing curricula, uploading videos to S3, and streaming through CloudFront, you'll experience design → authentication → media processing → permission management all at once.

💡 Part 1 Introduction

In this Part 1 course

  • Frontend and backend project setup (Next.js 15 · NestJS · Prisma · Docker)

  • After implementing JWT authentication using Auth.js

  • Knowledge Sharer features (course management, curriculum management, detail page creation, video·thumbnail upload) are completed.

  • TailwindCSS · ShadcnUI, Cursor AI are utilized to quickly handle styling, allowing you to focus on actual logic and full-stack experience.

  • Upon completing the course, you'll have "a platform capable of uploading lectures and streaming" in your hands, and you'll naturally acquire full-stack capabilities spanning from data modeling to cloud streaming.

Part 2 builds upon this foundation by adding course search, enrollment, reviews, and Q&A features, and finally completes the project with AWS deploymentA real service that anyone can access" to complete it.

The curriculum is designed so that the foundation built in Part 1 naturally connects to Part 2, allowing you to fully experience the entire process from design to operation - the complete full-stack journey - by taking both parts consecutively.

🚀

Everyone taking this course

You will actually complete such results


🥇 First in Korea! Complete Next.js 15 × NestJS Full-Stack Mastery

  • App Router, Server Action and other
    hands-on practice with the latest Next features

  • NestJS Module Architecture & REST API Design

  • Implementing a Production Backend with Prisma + PostgreSQL + Swagger


🧑🏻‍💻 Creating My Own "Mini Inflearn"

  • Course registration/editing, detailed description writing, thumbnail upload

  • Add Section/Lecture and Curriculum Configuration Features

  • Direct development of exclusive admin features for knowledge sharers


🎥 From Video Upload to Streaming

  • S3 + CloudFront secure video upload

  • Multer Video Upload + Preview Implementation

  • Real-time upload result display completed


🎨Beautiful UI, Fast Development

  • Compose sensual UI with TailwindCSS + ShadcnUI

  • Cursor AI for Style Automation and Rapid Development

  • Responsive layout, direct design of common components


🏠

All of this with production-level tech stackskills

Let's build it up solidly

Frontend

  • Next.js 15 – The Latest Frontend Framework

  • TailwindCSS – A CSS library that allows you to apply styles quickly

  • Shadcn/UI – Practical UI Component Library

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

  • Jotai v2 – Intuitive Global State Management Tool


Backend · Infrastructure

  • NestJS – Backend API Server Framework

  • Prisma – Safe and convenient ORM for DB connections

  • PostgreSQL – A relational database with scalability and stability

  • Docker – A tool for creating consistent development and deployment environments

  • AWS S3 / CloudFr

    ont – Cloud infrastructure for storing lecture videos and fast transmission


🎯

I highly recommend this for people like this!

Beyond simple todo apps
Build a proper service
as a frontend developer

Portfolio-ready projects
for job seekers and career changers
who need them

Lecture platform and other
real services you want to build
Solo developer

Here's what you'll learn in class


Sections 1~3
Building fundamentals and setting up Next + Nest projects

Next.js 15, TailwindCSS, ShadcnUI, Jotai, React Query - setting up the front-end server,

NestJS, Prisma, Docker - prepare both backend and database all at once.
Learn practical development workflows using Cursor AI as well.

Section 4
From Login to Authentication Like a Real Service

Auth.js (next-auth) combined with JWT
implements everything from user registration, login, session management, to authorization protection.

SSR/CSR authentication processing considerations to
NestJS Auth Guard implementation - master practical authentication systems ready for real-world use.

Section 5
Analyzing Inflearn's Structure and Planning It Yourself

We'll first take apart Inflearn to create a real service.

Plan what features and data models are needed, define models like Course, Section, Lecture directly with Prisma, and create Seed data as well.

Section 6
Knowledge Sharer Feature Implementation (Course Management)

Knowledge sharers implement the entire flow for directly registering and modifying lectures.

Create detailed pages using CKEditor
Build video and thumbnail upload functionality with the S3 + CloudFront combination. (Streaming implementation included)
Automate API calls with Swagger Codegen as well.

📦 Part 1 and Part 2 are connected like this

This course is part of the 'Inflearn Clone Project' series.
Part 1 and Part 2 can be taken independently,
but taking them together allows you to complete a real service from planning to deployment.

Part 1

Knowledge Creator Feature-Focused

Student-centered features

Course registration, curriculum composition, video upload

Part 2

Course search, enrollment, video viewing, payment, distribution

JWT authentication, S3 upload, admin page configuration

Viewing history storage, Q&A/reviews, payment API, EC2 deployment

🧑‍🎓

Through the class
you can gain these things


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

2⃣ You'll develop the ability to implement the features needed for your service End-to-End with implementation power.

3⃣ You can build the necessary infrastructure through AWS.

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

5⃣ You'll develop well-founded confidence that "I can create at least one service I want myself!"

🧰

Course Structure

A total of 7 sections, ~15 hours of content, ~50 lectures (lifetime updates)

GitHub example code and reference materials provided

The completed project can be used as a portfolio

🧩

Pre-Course Preparation

TypeScript syntax basics, React usage experience

Understanding Git, Node.js

#Next.js #Nest.js #NextJS #NestJS #Fullstack #풀스택 #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #클론코딩 #Node.js #AWS #S3 #Cloudfront

Recommended for
these people

Who is this course right for?

  • Stop with blogs and todo apps! Frontend developers who want to implement entire services from scratch

  • Junior to mid-level developers who want to learn NestJS backend design through hands-on practice

  • Job seekers who need high-quality projects for career transitions and portfolios

  • Students who want to learn practical stacks from A to Z through a single course and are oriented toward real-world application

  • Practical-oriented students who want to learn single-language-based full-stack architecture from start to finish

Need to know before starting?

  • HTML/CSS/JS Basic Syntax

  • React Basic Usage Experience

  • Understanding REST API and Node.js

Hello
This is

3,579

Learners

200

Reviews

64

Answers

4.9

Rating

7

Courses

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

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

  • (현) 네카라쿠배 재직

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

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

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

Curriculum

All

55 lectures ∙ (14hr 42min)

Course Materials:

Published: 
Last updated: 

Reviews

All

32 reviews

4.8

32 reviews

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

    Reviews 9

    Average Rating 5.0

    Edited

    5

    100% enrolled

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

    • 로펀
      Instructor

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

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

    Reviews 3

    Average Rating 5.0

    5

    71% enrolled

    Part1과 Part2를 함께 구매했습니다. 실무자로써 현재 회사에 도입할 기술력을 모색 중 nest와 next 프레임워크를 사용한 기술이 필요하여 도입하려 합니다. 강의를 통하여 여러 기술들을 알게되고 접목시키고 있습니다. 흐름도 좋고, 사용하는 라이브러리들이나 어떻게든 되는 프로젝트가 아니라, 효율적으로 개발/관리/운영에 직접적인 영향을 주는 구성 이라고 생각하여 강의는 만점 중 백만점 입니다. 좋은 강의에 감사드립니다. 근데 선생님... 선생님이 알고 계시는 것을 저희 수강생들은 모르기 때문에 배우고싶기에 강의를 듣고 있지요... 이 강의는 초급이 아니옵니다... 수강하시는 대부분은 아마 공식문서를 보아도 "도대체 내가 뭘 봐야 하나?" 라는 생각을 해요.. 잘 모르니까요...ㅎ 갑자기 "이 부분이 이 부분을 대체하니까 지우겠습니다." 라는 말씀을 하시면 수강생 대부분은 이 부분과 이 부분이 도대체 뭔지를 한참 생각해야 하고, 찾아내는 것에 굉장히 힘듬을 느끼게 되는 거 같아요.. 선생님의 강의가 좋습니다. 제가 필요로 하는 것, 제가 원하는 것들을 전부 구성해주고 계세요. 조.. 조금만, 아주 조금만요. 아직 혼자 숨쉬는 것도 잘 못하는 "못난 감자"들이 수강하고 있다고 생각해주시면 감사하겠습니다.

    • 로펀
      Instructor

      좋은 의견 남겨주셔서 감사합니다! 말씀주신 내용을 반영해서 초보자 분들도 비교적 더 쉽게 따라오실 수 있도록 노력하겠습니다 :) 궁금하신 점이나 막히시는 부분이 있다면 언제든지 슬랙으로 문의 부탁드립니다. 완강까지 화이팅입니다!

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

    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도 더 알차게 준비 중이니 기대해주세요 😊

    $127.60

    lopun's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!