inflearn logo
知識共有
inflearn logo

React & FastAPIで作る投票コミュニティプラットフォーム:決済システムで収益化まで!

この講座では、ReactとFastAPIを活用して、リアルタイム投票、コメント、いいねなどのソーシャル機能はもちろん、決済システム(カカオペイ、トスペイなど)を連動させて収益化する方法まで、段階的に実習します。

難易度 中級以上

受講期間 無制限

React
React
MySQL
MySQL
Docker
Docker
REST API
REST API
FastAPI
FastAPI
React
React
MySQL
MySQL
Docker
Docker
REST API
REST API
FastAPI
FastAPI

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

2.7

5.0

JONG

100% 受講後に作成

サービスの完成から拡張まで自然につながる講義でした。

受講後に得られること

  • ReactとFastAPIを活用したフルスタックWebアプリの開発方法

  • 投票、いいね、コメント機能が含まれたソーシャルコミュニティプラットフォームの実装

  • JWT認証およびユーザーログイン・会員登録システムの構築

  • I'mport決済APIを通じた収益化システムの連動

  • Dockerベースの開発環境構築からDB設計、APIドキュメント作成、デプロイまで、Webサービス全体の流れを経験

投票コミュニティ、フロントエンドからバックエンドまで自作する

私がこの投票プラットフォームを初めて思いついたのは2024年の冬でした。
当時、韓国社会はご存知の通り、ある政治的事件で持ちきりとなっており、その余波で大統領弾劾の是非をめぐる世論が極度に二分されていた時期でした。

そんな中、偶然Polymarket(ポリマーケット)という海外の投票プラットフォームを目にすることになり、そこには「弾劾の賛否」のような敏感なトピックでさえも、人々が匿名で参加し、リアルタイムで意見を交わす空間が存在していたのです。
それを見て、ふとこんな考えが浮かびました:

"これを私たちも作れるのではないか?"

そうして始まりました。
話題のトピックを作成し → 共有し → 匿名で意見を交わし → 結果を一緒に確認できる
シンプルながらも意味のあるコミュニティプラットフォーム。

その流れをReactとFastAPI、Dockerを通じてフルスタックで実装しました。
誰かの意見が消えることなく、積み重なって意味を持つ空間。
技術的にも実用的で、個人的にも作りたかったプロジェクトを皆さんと一緒に完成させたいと思います。


🎉 ついにデモウェブサイトを公開!

https://talkandvote-d721d.web.app/

討論と投票が一つに!今すぐ直接体験してみてください。

注意事項

本デモサイトの決済機能は実際に決済が行われ、金額が引き落とされます。
ただし、これはテスト用決済であり一定時間内に自動キャンセル処理されますのでご安心ください。(一定時間が経過しても返金されない場合は、Q&Aよりお問い合わせをお願いいたします。)

React & FastAPIで作る投票コミュニティプラットフォーム:決済システムで収益化まで!YouTube動画

📘 受講生のための講義まとめノートを提供

この講座を受講されるすべての方に、講義まとめPDFノートをあわせて提供いたします。

フロントエンドからバックエンドまで、分からないコードに対する詳細な説明とサンプルコードを盛り込みました。

フロントエンドノート(計37ページ分)

  • JavaScript 基礎文法のまとめ

  • Reactコンポーネントの構成方式

  • React Hooks 実践的な使い方 (useState, useEffect, useContext など)

  • Tailwind CSS スタイルコード


バックエンドノート(計75枚分)

  • Python 文法の基礎および例文コード

  • FastAPIの構造、パス設定、依存性注入

  • JWTベースの認証 / リフレッシュトークン処理フローチャート

  • DBモデル設計 & 関係型データ構成

  • RESTful API 設計 & レスポンス構造


🧩 プラットフォームの主要機能プレビュー

"単なる投票を超えて、参加型コミュニティプラットフォームへ"

1) ユーザーが直接話題のトピックを作成

ユーザーは気になるトピックを作成できます。
トピックの入力 → 選択肢の追加 → カテゴリの選択まで
簡単なフォームを入力するだけで一つのトピックが作成され、全ユーザーに共有されます。

2) 投票後、リアルタイムで投票グラフを確認

投票結果は、選択後即座に反映されるリアルタイム棒グラフで確認できます。誰もがワンクリックで参加でき、結果を直感的に比較できるように構成されています。

