Challenge

終了

Programming

Full-stack

[AirPods プレゼント] Inflearn クローン 6週間完成チャレンジ｜Next.js 15 × NestJS × Prisma

6週間でNext.js 15 × NestJS × Prismaを使って実際のInflearnクローンを完成させます 🚀 ✅ 優秀修了者1名にAirPods 3世代プレゼント + 100%返金 🎁 ✅ 2名50%返金、3名30%返金 🎁

lopun

AWS

Next.js

NestJS

cursor

93개 수업 학습

6회 미션 수행

성취의 증표, 수료증을 발급해요.

무제한 복습, 내 것으로 만들어요.

지식공유자와 멘토링 혜택!

질문하고 즉시 답을 얻어요.

lopun님과 함께해요!

キャリア認証

3,844

受講生

237

受講レビュー

回答

4.8

講座評価

講座

🚀 「旬なスタックで実践的なサービスを作る過程を、包み隠さずお見せします」

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

（現）ネカラクベシニア開発者
(前) ユニコーンスタートアップ在職
(現) 8年目フルスタックエンジニア
(講義) スパルタコーディングクラブ講師
(教育) 韓国科学技術院(KAIST) 電算学科卒業

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

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

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

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

🤔 なぜ「Inflearn クローンプロジェクト」なのか？

小さなサンプルアプリではフルスタックの一連の流れを本格的に体験するのは困難です。ログイン機能だけのブログやToDoリストでは「実際のサービスがどのように動作するのか」を肌で感じることができないからです。

そこで私はInflearnの核心的な流れをそのまま移植したミニInflearnを作ることにしました。
会員管理から講義登録、カリキュラム編集、動画アップロード及びストリーミング、決済、AWS配布まで進めながら
フルサイクル（設計 → 認証 → メディア処理 → 権限管理 → 注文/決済 → 配布）を一度に経験することになります。

11월

9일

챌린지 시작일

2025년 11월 9일 午後 03:00

챌린지 종료일

2025년 12월 21일 午後 02:59

챌린지 커리큘럼

全体

99件 ∙ (28時間 54分)

講座資料（こうぎしりょう）:

ミッション

セクション 1．[1週目] 環境設定 & 認証実装 (Part 1 セクション1~4)

27件 ∙ (5時間 41分)

1. Inflearn クローンコーディング Part1 講義紹介 (1/2)
10:37
2. Inflearn クローンコーディング Part1 講義紹介 (2/2)
03:58
3. 初期設定 - Cursor, Git, fnm, Typescript
08:34
4. 講義で使用する技術説明 & 基礎講義紹介
02:23
5. [基礎] Next.js - Part 1. 基礎固め
18:09
6. [基礎] Next.js - Part 2. Metadata、Server Action
13:21
7. [基礎] Tailwindcss 紹介及び基本文法講義
19:39
8. [基礎] Jotai紹介及び基本文法講義
11:09
9. [基礎] React Query 紹介および基本文法講義
22:12
10. [ボーナス] AIを活用したUIスタイリング方法 (Cursor AI)
10:24
11. [基礎] NestJS - NestJSとは？
08:25
12. [基礎] NestJS - IoC (Inversion of Control) および DI (Dependency Injection) 説明
07:15
13. [基礎] NestJS - 初めてのNestJSプロジェクト作成
09:43
14. [基礎] NestJS - NestJS構造（Module、Controller、Service）
13:58
15. [基礎] NestJS - ブログポストAPI実装 (Module, Controller, Service, DTO)
18:58
16. [基礎] Prisma使用法及び文法講座
13:06
17. [基礎] Docker概念と使用法、PostgreSQL起動してみる
17:33
18. [BE] プロジェクト設定 (Nest.js, Prisma, Docker)
15:35
19. [FE] プロジェクト設定 (Next.js, Prisma, Shadcn-ui, Auth.js, Tailwind, Jotai, React-Query)
09:51
20. [FE] Auth.js（旧next-auth）概念及び動作方式説明
03:08
21. [FE, BE] 認証(Auth.js) インストール & 関連 Prisma モデル追加
12:41
22. (Bugfix) Auth.js Prisma設定バグ修正
02:25
23. [FE] next-auth 会員登録ロジック実装、SignIn / SignUp 画面実装 - Part 1
17:00
24. [FE] next-auth 会員登録ロジック実装、SignIn / SignUp 画面実装 - Part 2
22:23
25. [BE] バックエンドAuth Guard実装開始。Auth Guardでユーザーアイディを取得する部分の作業
25:53
26. [FE] BE APIにAuthorizationヘッダーを入れて送信テスト
23:32
🧩 1週目ミッション — 私のサービスでログイン成功させる

