Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Full-stack

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

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

74名 が受講中です。

  • 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/

議論と投票が一箇所で!

注意事項

本デモサイトのお支払い機能は実際にお支払いが行われ、金額が出金されます。
ただし、これはテスト用のお支払いで一定時間内に自動キャンセル処理されますのでご安心ください。

📦パッチノート

  • お支払い機能の実装完了(2025年6月16日)
    ユーザー決済システム全体の実装とテスト完了

  • AWS ベースの HTTPS ドメインのデプロイ完了 (2025 年 6 月 17 日)
    AWS EC2+DuckDns+Nginx の組み合わせによる HTTPS デプロイレクチャーのアップロード

🔄継続更新計画

  • 毎月私たちのチームが準備したアドオン講義が続く予定です。

  • また、ご希望の機能を収集するために、[ Googleフォーム]を通じてコメントを受けています。
    先着順と一番多くのリクエストが集まった機能から講義する予定です。

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

📘受講生のための講義整理ノートを提供

このレッスンを受講しているすべての人に、レッスンクリーンアップPDFノートを添付してください。

フロントエンドからバックエンドまで、わからないコードの詳細な説明とサンプルコードが含まれています。

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

  • JavaScript 基礎文法の整理

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

  • React Hooksの実用的な使い方(useState、useEffect、useContextなど)

  • Tailwind CSSスタイルコード


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

  • Python文法の基礎とサンプルコード

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

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

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

  • RESTful APIの設計と応答構造


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

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

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

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

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

投票の結果は、選択後すぐ反映されるリアルタイムの棒グラフで確認できます。

3) 決済機能による会員機能

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

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

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

質問がありますか?

💬 Q1. この講義はどれくらいレベルの人が聞くといいでしょうか?

ReactとPythonの基礎は少し扱っていましたが、まだ完全なプロジェクトは作っていません。
この講義はどれくらいのレベルであればフォローできますか?


A1. この講義は ReactとPythonの基礎を一度でも触れた方なら十分につくことができるように構成しました。

💬 Q2. 一人でも最後まで追いつくことができますか?

フルスタックプロジェクトなので、ちょっと負担になりますが…環境設定や実習の流れが難しくないでしょうか?


A2. 十分に追いつくことできます。

そして、練習中に混乱する可能性のある部分は

  • まとめられたPDFノート

  • Notion 各章ごとに提供されるフルコード

  • エラー発生時のクエリ応答

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

「これは私が一人で行うことができますか?」という質問ではなく
「ここで私がどこまで拡張できるのか?」に変わることが目標です。

💬 Q3。決済機能は実際に決済されますか?

トスとカカオペイ連動すると言われましたが…本物のお金を抜けますか?
テスト決済のみ可能ですか?


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

こんにちは
です。

424

受講生

25

受講レビュー

44

回答

5.0

講座評価

5

講座

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

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

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

 

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

 

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

カリキュラム

全体

63件 ∙ (17時間 17分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

¥9,003

dakgangjung123の他の講座

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

似ている講座

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