강의

멘토링

로드맵

Inflearn brand logo image
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フルスタッククローンコーディングコース

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

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

待って!第2部発売記念

🔥Part 1コース - 30%割引クーポンを提供🔥

👉クーポンリンク (~7/30) 👈


この講義を通して、


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

ホットなORMであるPrismaを通じて


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

Inflearnクローンを作成する

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

撮影はもうやめて!本物のフルスタックを体験してください。」

単一の講義で企画、開発、配布まで完成するフルスタック旅程を始めてください。

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

🧩Next.js + NestJS =シングル言語フルスタック最適な組み合わせ

このレッスンでは、この組み合わせに基づいて、受講申請、イヤービュー、支払い、配布までのフルスタックフローを実装します。

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

NestJSは同じTypeScriptで書かれており、依存性注入とモジュール式構造のおかげでチーム規模が大きくなってもメンテナンスが容易なバックエンドを構築できます。

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

💡 Part 2について

今回のパート2講座では

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

  • 視聴時間の保存とイヤービュー機能を含む受講ページを作成します。

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

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

  • AWS EC2 デプロイ、HTTPS 接続、GitHub Actions オートメーションで運用レベルまで完成します。

パート1で作成したプロジェクトに基づいて、講義探索、受講、ショッピングカート、決済などの機能をのせ、
最終的にAWSデプロイまで仕上げ、「誰でもアクセスできる本物のサービス」に仕上げます。

パート1で切り分けられた基礎がパート2に自然につながるようカリキュラム設計しました。

🚀

パート2講義では

以下の結果を実際に完成するようになります!


🥇講義ナビから詳細ページまで実装

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

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

  • お気に入り機能と受講申込/カート機能の実装


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

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

  • 視聴時間の保存と続行機能の完成

  • カスタムプレイボタン制作ミッション付き


📝 受講評・質問システム構築

  • スターポイントベースの受講評価リストと作成UI

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

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


💳実際の決済フローを完成

  • カート・決済API直接設計

  • PortOneサーバー SDK とトーペイメント PG連動

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


💻展開・監視・インフラ自動化まで

  • Sentry連動、毎日の統計バッチジョブの開発、
    メモリ内キャッシュまでの深化学習

  • EC2+Docker+Route53 展開の設定

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


🎯

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

単純な闘頭アプリから抜け出す
適切なサービス
作成し、フロントエンド開発者

ポートフォリオ
すぐに利用可能なプロジェクト
必要な離職・就労準備生

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

クラスでこれを学びます。


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

カテゴリ、ページネーション機能などの検索機能を実装し、講義リスト画面とカテゴリ検索ページを作成します。

詳細ページには星占いと知識共有者情報が一緒に表示され、受講申請ボタンはログインの有無と講義の種類によって動作が異なるように処理します。

セクション3
視聴時間を保存&イヤービューができる受講ページ

ビデオプレーヤーコンポーネントを自分で作成し、
視聴時間の保存と引き続きロジックまで実装します。

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

セクション4
受講評価と質問機能 - 受講生&知識共有者

受講生は星占いと後期を残し、
質問を登録して回答を受け取ることができます。

ナレッジシェアは、管理ページで受講評価に返信したり、質問に回答したりできるように、それぞれの役割に合ったUIを設計します。

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

カートに講義を盛り込んで、
PortOne SDKトスペーメンツを連動して実決済を実装します。

お支払いが成功すると学習リストに自動的に反映され、
完全な支払いフローと例外の状況を考慮してユーザーエクスペリエンスを完成させます。

セクション6〜7
業務レベルのバックエンド運用経験と実展開まで

NestJSのCron機能を使用して日々の統計を自動的に収集し、頻繁に呼び出されるAPIは、インメモリキャッシュで応答速度を向上させます。

Sentryを連動してエラーをリアルタイム監視
EC2 · Docker · GitHub Actions · Route 53を使用した実際の展開環境を直接設定します。

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

📦 Part 1とPart 2、このように接続されています

この講義は「Inflearnクローンプロジェクト」シリーズの一部です。
パート1とパート2は互いに独立して受講可能ですが、
一緒に聴けば企画から配布まで、本物のサービスの片方を完成できます。

パート1

知識共有者の機能中心

受講生機能中心

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

パート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 基礎使用経験

こんにちは
です。

3,479

受講生

176

受講レビュー

64

回答

4.9

講座評価

6

講座

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

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

  • (현) 네카라쿠배 재직

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

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

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

カリキュラム

全体

44件 ∙ (14時間 11分)

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

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

受講レビュー

全体

3件

5.0

3件の受講レビュー

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

    受講レビュー 15

    平均評価 4.7

    5

    100% 受講後に作成

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

    • Tony님의 프로필 이미지
      Tony

      受講レビュー 10

      平均評価 5.0

      5

      90% 受講後に作成

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

        受講レビュー 1

        平均評価 5.0

        5

        45% 受講後に作成

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

        ¥19,411

        lopunの他の講座

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

        似ている講座

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