セクション 2．[2週目] データモデリング & 講義登録 (Part 1 セクション5~6)

26件 ∙ (9時間 1分)

27. [企画] Inflearn プロダクト見学
10:57
28. [企画] User Story企画＆開発優先順位決め
05:52
29. [BE] カスタムPrismaモデル追加 (Course, Section, Lecture, ...)
32:11
30. [BE] Prisma Studio インストールおよびプロジェクト接続（基本使用法実習）
03:58
31. [BE] Seedデータ生成スクリプト追加（カテゴリ）
10:17
32. [企画] Course、Section、Lecture管理API企画
03:23
33. [BE] コースAPI実装
29:26
34. [BE] Course API テスト
09:14
35. [BE] Prisma Class Generator 適用 & Course スキーマ及び API 改善
17:21
36. [FE] Swagger Codegen適用（openapi-ts）後のAPI呼び出しコード改善
15:28
37. [BE] Section API実装
28:49
38. [BE] Lecture API実装 & Section、Lecture APIテスト
20:31
39. [FE] サイト基本レイアウト実装、知識共有者基本管理画面実装
53:15
40. [FE] 講義作成・修正ページ実装（基本レイアウト、API連動）
58:55
41. [FE] カリキュラム管理実装（セクション/講義追加・削除）
47:50
42. [Infra] AWS登録およびS3、Cloudfront作成（アップロードテスト実施）
14:40
43. [BE] 動画アップロードAPI追加
20:27
44. [FE] 講義修正および動画アップロード機能実装
45:30
45. [FE] 詳細紹介作成ページ実装
23:08
46. [FE] カバー画像アップロード及び講義提出機能
26:49
47. [BE/FE] プロフィール照会・修正機能（API及び管理ページ）
31:47
48. （追加）カテゴリ別に異なるアイコンを適用
04:30
49. （追加）UI改善作業進行＆SEO Metadata設定
19:08
50. （追加）講義生成Slugバグ修正
03:50
51. Part 1を終えて（Part 2のご案内）
03:45
🎥 2週目ミッション — 自分だけの初講義アップロード成功！

セクション 3．[3週目] 講義検索 & 詳細ページ実装 (Part 2 セクション2~3)

16件 ∙ (5時間 47分)

52. Part 2 オリエンテーション
06:55
53. [企画] 講義検索機能API設計
04:23
54. [BE] 講義検索API実装（価格・カテゴリ・ページネーション）
29:15
55. [FE] 講義一覧ページ & ページネーション実装 (+ 講義30個Seeding)
36:17
56. [FE] 検索結果ページ & カテゴリ検索画面実装
13:33
57. [BE] 講義詳細ページAPI - 評価・知識共有者含む (+ 追加Seed作成)
27:25
58. [FE] 詳細画面 & フローティングメニュー実装
42:24
59. [BE] 講義お気に入り(ウィッシュリスト) API 追加
31:17
60. [FE] 講義お気に入り機能追加（詳細ページ、講義一覧画面）
29:45
61. [BE·FE] 受講申込ボタン実装（ログイン分岐、無料講義受講申込）
29:09
62. [企画] 講義受講機能API設計
04:18
63. [BE] 講義・受講情報API実装 & 知識共有者側バグ修正
18:48
64. [FE] 受講ページ & ビデオプレイヤーコンポーネント
34:10
65. [FE] 視聴時間追跡・保存 & 続きから再生ロジック
33:55
66. [FE] 続き視聴機能のバグ修正
05:26
🔍 3週目ミッション — 検索 & 続き視聴認証

