강의

멘토링

로드맵

Programming

/

Full-stack

Inflearn クローンコーディング Part 2: 受講から配布まで、本物の Inflearn 完成させる

🔥 講義受講から決済、デプロイまで、受講生が経験する全過程をそのまま実装してみる実践フルスタック講義です。講義探索、詳細ページ、受講申込、動画視聴、受講レビュー・質問、カート・実決済、続きを見る、Docker + AWSデプロイまで、すべて自分で作り、実サービスに近いユーザーフローと構造設計を学び、高度なフルスタック経験を完成させます。

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

こんなことが学べます

  • 最新のフルスタック開発の流れ (Next.js 15, NestJS, Prisma)

  • ポートフォリオとして活用可能な「自分だけのInflearn」プラットフォーム完成

  • 講義の検索から受講申し込み、続き視聴、決済まで、ユーザー中心の受講システムを全体実装

  • Shadcn UI + TailwindCSS + Cursor AIで実務レベルのセンスの良いUI制作

  • PrismaによるデータベースモデリングとPostgreSQLベースの構造設計

  • AWSとDockerを活用した実践的なデプロイ方法

🚀

国内初!

Next.js 15 + NestJS フルスタッククローンコーディング講座

[優勝時エアポッド贈呈 + 100%返金]

🔥 Inflearn クローン 6週間完成チャレンジ (-30% 割引中) 🔥
🔗 チャレンジ こちらから

もしかして学校に在学中の学生さんですか?

🔗 学生割引(-40%) Googleフォームリンク🔗


この講義を通じて皆さんは


強力なフルスタック組み合わせであるNextJS、NestJS

話題のORMであるPrismaを通じて

受講・決済・配布まで完成した

Inflearnクローンを作りながら

しっかりとした基礎力を持つフルスタック開発者として成長します!

"つまみ食いはもうやめて!本物のフルスタックを体験してください。"

たった一つの講義企画、開発、デプロイまで完成するフルスタックの旅を始めましょう。

"Next.js + NestJSの組み合わせで実務に近いInflearnプラットフォームを最初から直接作ってみます。"

🧩 Next.js + NestJS = 単一言語フルスタック最適の組み合わせ

この講義では、この組み合わせをベースに受講申込、続きから視聴、決済および配布まで、フルスタック全体のフローを実装します。

Next.js 15は、Reactベースのプロジェクトにサーバーコンポーネント・App Router・Server Actionsを追加し、画面レンダリングから簡単なAPIまで一つのコードベースで処理できるようにしてくれます。

NestJSは同じTypeScriptで書かれており、依存性注入とモジュール式構造のおかげでチーム規模が大きくなっても保守しやすいバックエンドを構築することができます。

2つのフレームワークを一緒に使うと、UIとサーバーが1つの型定義を共有してデータの不整合を減らし、開発者は言語・ツールセットの切り替えなしにフロントエンドとバックエンドを行き来できます。

💡 Part 2 紹介

今回のPart 2講座では

  • 講義リスト検索から詳細ページ、お気に入り、受講申込ボタンまで実装します。

  • 視聴時間の保存と続きから再生機能が含まれた受講ページを作成します。

  • 受講レビューと質問機能を設計し、知識共有者管理UIまで完成します。

  • ショッピングカート、決済API、PortOne(トスペイメンツ)連携を通じて実際の決済フローを実装します。

  • AWS EC2デプロイ、HTTPS接続、GitHub Actions自動化で運用レベルまで完成します。

Part 1で作成したプロジェクトをベースに講座検索、受講、カート、決済などの機能を追加し、
最終的にAWS デプロイまで完了して誰でもアクセスできる本物のサービス"で完成します。

Part 1で築いた基礎がPart 2へ自然に繋がるようにカリキュラムを設計したので、両パートを連続して受講すれば設計から運営までフルスタック全過程を完全に体験することができます。

🚀

Part 2の講義では

以下の成果物を実際に完成させることになります!


🥇 講義検索から詳細ページまでの実装

  • カテゴリ、ページネーションベースの講義検索

  • 評価と知識共有者情報を含む詳細ページ

  • お気に入り機能と受講申込 / ショッピングカート機能の実装


📺 実際のように動作する受講ページの実装

  • ビデオプレーヤーコンポーネントの直接開発

  • 視聴時間保存と続きから再生機能の完成

  • カスタム再生ボタン制作ミッション含む


📝受講レビュー・質問システム構築

  • 星評価ベースの受講レビュー一覧および作成UI

  • 質問作成/照会/回答までの流れ完成

  • 知識共有者向けの管理ページまで直接実装


💳 実際の決済フロー完成

  • ショッピングカート・決済APIを直接設計

  • PortOneサーバーSDKとトスペイメンツPG連携

  • 実決済、例外処理、決済後の学習リスト反映まで


💻 デプロイ・モニタリング・インフラ自動化まで

  • Sentry連携、日次統計バッチジョブ開発、
    In-memoryキャッシングまで深化学習

  • EC2 + Docker + Route53 デプロイ構成

  • GitHub ActionsでCI/CD自動化まで完了


🎯

こんな方に強くおすすめします!

シンプルなToDoアプリから脱却し
本格的なサービスを
作ってフロントエンド開発者

ポートフォリオとして
すぐに活用できるプロジェクトが
必要な転職・就職準備生

講義プラットフォームのような
実サービスを作りたい
1人開発者

授業でこのようなことを学びます


セクション 2
講義検索から詳細ページまで、受講前の流れを完成

カテゴリ、ページネーション機能を含む検索機能を実装し、講義一覧画面とカテゴリ検索ページを作成します。

詳細ページでは星評価と知識共有者情報を一緒に表示し、受講申込ボタンはログイン状況と講義タイプに応じて動作が変わるように処理します。

