강의

멘토링

커뮤니티

Programming

/

Full-stack

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

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

難易度 中級以上

受講期間 無制限

  • lopun
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 フルスタッククローンコーディング講座

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

🔗 学生割引(-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,731

受講生

222

受講レビュー

64

回答

4.9

講座評価

7

講座

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

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

  • (現) ネカラクベ在職

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

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

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

カリキュラム

全体

44件 ∙ (14時間 11分)

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

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

受講レビュー

全体

8件

4.9

8件の受講レビュー

  • tomorrowcho님의 프로필 이미지
    tomorrowcho

    受講レビュー 15

    平均評価 4.7

    5

    100% 受講後に作成

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

    • cafesmallhouse님의 프로필 이미지
      cafesmallhouse

      受講レビュー 12

      平均評価 4.6

      5

      100% 受講後に作成

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

      • pcdoomco6658님의 프로필 이미지
        pcdoomco6658

        受講レビュー 5

        平均評価 5.0

        5

        7% 受講後に作成

        よく見ますね

        • dsp03136040님의 프로필 이미지
          dsp03136040

          受講レビュー 2

          平均評価 4.0

          4

          31% 受講後に作成

          音声に問題があります。

          • yoonc017672님의 프로필 이미지
            yoonc017672

            受講レビュー 7

            平均評価 5.0

            5

            31% 受講後に作成

            ¥20,222

            lopunの他の講座

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

            似ている講座

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