강의

멘토링

커뮤니티

Programming

/

Full-stack

Inflearn Clone Coding Part 2: From Enrollment to Deployment, Completing the Real Inflearn

🔥 This is a practical full-stack course where you will directly implement the entire process a student experiences, from course enrollment to payment and deployment. By building everything yourself, including course exploration, detail pages, course registration, video viewing, reviews and questions, shopping cart and actual payment, continue watching, and Docker + AWS deployment, you will learn user flows and structural design similar to real services and complete an an advanced full-stack experience.

(4.9) 8 reviews

152 learners

  • lopun
실습 중심
클론코딩
사이드프로젝트
ai활용
도커
AWS
Docker
Next.js
NestJS
Prisma

Reviews from Early Learners

What you will gain after the course

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

  • Complete 'My Own Inflearn' Platform, Portfolio-Ready

  • Full implementation of a user-centric course system, covering course browsing, registration, continuation, and payment.

  • Shadcn UI + TailwindCSS + Cursor AI for Practical, Stylish UI Creation

  • Modeling databases with Prisma and designing PostgreSQL-based architecture

  • Practical deployment methods using AWS and Docker

🚀

First in Korea!

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

Are you currently a student enrolled in school?

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


Through this course, you will


The powerful full-stack combination of NextJS, NestJS and

Through the hot ORM Prisma

Course enrollment · Payment · Distributionall completed

Creating an Inflearn Clone

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

In this course, based on this combination, we will implement the entire full-stack flow from course registration, continue watching, payment, to deployment.

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 allows you to build a backend that is easy to maintain even as your team grows, thanks to dependency injection and modular architecture.

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.

💡 Part 2 Introduction

In this Part 2 course,

  • From searching the course list to implementing detail pages, favorites, and enrollment buttons.

  • Create a course page that includes watch time saving and resume playback features.

  • We will design the course review and Q&A features, and complete the knowledge sharer management UI.

  • Shopping cart, payment API, PortOne (Toss Payments) integration to implement actual payment flow.

  • AWS EC2 deployment, HTTPS connection, and GitHub Actions automation to complete it to operational level.

Based on the project created in Part 1, we'll add features such as course exploration, enrollment, shopping cart, and payment, and
finally complete the AWS deployment to "A 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 complete full-stack process from design to operationentire full-stack journey when taking both parts consecutively.

🚀

In Part 2 of the lecture

You will actually complete the final product!


🥇 Implementation from Course Search to Detail Pages

  • Category, Pagination based course search

  • Star rating and instructor information included detail page

  • Implementing bookmark functionality and course registration / shopping cart features


📺 Implementing a Course Page that Works Like the Real Thing

  • Video Player Component Direct Development

  • Saving viewing time and completing the continue watching feature

  • Custom Play Button Creation Mission Included


📝 Course Review & Q&A System Development

  • Star rating-based course review list and creation UI

  • Complete the flow from question creation/viewing/answering

  • Directly implemented the management page for knowledge sharers


💳 Complete Actual Payment Flow

  • Shopping Cart · Payment API Direct Design

  • [[STRONG_1]]PortOne[[/STRONG_1]] 서버 SDK와 [[STRONG_2]]토스페이먼츠 PG[[/STRONG_2]] 연동

  • Real payment, exception handling, and reflecting in learning list after payment


💻 From Deployment to Monitoring and Infrastructure Automation

  • Sentry integration, daily statistics batch job development,
    In-memory caching and more advanced learning

  • EC2 + Docker + Route53 Deployment Configuration

  • GitHub Actions automation complete with CI/CD


🎯

I strongly recommend this for people like this!

Break away from simple todo apps
and build
a proper service as a frontend developer

Portfolio projects
ready for immediate use
needed by job seekers and career changers

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

Here's what you'll learn in class


Section 2
From course discovery to detail pages, completing the pre-enrollment flow

Implement search functionality including category and pagination features, and create a course list screen and category search page.

The detail page displays ratings and instructor information together, and the enrollment button is configured to behave differently based on login status and course type.

Section 3
Course page with viewing time save & resume functionality