セクション 4．[4週目] 受講評価・質問 & 決済システム (Part 2 セクション4~5)

18件 ∙ (5時間 58分)

セクション 5．[5週目] 高度化 & デプロイ (Part 2 セクション6~7)

11件 ∙ (2時間 25分)

セクション 6．[6週目] Q&A & 拡張機能発表 (自律ミッション)

1件

챌린지에서 배워요

最新フルスタック開発の流れ (Next.js 15, NestJS, Prisma)
ポートフォリオとして活用可能な「自分だけのInflearn」プラットフォーム完成
講義登録、修正、映像アップロード、カリキュラム編集など実サービス機能全般開発
Shadcn UI + TailwindCSS + Cursor AIで実務レベルの洗練されたUI制作
Swagger + OpenAPI基盤自動化されたバックエンド呼び出し構造構成
PrismaでデータベースモデリングしてPostgreSQL基盤構造設計する
S3 + CloudFront ベースのストリーミングアップロードシステム構築

こんな方に
おすすめです

学習対象は
誰でしょう？

ブログ、TODOアプリはもう十分！サービス全般を直接実装してみたいフロントエンド開発者
NestJS バックエンド設計を実戦で身につけたいジュニア〜ミドル開発者
転職、ポートフォリオのための完成度の高いプロジェクトが必要な就活生
一つの講義で実戦スタックをA to Zまで習得したい実務志向の受講生
単一言語ベースのフルスタック構造を最初から最後まで習得したい実務志向の受講生

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

HTML/CSS/JS基本文法
React基礎使用経験

受講レビュー

全体

2件

5.0

2件の受講レビュー

rhkdqhr080980
受講レビュー 13
∙
平均評価 4.8
2025/12/25
修正済み
5
100% 受講後に作成
インフラーンのクローンコーディングをしながら、フロントエンドとバックエンドだけでなく、GitActionやAWSの機能を使って実際の環境に近い形で作れたのがとても良かったです。今後、自分だけのWebページを作るのに大きな助けになりました。
cafesmallhouse
受講レビュー 12
∙
平均評価 4.6
2025/12/07
5
100% 受講後に作成
個人的に本当に良い講座だと思いました。バックエンドの決済システムからデプロイまで一通り見ることができて、初心者の方でも上級者の方でも一度振り返ることができますし、本当にとても役立つ講座だなと視聴しながらずっと感じていました。

취소 및 환불 규정
챌린지는 지식공유자가 설정한 수업 최소 정원이 충족되지 않을 경우, 폐강 안내가 고지되며 결제 내역이 자동취소됩니다.

lopunの他の講座

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

[フルスタック入門] Firebaseより10倍良いSupabase

lopun

￥2,970

初級 / PostgreSQL, Next.js, TailwindCSS, supabase

4.9

(110)

2,000+

フルスタック開発を加速させるSupabase！Firebaseの上位互換のSupabaseで、フルスタック開発を2時間で完成させます。

初級

PostgreSQL, Next.js, TailwindCSS

[フルスタック入門] Firebaseより10倍良いSupabase

lopun

￥2,970

初級 / PostgreSQL, Next.js, TailwindCSS, supabase

4.9

(110)

2,000+

フロントエンド開発者のためのバックエンド101 (NestJS, TypeORM)

lopun

￥7,239

初級 / NestJS, TypeORM, PostgreSQL, AWS, aws-rds

4.9

(15)

200+

最も速くバックエンドに入門できるようサポートするNestJS！様々な実習プロジェクトを通じて、バックエンドフレームワークであるNestJSとTypeORM、そしてサーバー開発者なら必ず知っておくべき必須の理論知識まで、短期間で習得します。

