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

🥇 Implementing 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]] 연동

• Actual payment, exception handling, and reflection 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 complete with CI/CD automation

  
  

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

Create a video player component directly,
and implement watch time saving and resume playback logic.

In the backend, we design APIs that store and respond with course progress information,
while in 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 leave answers to questions.

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

Add courses to the cart,
and integrate PortOne SDK with Toss Payments to implement real payment processing.

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
Professional-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 actual deployment environments using EC2 · Docker · GitHub Actions · Route 53.

We will also practice HTTPS and domain connection together.

Part 1

Knowledge Sharer 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