Video player component is created directly,
and viewing time storage and resume playback logic are implemented.

On the backend, we design APIs that store and respond with course progress information,
while on the frontend, we build UI that operates based on viewing status and custom play buttons to create a learning experience close to actual Inflearn.

Section 4
Course Reviews and Q&A Features - Students & Instructors

Students can leave ratings and reviews,
register questions and receive answers

Knowledge sharers can design role-appropriate UIs on the management page to reply to course reviews or answer questions.

Section 5
Developing the Complete Purchase Flow from Shopping Cart to Payment

Add courses to the cart,
and implement real payments by integrating PortOne SDK with Toss Payments.

Upon successful payment, it is automatically reflected in the learning list,
and we complete the user experience by considering the entire payment flow and exceptional situations.

Section 6~7
Production-level backend operations experience and actual deployment

NestJS's Cron feature automatically collects daily statistics, and frequently called APIs improve response speed with in-memory caching.

Integrate Sentry for real-time error monitoring and
directly configure an actual deployment environment using EC2 · Docker · GitHub Actions · Route 53.

We'll also practice HTTPS and domain connection together.

📦 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 Contributor Feature-Focused

Student-centered features

Course registration, curriculum composition, video upload

Part 2

Course exploration, enrollment, video viewing, payment, distribution

JWT authentication, S3 upload, admin page configuration

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

🧑‍🎓

Through this class
you can gain these things


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

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

3⃣ You can build the necessary infrastructure through AWS.

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

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

🧰

Course Structure

A total of 7 sections, 14+ hours of content, 40+ 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?

  • No more blogs, to-do apps! A frontend developer eager to implement an entire service.

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

  • Job seeker needing a polished project for career change and portfolio.

  • Hands-on students who want to learn a practical stack from A to Z in one course

  • A hands-on developer eager to directly implement a Next.js + NestJS-based full-stack architecture.

Need to know before starting?

  • HTML/CSS/JS basic syntax

  • React basic usage experience

  • Understanding REST API and Node.js

Hello
This is

3,673

Learners

213

Reviews

64

Answers

4.9

Rating

7

Courses

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

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

  • (현) 네카라쿠배 재직

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

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

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

Curriculum

All

44 lectures ∙ (14hr 11min)

Course Materials:

Published: 
Last updated: 

Reviews

All

8 reviews

4.9

8 reviews

  • tomorrowcho님의 프로필 이미지
    tomorrowcho

    Reviews 15

    Average Rating 4.7

    5

    100% enrolled

    Following Part 1, I've finally completed Part 2! In this Part 2 lecture, technologies I was always curious about (such as video player implementation, shopping cart, payment processing, Sentry integration, etc.) were naturally explained with actual code, which was truly enjoyable and beneficial. As a junior developer, there were many parts I could immediately apply to actual work, and I also enjoyed learning by following along :) The lecture explained the design intentions and reasons for choices, allowing me to go beyond simply typing along and truly "implement with understanding." Thank you for creating such a great lecture! I look forward to your next one 🙌

    • cafesmallhouse님의 프로필 이미지
      cafesmallhouse

      Reviews 12

      Average Rating 4.6

      5

      100% enrolled

      I personally think this is a really great course. You can understand how the frontend is structured using Cursor, build a backend with a decent scale, learn payment integration with PortOne that you can use in real work, and by completing the missions, you'll have filled out a portfolio piece before you know it. I think this course would be great for both those who already have some development experience and those who are just starting out.

      • pcdoomco6658님의 프로필 이미지
        pcdoomco6658

        Reviews 5

        Average Rating 5.0

        5

        7% enrolled

        I'll enjoy watching this!

        • dsp03136040님의 프로필 이미지
          dsp03136040

          Reviews 2

          Average Rating 4.0

          4

          31% enrolled

          There's a problem with the sound.

          • yoonc017672님의 프로필 이미지
            yoonc017672

            Reviews 7

            Average Rating 5.0

            5

            31% enrolled

            Limited time deal

            $90.20

            29%

            $127.60

            lopun's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!