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

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

難易度 中級以上

受講期間 無制限

AWS
AWS
Docker
Docker
Next.js
Next.js
NestJS
NestJS
Prisma
Prisma
AWS
AWS
Docker
Docker
Next.js
Next.js
NestJS
NestJS
Prisma
Prisma

学習した受講者のレビュー

4.9

5.0

조내일

100% 受講後に作成

パート1に続き、ついにパート2まで全講義を修了しました! 今回のパート2の講義では、普段から疑問に思っていた技術(ビデオプレイヤー実装、カート機能、決済処理、Sentry連携など)が実際のコードと共に自然に説明されていて、とても面白く、有益でした。 ジュニア開発者である私にとっては、実務にすぐに適用できる部分が多く、ついていきながら学ぶ楽しさもありました :) 設計意図や選択の理由も一緒に説明してくださったので、単に写すだけにとどまらず、「理解しながら実装」できる講義でした。 素晴らしい講義を作ってくださり、ありがとうございます!次の講義も楽しみにしています! 🙌

5.0

5undaye

45% 受講後に作成

Part 2の講義もPart 1の講義に続いて見ているのですが、 大きな助けになっています。 フロントエンド開発者職群を担当しているのですが、バックエンド関連内容も分かるようになり、流れの把握に役立ちますね。 良い講義を提供してくださってありがとうございます。

5.0

cafe small house

100% 受講後に作成

個人的に本当に良い講義だと思います。cursorを使ってフロントエンドがどのように構成されていくのかも把握でき、全体的にある程度規模のあるバックエンドも作っていくことができ、決済もポートワンを学びながら実務でも使えて、ミッションを進めていくうちにいつの間にかポートフォリオ一つは埋めていくことができます。すでにある程度開発をされている方も、初めて開発を始める方も、皆さんに良さそうな講義です。

受講後に得られること

  • 最新のフルスタック開発トレンド (Next.js 15, NestJS, Prisma)

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

  • 講義の探索から受講申請、続きから再生、決済まで、ユーザー中心の受講システム全体を実装

  • Shadcn UI + TailwindCSS + Cursor AIで実務レベルの洗練されたUI制作

  • Prismaでデータベースモデリングを行い、PostgreSQLベースの構造を設計する

  • AWSとDockerを活用した実務に近いデプロイ方法

🚀

国内初!

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

✋ ちょっと待って!Inflearnクローンコーディング・チャレンジ第2期募集中
✅ 募集期間:3/24 ~ 4/18
✅ 優秀修了者は100%返金

https://inf.run/bkdbt


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


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

注目のORMであるPrismaを通じて

受講・決済・デプロイまで完成された

インフランのクローンを作りながら

確かな基礎力を備えたフルスタックエンジニアへと成長します!

つまみ食いはもう終わり! 本物のフルスタックを体験してください。」

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

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

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

この講義では、この組み合わせをベースに受講申請、続きから見る、決済およびデプロイまで、フルスタックの全プロセスを実装します。

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

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

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

💡 Part 2 紹介

今回のPart 2講座では

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

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

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

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

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

Part 1で作成したプロジェクトをベースに、講義の探索、受講、ショッピングカート、決済などの機能を追加し、
最終的にAWSデプロイまで完了させて「誰でもアクセスできる本物のサービス」として完成させます。

Part 1で固めた基礎がPart 2へと自然につながるようにカリキュラムを設計しているため、2つのパートを続けて受講することで設計から運用までフルスタックの全過程をしっかりと体験することができます。

🚀

Part 2の講義では

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


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

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

  • 星評価および知識共有者の情報を含む詳細ページ

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


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

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

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

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


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

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

  • 質問の作成/照会/回答までのフローを完成

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


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

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

  • PortOne サーバーSDKと Toss Payments PG 連動

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


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

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

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

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


🎯

このような方に強くおすすめします!

単純なToDoアプリから脱却し、
本格的なサービスを
作りたいフロントエンド開発者

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

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