3) 決済機能を通じたメンバーシップ機能

Toss・Kakao Payなど国内決済システムとの連動を直接実装しながら、単なる機能実装を超えて有料化可能なプラットフォーム構造を設計してみます。
メンバーシップの等級に応じたトピック作成数の制限や、自分のサービスで実際に収益を創出できるフローまで経験することができます。

4) FastAPI 管理者ページの実装

全ユーザー、トピック、投票データをFastAPI管理ページで統合管理できます。
投票統計、異常なトピックの遮断、ユーザー状態の変更など、バックオフィス機能も直接構築します。

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト:完全ガイド

Web開発のAからZまでを経験したいなら、この講義をおすすめします。React, Node.jsをベースに、ブログや管理者ページまで備えたウェブサイトを作りながら、Web開発の定石を学ぶことができます。

もしも自分がタイタニックに乗っていたら?!PyTorch & Next.jsで生存確率予測AIウェブサービス作り

「もし自分がタイタニックに乗っていたら生き残れただろうか?」という興味深い問いを、実際のデータで解き明かします。
PyTorchでAIモデルを作成し、FastAPIでバックエンドサーバー、Next.jsでWebインターフェースを実装しながら、AIとWeb開発を網羅するフルスタックプロジェクトを完成させることができます。

何かご不明な点はありますか?

💬 Q1. この講義はどの程度のレベルの人が受講するのが良いでしょうか?

ReactとPythonの基礎は少し触ったことがありますが、まだ完全なプロジェクトは作ったことがありません。
この講義はどの程度のレベルであればついていけますか?


A1. この講義は、ReactとPythonの基礎を一度でも触ったことがある方なら十分に付いていけるように構成されています。最初から最後まで一緒に作る方式なので、途中で概念がわからなくなりそうな部分はPDFノートとコードのコメントで詳しく補完しています。「完璧に知っている状態」ではなく、「やったことはある」という程度なら、ちょうど良い難易度です。

💬 Q2. 一人でも最後まで進められますか?実習環境は難しくないでしょうか?

フルスタックプロジェクトということで少し負担に感じますが…環境構築や実習の流れは難しくないでしょうか?一人でも最後まで作りきれるでしょうか?


A2. 十分についてくることができます。最初から複雑に始めるのではなく、React + FastAPI + Dockerの構成自体も一歩ずつ積み上げていく構造になっています。

そして、実習中に迷いやすい部分は

  • 整理されたPDFノート

  • Notionの各チャプターごとに提供されるフルコード

  • エラー発生時の質疑応答

このようにすべて準備しておきました。

「これを自分一人でやり遂げられるだろうか?」という問いよりは、
「ここから自分はどこまで拡張できるだろうか?」に変わることが目標です。

💬 Q3. 決済機能は実際に決済されますか?テストのみ可能ですか?

トスとカカオペイを連動させるとのことですが…本当にお金が引き落とされるんですか?
テスト決済だけが可能なんですか?


A3. この講義ではI'mport(アイムポート)という国内PG連動サービスのAPIを活用して、クレジットカード、Toss、Kakao Payなどの実際の決済手段を直接実装します。

実際に決済リクエストが行われ、お金も引き落とされます。
ですが、ご安心ください! 事業者登録がされていない場合は、実際にお金を受け取ることはできず
一定時間が経過すると自動的に決済キャンセル(返金)処理されます。

受講前のご注意事項

✅ オペレーティングシステム (OS)

  • この講義は、以下のオペレーティングシステム(OS)ですべて実習可能です。

    • Windows 10 以上

    • macOS (M1/M2を含む)

    • Ubuntu 20.04以上、またはその他のLinux系

    • Chromeブラウザベースの開発環境の使用を推奨

📦 学習資料のご案内

📁 提供資料の形式

  • 整理されたPDF講義ノート (フロントエンド 37枚 / バックエンド 75枚)

  • ソースコードの例 (Notionリンクを提供)


  • PPT/テキストベースの核心技術スタックスライドを提供

  • 必要な場合、使用されたAPIドキュメントおよびReadMeを提供

📐 資料の容量および注意事項

  • PDF容量:約1MB前後

  • ソースコード:Notionからリアルタイムでコピー可能

  • すべての資料は受講生専用の共有です。

