강의

멘토링

커뮤니티

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

293 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,589

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

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