このレッスンではこのようなことを学びます


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

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

詳細ページには星評価と知識共有者の情報を併せて表示し、受講申し込みボタンはログインの有無や講義のタイプによって動作が変わるように処理します。

セクション 3
視聴時間の保存&続きから再生が可能な受講ページ

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

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

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

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

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

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

カートに講義を入れ、
PortOne SDKToss Paymentsを連動させて実際の決済を実装します。

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

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

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

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

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

📦Part 1とPart 2は、このように繋がっています

この講義は「インフラン・クローンプロジェクト」シリーズの一部です。
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 #フルstack #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #クローンコーディング #Node.js #AWS #S3 #Cloudfront

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ブログやToDoアプリはもう卒業!サービス全般を直接実装してみたいフロントエンドエンジニア

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

  • 転職やポートフォリオのために、完成度の高いプロジェクトを必要としている就活生

  • 1つの講義で実践スタックをA to Zまで身につけたい実務志向の受講生

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

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

  • HTML/CSS/JS 基本文法

  • Reactの基礎的な使用経験

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

こんにちは
lopunです。

3,790

受講生

230

受講レビュー

64

回答

4.9

講座評価

8

講座

🚀 「トレンドの技術スタックで実践的なサービスを作る過程を包み隠さずお見せします」

理論よりもプロジェクト中心の実務講義を通じて、現場ですぐに役立つ内容を提供します。

  • (現) ネカラクベ在職

  • (現) 7年目フルスタックエンジニア

  • (講義) スパルタコーディングクラブ講師

  • (教育) 韓国科学技術院 (KAIST) 電算学科 卒業

もっと見る

カリキュラム

全体

44件 ∙ (14時間 11分)

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

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

受講レビュー

全体

8件

4.9

8件の受講レビュー

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

    受講レビュー 2

    平均評価 5.0

    5

    45% 受講後に作成

    Part 2の講義もPart 1の講義に続いて見ているのですが、 大きな助けになっています。 フロントエンド開発者職群を担当しているのですが、バックエンド関連内容も分かるようになり、流れの把握に役立ちますね。 良い講義を提供してくださってありがとうございます。

    • cafesmallhouse님의 프로필 이미지
      cafesmallhouse

      受講レビュー 12

      平均評価 4.6

      5

      100% 受講後に作成

      個人的に本当に良い講義だと思います。cursorを使ってフロントエンドがどのように構成されていくのかも把握でき、全体的にある程度規模のあるバックエンドも作っていくことができ、決済もポートワンを学びながら実務でも使えて、ミッションを進めていくうちにいつの間にかポートフォリオ一つは埋めていくことができます。すでにある程度開発をされている方も、初めて開発を始める方も、皆さんに良さそうな講義です。

      • tomorrowcho님의 프로필 이미지
        tomorrowcho

        受講レビュー 21

        平均評価 4.8

        5

        100% 受講後に作成

        パート1に続き、ついにパート2まで全講義を修了しました! 今回のパート2の講義では、普段から疑問に思っていた技術(ビデオプレイヤー実装、カート機能、決済処理、Sentry連携など)が実際のコードと共に自然に説明されていて、とても面白く、有益でした。 ジュニア開発者である私にとっては、実務にすぐに適用できる部分が多く、ついていきながら学ぶ楽しさもありました :) 設計意図や選択の理由も一緒に説明してくださったので、単に写すだけにとどまらず、「理解しながら実装」できる講義でした。 素晴らしい講義を作ってくださり、ありがとうございます!次の講義も楽しみにしています! 🙌

        • pcdoomco6658님의 프로필 이미지
          pcdoomco6658

          受講レビュー 5

          平均評価 5.0

          5

          7% 受講後に作成

          よく見ますね

          • yoonc017672님의 프로필 이미지
            yoonc017672

            受講レビュー 8

            平均評価 5.0

            5

            31% 受講後に作成

            lopunの他の講座

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

            似ている講座

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