강의

멘토링

커뮤니티

Programming

/

Full-stack

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

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

難易度 中級以上

受講期間 無制限

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

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

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

2.7

5.0

JONG

100% 受講後に作成

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

受講後に得られること

  • 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で作る自分だけの会社Webサイト:完全ガイド

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

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

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

何か質問はありますか?

💬 Q1. この講座はどのレベルの方が受講するのに適していますか?

React랑 Python 기초는 조금 다뤄봤는데, 아직 완전한 프로젝트는 안 만들어봤어요.[[BR]]이 강의는 어느 정도 수준이면 따라갈 수 있을까요?


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

こんにちは
です。

911

受講生

46

受講レビュー

58

回答

4.6

講座評価

7

講座

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

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

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

 

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

 

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

カリキュラム

全体

64件 ∙ (17時間 17分)

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

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

受講レビュー

全体

3件

2.7

3件の受講レビュー

  • artline1412님의 프로필 이미지
    artline1412

    受講レビュー 8

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

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

    • dakgangjung123
      知識共有者

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

  • griotold님의 프로필 이미지
    griotold

    受講レビュー 33

    平均評価 4.9

    2

    30% 受講後に作成

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

    • dakgangjung123
      知識共有者

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

  • farmerkyh2857님의 프로필 이미지
    farmerkyh2857

    受講レビュー 6

    平均評価 4.3

    1

    19% 受講後に作成

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

    • dakgangjung123
      知識共有者

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

¥9,363

dakgangjung123の他の講座

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

似ている講座

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