初級

NestJS, TypeORM, PostgreSQL

フロントエンド開発者のためのバックエンド101 (NestJS, TypeORM)

lopun

￥7,239

初級 / NestJS, TypeORM, PostgreSQL, AWS, aws-rds

4.9

(15)

200+

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

lopun

￥21,530

中級以上 / AWS, Docker, Next.js, NestJS, Prisma

4.9

(9)

100+

ミッション

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

中級以上

AWS, Docker, Next.js

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

lopun

￥21,530

中級以上 / AWS, Docker, Next.js, NestJS, Prisma

4.9

(9)

100+

ミッション

Inflearnクローンコーディング Part 1：Next.jsとNestJSで始める実践プロジェクト

lopun

￥21,530

中級以上 / AWS, Docker, Next.js, NestJS, Prisma

4.8

(42)

300+

ミッション

🔥 講義の登録から動画のアップロードまで、知識共有者機能をそのまま実装してみる実践フルスタック講義です。Next.js 15とNestJSを活用し、講義の作成、カリキュラム構成、サムネイルおよび動画のアップロード、詳細紹介の作成まで、実際のInflearn（インフラン）の流れに沿って作りながら、Prismaモデリング、JWT認証、S3 + CloudFrontアップロード、Swagger API設計など、実務に近い経験を積むことができます。

中級以上

AWS, Docker, Next.js

Inflearnクローンコーディング Part 1：Next.jsとNestJSで始める実践プロジェクト

lopun

￥21,530

中級以上 / AWS, Docker, Next.js, NestJS, Prisma

4.8

(42)

300+

ミッション

[フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)

lopun

￥12,992

初級 / Next.js, supabase, TailwindCSS, react-query, Firebase

4.8

(57)

800+

フルスタック開発に翼を授けるSupabase！ 3つのクローンプロジェクトを通じて、Next.js 14とSupabaseで実務レベルのフルスタック開発を行う方法を最速で学びます。

初級

Next.js, supabase, TailwindCSS

[フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)

lopun

￥12,992

初級 / Next.js, supabase, TailwindCSS, react-query, Firebase

4.8

(57)

800+

[AirPods プレゼント] Inflearn クローン 6週間完成チャレンジ｜Next.js 15 × NestJS × Prisma

lopun님과 함께해요!

🚀

国内初！

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

6週間完成チャレンジ

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

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

人気のORMであるPrismaを通じて

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

Inflearnクローンを作りながら

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

🏆

チャレンジ優勝商品のご案内

🥇 優秀修了者1名100%返金 + AirPods 3世代 プレゼント 🎁

🥈 優秀修了者2名 50%還付 🎁

🥉 優秀修了者3名 30%還付 🎁

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

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

🤔 なぜ「Inflearn クローンプロジェクト」なのか？

🔥 累計400名以上が受講した講義

🚀

今回のチャレンジを通じて

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

🥇1週目：環境設定から認証まで

🎥 2週目：講義登録＆動画アップロード

🔍 3週目：講義検索・受講機能

💬 4週目：受講評価・質問・決済システム

🚀 5週目：パフォーマンス最適化＆デプロイ

🏆 6週目：Q&A & 私だけのInflearn拡張

🎯

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

📌 必読！

スムーズなチャレンジ進行のため、以下の事項を必ずご確認ください。

✅ チャレンジに投資できる時間を確保する

✅ 基本的なフロントエンド（React文法）、バックエンド（REST API）知識を事前に学習する

✅ バグや問題を解決した際はSlackで積極的に共有する

✅ Slackモバイル、デスクトップ通知をオンにする

🧰

講義構成

챌린지 커리큘럼

챌린지에서 배워요

こんな方に おすすめです

受講レビュー

lopunの他の講座

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

🥇 優秀修了者1名100%返金 + AirPods 3世代プレゼント 🎁

こんな方に
おすすめです