강의

멘토링

커뮤니티

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で作る自分だけの会社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 文法基礎(関数、クラス、リスト/ディクショナリ活用など)

こんにちは
です。

729

受講生

32

受講レビュー

57

回答

4.7

講座評価

7

講座

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

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

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

 

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

 

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

カリキュラム

全体

64件 ∙ (17時間 17分)

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

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

受講レビュー

全体

3件

2.7

3件の受講レビュー

  • artline1412님의 프로필 이미지
    artline1412

    受講レビュー 7

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    Khóa học này đã giúp tôi hiểu cách phát triển dịch vụ một cách tự nhiên từ giai đoạn hoàn thiện đến mở rộng.

    • dakgangjung123
      知識共有者

      JONG님, cảm ơn bạn vì đánh giá quý báu! Mình rất vui vì luồng từ hoàn thiện dịch vụ đến mở rộng đã được truyền đạt tốt. Mình sẽ đáp lại bằng những bài giảng tốt hơn nữa!

  • griotold님의 프로필 이미지
    griotold

    受講レビュー 32

    平均評価 4.9

    2

    30% 受講後に作成

    Haa... Phần 5. Ch.4 (Frontend) tôi đang làm trang chính. Vì bài giảng và tài liệu giảng khác nhau nên tôi đang rất vất vả để sửa bug. Có vẻ như đã upload bài giảng mà không kiểm tra nên rất tiếc. Đây không phải là bài giảng miễn phí mà phải trả tiền để nghe, nên tôi nghĩ chất lượng như thế này hơi không ổn. Mong rằng nội dung bài giảng và tài liệu giảng có thể được đồng bộ với nhau.

    • dakgangjung123
      知識共有者

      Xin chào, cảm ơn bạn đã để lại đánh giá quý báu. Chúng tôi chân thành xin lỗi vì sự bất tiện mà bạn gặp phải ở phần trang chủ frontend trong Section 5, nơi nội dung bài giảng và tài liệu không khớp nhau. Chúng tôi đã xác nhận và khắc phục các lỗi cũng như vấn đề không nhất quán xảy ra trong phần đó, đồng thời đang xem xét lại toàn bộ khóa học một cách tỉ mỉ. Chúng tôi sẽ cải thiện để bài giảng và tài liệu khớp nhau chính xác hơn, tránh gây nhầm lẫn trong quá trình học tập. Chân thành cảm ơn bạn đã chịu đựng sự bất tiện và vẫn để lại ý kiến quý báu. Chúng tôi sẽ đáp lại bằng những bài giảng tốt hơn. Cảm ơn bạn.

  • farmerkyh2857님의 프로필 이미지
    farmerkyh2857

    受講レビュー 6

    平均評価 4.3

    1

    19% 受講後に作成

    Thật tốt nếu bài giảng không chỉ đơn thuần đọc script mà giải thích rõ ràng quy trình

    • dakgangjung123
      知識共有者

      Xin chào, cảm ơn bạn đã để lại đánh giá quý báu. Như bạn đã đề cập, thay vì chỉ đơn thuần đọc theo kịch bản, tôi đáng lẽ phải giải thích quá trình và lý do một cách rõ ràng hơn, xin lỗi vì những điểm còn thiếu sót. Từ nay tôi sẽ bổ sung để các bạn có thể hiểu được luồng và nguyên lý một cách dễ dàng hơn. Chân thành cảm ơn bạn đã góp ý, tôi sẽ đáp lại bằng những bài giảng tốt hơn. Cảm ơn bạn!

¥9,530

dakgangjung123の他の講座

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

似ている講座

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