🔎 前提知識 (あれば尚可)

  • HTML/CSS, JavaScriptの基礎文法

  • ReactコンポーネントとuseState/useEffect構造の理解

  • Pythonの文法および簡単な関数・クラスの使用経験

  • React, MySQL, Docker, REST API, FastAPIを使用します!

※ 完全な初心者でもついていけるように説明は構成されていますが、
基本文法は習得しておくことをおすすめします。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 決済機能(カカオペイ、トスペイなど)をウェブサイトに導入してみたい開発者

  • ReactとFastAPIを組み合わせて活用したフルスタックプロジェクトを経験してみたい方

  • ユーザー参加型コミュニティサービス(コメント・いいね・投票など)を実装してみたい方

  • Dockerとデプロイまで含めたウェブサービスの全体的な流れを習得したい方

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

  • Reactの基本概念(コンポーネント構造、props/state、useState、useEffectなどの基本的なフックの使い方)

  • FastAPIの基本構造(ルーターの定義、リクエスト/レスポンス処理)

  • Python文法の基礎(関数、クラス、リスト/辞書の活用など)

こんにちは
dakgangjung123です。

1,693

受講生

80

受講レビュー

65

回答

4.5

講座評価

9

講座

こんにちは!西江大学のコンピュータ工学科を卒業し、現在大学院への進学を準備している学生です。

高校時代、偶然フルスタックWeb開発とPythonを活用した自動売買を始めたことで、プログラミングにのめり込むようになりました。

その後、様々なプロジェクトやプログラミングの家庭教師活動を経験し、実力とノウハウを共有してきました。これらの経験を通じて、プログラミングに初めて触れる方々にも「こんなに簡単なんだ!」と感じていただけるような講義を作れるよう努めています。

実用的な例題と親しみやすい説明で、皆さんの学習をサポートしたいと思っています。ありがとうございます。

 

GitHubリポジトリへ移動(クリック!)

もっと見る

カリキュラム

全体

64件 ∙ (17時間 17分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

3件

2.7

3件の受講レビュー

  • artline1412님의 프로필 이미지
    artline1412

    受講レビュー 9

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    サービスの完成から拡張まで自然につながる講義でした。

    • dakgangjung123
      知識共有者

      JONG様、貴重なレビューありがとうございます! サービスの完成から拡張までの流れがしっかり伝わったとのこと、本当に嬉しいです。 より良い講義でお応えします!

  • farmerkyh2857님의 프로필 이미지
    farmerkyh2857

    受講レビュー 6

    平均評価 4.3

    1

    19% 受講後に作成

    単純にscriptを読む講義ではなく、過程を明確に説明してくれたら良かったですね

    • dakgangjung123
      知識共有者

      こんにちは、貴重な受講レビューを残していただき、ありがとうございます。 おっしゃっていただいた部分のように、単純にスクリプトを読む感じよりも、過程と理由をより明確に説明すべきでしたが、不足していた点申し訳ありませんでした。今後は流れと原理をより理解しやすいよう補完いたします。ご指摘いただき心から感謝しており、より良い講義でお応えいたします。ありがとうございます!

  • griotold님의 프로필 이미지
    griotold

    受講レビュー 34

    平均評価 4.9

    2

    30% 受講後に作成

    はぁ... セクション5. Ch.4(フロントエンド)メインページをやっているのですが、講義と講義資料が違っていてバグを直すのにとても苦労しています。検収をしないで講義をアップロードしたみたいでとても残念です。無料講義でもないし、お金を払って聞いているのに、この程度のクオリティは少し違うと思います。全体的に講義内容と講義資料が一致するようにしていただければと思います。

    • dakgangjung123
      知識共有者

      こんにちは、貴重な受講レビューを残していただき、ありがとうございます。 おっしゃっていただいたセクション5のフロントエンドメインページ部分で、講義内容と資料が一致せず、ご不便をおかけした点を心よりお詫び申し上げます。該当区間で発生したバグと不一致問題を確認し修正いたしました。また、全体講義をもう一度丁寧に検討中です。 今後は講義と資料がより正確に連動し、学習に混乱がないよう改善いたします。ご不便をおかけしながらも貴重なご意見を残していただき、心より感謝申し上げます。より良い講義でお応えいたします。ありがとうございます。

dakgangjung123の他の講座

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

似ている講座

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

新規会員登録で25%OFF

¥7,326

25%

¥9,766