강의

멘토링

로드맵

Programming

/

Full-stack

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

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

  • dakgangjung123
리액트감잡기
백엔드이해하기
도커활용하기
결제기능구현
aws배포
React
MySQL
Docker
REST API
FastAPI

こんなことが学べます

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

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

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

  • 아임포트 決済API を通じた 収益化システム 連携

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

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

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

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

「これって私たちにも作れるんじゃないかな?」

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

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


🎉 ついにデモウェブサイトがリリース!

https://talkandvote-demo.site/

ディスカッションと投票が一箇所で!今すぐ直接体験してみてください。

注意事項

このデモサイトの決済機能は実際に決済が進行され、金額が出金されます。
ただし、これはテスト用決済として一定時間内に自動キャンセル処理されますのでご安心ください。(一定時間が経過しても返金されない場合は、質問投稿でお問い合わせください。)

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

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

この講義を受講される全ての方に講義整理PDFノートを一緒に提供いたします。

フロントエンドからバックエンドまで、知らないコードに対する詳細な説明と例題コードを含めました。

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

  • JavaScript基礎文法まとめ

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

  • React Hooks実践使用法(useState、useEffect、useContext等)

  • Tailwind CSS スタイルコード


バックエンドノート(全75ページ分)

  • Python文法の基礎と例題コード

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

  • JWT基盤認証 / リフレッシュトークン処理フロー図

  • DB モデル設計 & リレーショナルデータ構成

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


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

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

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

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

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

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

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

トス・カカオペイなど国内決済システムとの連携を直接実装しながら、単純な機能実装を超えて有料化可能なプラットフォーム構造を設計してみます。
メンバーシップ等級に応じたトピック生成数制限と、自分だけのサービスで実際に収益を創出できる流れまで体験できます。

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

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

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

ウェブ開発のA to Zを体験したいなら、この講座をお勧めします。React、Node.jsベースでブログ、管理者ページまで備えたウェブサイトを作りながら、ウェブ開発の王道を学ぶことができます。

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

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

ご質問はありますか?

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

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


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

💬 Q2. 一人でも最後まで付いていけるでしょうか?実習環境は難しくないですか?

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


A2. 十分についていけます。最初から複雑すぎることはせず、React + FastAPI + Docker構成自体も段階的に積み上げていく構造になっています。

そして実習中に混乱しやすい部分は

  • 整理されたPDFノート

  • Notion各チャプター別に提供される全体コード

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

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

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

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

Tossとカカオペイと連携するとおっしゃいましたが…本当にお金が出ていくんですか?
テスト決済のみ可能なんですか?


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

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

受講前の参考事項

オペレーティングシステム (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 文法基礎(関数、クラス、リスト/ディクショナリ活用など)

こんにちは
です。

526

受講生

29

受講レビュー

51

回答

4.8

講座評価

6

講座

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

カリキュラム

全体

63件 ∙ (17時間 17分)

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

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

受講レビュー

全体

2件

1.5

2件の受講レビュー

  • griotold님의 프로필 이미지
    griotold

    受講レビュー 30

    平均評価 4.9

    2

    30% 受講後に作成

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

    • dakgangjung123
      知識共有者

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

  • farmerkyh2857님의 프로필 이미지
    farmerkyh2857

    受講レビュー 6

    平均評価 4.3

    1

    19% 受講後に作成

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

    • dakgangjung123
      知識共有者

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

¥9,158

dakgangjung123の他の講座

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

似ている講座

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