セクション3
視聴時間保存&続きから見ることができる受講ページ

ビデオプレーヤーコンポーネントを直接作成し、
視聴時間の保存と続きから見る機能まで実装します。

バックエンドでは受講情報を保存して応答するAPIを設計し、
フロントエンドでは視聴状態に応じて動作するUIとカスタム再生ボタンを構成して実際のInflearnに近い受講体験を作り出します。

セクション 4
受講レビューと質問機能 - 受講生 & 知識共有者

受講生は星評価とレビューを残し、
質問を登録して回答を受け取ることができ

知識共有者は管理ページで受講レビューに返信したり質問に回答を残したりできるよう、役割に合ったUIをそれぞれ設計します。

セクション 5
カートから決済まで、全体購入フロー開発

カートに講義を入れて、
PortOne SDKトスペイメンツを連携して実決済を実装します。

決済成功時に学習リストに自動的に反映され、
全体決済フローと例外状況まで考慮してユーザー体験を完成させます。

セクション6~7
現場レベルのバックエンド運用経験と実際のデプロイまで

NestJSのCron機能で日次統計を自動収集し、頻繁に呼び出されるAPIはIn-memoryキャッシングで応答速度を改善します。

Sentryを連携してエラーをリアルタイムモニタリングし
EC2 · Docker · GitHub Actions · Route 53を利用した実際のデプロイ環境を直接構成します。

HTTPSとドメイン接続も一緒に実習します。

📦Part 1とPart 2、このように繋がります

この講義は「Inflearn クローンプロジェクト」シリーズの一部です。
Part 1とPart 2はそれぞれ独立して受講可能ですが、
一緒に受講すれば企画から配布まで、本物のサービスを一つ完成させることができます。

Part 1

知識共有者機能中心

受講生機能中心

講義登録、カリキュラム構成、動画アップロード

Part 2

講義検索、受講申請、動画視聴、決済、配布

JWT認証、S3アップロード、管理者ページ構成

視聴記録保存、質問/受講評価、決済API、EC2デプロイ

🧑‍🎓

授業を通じて
こんなことが身につきます


1⃣ プロジェクト構造を最初から最後まで自分で設計できるようになります。

2⃣ サービスに必要な機能をEnd-to-End実装する力が身につきます。

3⃣ AWSを通じて必要なインフラを構築できます。

4⃣ Cursor AIを活用して完成度の高いサービスを構築できます。

5⃣ "自分が欲しいサービスくらいは直接作れる!"という根拠のある自信が生まれます。

🧰

講義構成

7つのセクション14時間以上のボリューム、40以上の講義(生涯アップデート)

GitHub サンプルコードおよび参考資料の提供

完成したプロジェクトはポートフォリオとして使用可能

🧩

受講前の準備事項

Typescript文法の基礎、React使用経験

Git、Node.jsに対する理解

#Next.js #Nest.js #NextJS #NestJS #Fullstack #フルスタック #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #クローンコーディング #Node.js #AWS #S3 #Cloudfront

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ブログ、ToDoアプリはもういい!サービス全体を直接実装してみたいフロントエンド開発者

  • NestJSのバックエンド設計を実践で身につけたいジュニア〜ミドル開発者

  • 転職、ポートフォリオのための完成度の高いプロジェクトが必要な就活生

  • 講義一つで実践スタックをA to Zで習得したい実務志向の受講生

  • Next.js + NestJS をベースにフルスタック構造を直接実装してみたい実務志向の開発者

前提知識、
必要でしょうか?

  • HTML/CSS/JS 基本文法

  • React 基礎使用経験

  • REST API、Node.jsに対する理解

こんにちは
です。

3,578

受講生

200

受講レビュー

64

回答

4.9

講座評価

7

講座

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

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

  • (현) 네카라쿠배 재직

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

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

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

カリキュラム

全体

44件 ∙ (14時間 11分)

講座資料(こうぎしりょう):

講座掲載日: 
最終更新日: 

受講レビュー

全体

6件

4.8

6件の受講レビュー

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

    受講レビュー 15

    平均評価 4.7

    5

    100% 受講後に作成

    파트 1에 이어 드디어 파트 2까지 완강했습니다! 이번 파트 2 강의에서는 평소 궁금했던 기술들 (비디오 플레이어 구현, 장바구니, 결제 처리, Sentry 연동 등) 이 실제 코드와 함께 자연스럽게 설명되어 있어서 정말 재미있고 유익했어요. 주니어 개발자인 저에게는 실무에 바로 적용해볼 수 있는 부분이 많았고, 따라가면서 배우는 재미도 있었습니다 :) 설계 의도나 선택의 이유도 함께 설명해주셔서 단순히 따라 치는 걸 넘어서 “이해하면서 구현”할 수 있었던 강의였습니다. 좋은 강의 만들어주셔서 감사합니다! 다음 강의도 기대할게요 🙌

    • 윤효준님의 프로필 이미지
      윤효준

      受講レビュー 7

      平均評価 5.0

      5

      31% 受講後に作成

      • 김요한님의 프로필 이미지
        김요한

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        • Tony님의 프로필 이미지
          Tony

          受講レビュー 10

          平均評価 5.0

          5

          90% 受講後に作成

          • 5undaye님의 프로필 이미지
            5undaye

            受講レビュー 1

            平均評価 5.0

            5

            45% 受講後に作成

            Part 2 강의도 Part 1 강의에 이어서 보고 있는데 큰 도움이 되고 있어요. 프론트엔드 개발자 직군을 맡고 있는데, 백엔드 관련 내용도 알게되니 흐름 파악에 용이하네요. 좋은 강의 제공해주셔서 감사합니다.

            ¥20,061

            lopunの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!