Programming

Full-stack

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!

In this course, you will practice step-by-step using React and FastAPI to implement social features like real-time voting, comments, and likes, as well as integrating payment systems (KakaoPay, TossPay, etc.) for monetization.

74 learners are taking this course

dakgangjung123

리액트감잡기

백엔드이해하기

도커활용하기

결제기능구현

aws배포

React

MySQL

Docker

REST API

FastAPI

What you will learn!

How to develop a full-stack web app using React and FastAPI
Social community platform implementation with voting, likes, and comments features
JWT Auth and User Login/Signup System Building
Integration of monetization system using I'mport Payment API
Experience the entire web service flow from Docker-based development environment setup to DB design, API documentation, and deployment

Building a Voting Community from Front to Back End

It was in the winter of 2024 that I first came up with this voting platform.
As you all know, Korean society at the time was in turmoil over a political incident, and as a result, public opinion was extremely divided over whether to impeach the president.

Then, by chance, I came across an overseas voting platform called Polymarket , where there was a space where people could anonymously participate and share their opinions in real time, even on sensitive topics like “for or against impeachment.”
As I was looking at it, this thought suddenly occurred to me:

"Can't we make this too?"

That's how it started.
Create a hot topic → share it → share opinions anonymously → check the results together
A simple yet meaningful community platform.

We implemented the flow in a full stack using React, FastAPI, and Docker.
A space where someone's opinion does not disappear, but rather accumulates and becomes meaningful.
I would like to complete a project that is both technically practical and something I have personally wanted to create together with you.

🎉 The demo website is finally released!

https://talkandvote-demo.site/

Discussion and voting all in one place! Experience it for yourself.

⚠ Note

The payment function on this demo site actually processes payments and withdraws money.
However, please be assured that this is a test payment and will be automatically cancelled within a certain period of time . (If the refund is not issued after a certain period of time, please contact us through the Q&A post.)

📦 Patch Notes

Payment functionality implemented (June 16, 2025)
Complete implementation and testing of the user payment system
AWS-based HTTPS domain deployment complete (June 17, 2025)
Uploading a lecture on HTTPS deployment using AWS EC2 + DuckDns + Nginx combination

🔄 Ongoing update plan

Additional feature lectures prepared by our team will follow every month.
We are also receiving feedback through [ Google Form ] to collect the features you want.
We plan to teach the most requested features first, on a first-come, first-served basis .

💬 Q1. What level of person would be good to take this course at?

I've covered the basics of React and Python, but I haven't created a complete project yet.
What level of student would be able to follow this course?

A1. This course is structured so that anyone who has ever touched React and Python basics can follow along. Since we are building together from beginning to end, I have supplemented the parts where the concepts can be confusing here and there with PDF notes and code comments . It is a level of difficulty that is just right for those who “have tried it” rather than “know it perfectly.”

💬 Q2. Can I follow along until the end on my own? Isn't the practical environment difficult?

I feel a bit burdened because it is a full-stack project… Isn’t the environment setup or the practice flow difficult? Can I complete it by myself?

A2. You can follow along. It doesn't start too complicatedly from the beginning, and the React + FastAPI + Docker configuration itself is structured to be built up step by step .

And the part that can be confusing during the practice is

Organized PDF Notes
Full code provided for each Notion chapter
Questions and answers when an error occurs

I've prepared everything like this.

Rather than asking, “Can I do this on my own?”
The goal is to change the question to “How far can I expand from here?”

💬 Q3. Does the payment function actually make payments? Is it only for testing?

You said you were linking Toss and Kakao Pay… Will money really be lost?
Is it only possible to make a test payment?

A3. In this lecture, we will use the API of a domestic PG linkage service called I'mport to directly implement actual payment methods such as credit cards, Toss, and Kakao Pay .

A payment request actually goes in and money is deducted.
But don't worry! If you are not registered as a business, you will not actually receive the money .
After a certain period of time , the payment will be automatically cancelled (refunded) .

Recommended for
these people

Who is this course right for?

A developer who wants to implement payment features (Kakao Pay, Toss Pay, etc.) on a website
Those who want to gain experience with a full-stack project using React and FastAPI.
Those who want to implement user participation community services (comments, likes, votes, etc.)
For those who want to learn the entire flow of a web service, including Docker and deployment.

Need to know before starting?

Basic concepts of React (component structure, props/state, basic hook usage like useState, useEffect, etc.)
FastAPI's basic structure (defining routers, request/response handling)
Python grammar basics (functions, classes, list/dictionary usage, etc.)

Hello
This is

424

Learners

Reviews

Answers

5.0

Rating

Courses

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

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

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

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

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

Curriculum

All

63 lectures ∙ (17hr 17min)

Course Materials:

Lecture resources

Section 1. Ch.0 Lecture Intro & Basic Setup

6 lectures ∙ (24min)

Section 2. Ch.1 Docker Installation and Basic Configuration

4 lectures ∙ (29min)

7. 1-1. What is Docker?
02:45
8. 1-2. Docker Installation and Startup
01:51
9. 1-3. Creating and Running Dockerfile and docker-compose.yml
17:50
10. 1-4. Using wait-for-it.sh
06:48

Section 3. Ch.2 (Frontend) Creating a Menu Bar

4 lectures ∙ (1hr 26min)

11. 2-1. Frontend folder structure
01:57
12. 2-2. Making a Navbar.jsx Menu Bar (Part 1)
31:05
13. 2-3. Making the Navbar.jsx Menu Bar (Part 2)
33:07
14. 2-4. Creating Navbar.jsx Menu Bar (Part 3)
19:55

Section 4. Ch.3 (Frontend) Login, Signup Modal Window Creation

3 lectures ∙ (1hr 5min)

Section 5. Ch.4 (Frontend) Creating the Main Page

5 lectures ∙ (1hr 45min)

Section 6. Ch.5 (Frontend) Topic Creation Page Development

2 lectures ∙ (50min)

Section 7. Ch.6 (Frontend) Creating the Topic Detail Page

4 lectures ∙ (2hr 32min)

Section 8. Ch.7 (Backend) Implementation of User Registration and Login Features

3 lectures ∙ (1hr 11min)

Section 9. Ch.8 (Full-stack) Login/Sign-up Integration (JWT Token Issuance)

3 lectures ∙ (1hr 3min)

Section 10. Ch.9 (Backend) Implementing Topic Feature

2 lectures ∙ (49min)

Section 11. Ch.10 (Backend) Implementing Voting Feature

3 lectures ∙ (1hr 2min)

Section 12. Ch.11 (Backend) Implementing Topic Features (Comments, Likes)

2 lectures ∙ (36min)

Section 13. Ch.12 (Backend) Implementing Reply Functionality

2 lectures ∙ (20min)

Section 14. Ch.13 (Backend) Like Implementation

2 lectures ∙ (28min)

Section 15. Ch.14 (Full Stack) Complete Front-end & Back-end Integration

5 lectures ∙ (38min)

Section 16. Ch.15 (Full-stack) Admin Features Implementation (User Info & Topic Management)

1 lectures ∙ (5min)

Section 17. Ch.16 (Full-stack) Implementing Membership Payment Function (Part 1) (Upload Complete)

4 lectures ∙ (1hr 6min)

Section 18. Ch.17 (Full-stack) Implement Membership Payment Feature (Part 2) (Upload Completed)

4 lectures ∙ (1hr 2min)

Section 19. Ch.18 Deploying (Upload Complete)

4 lectures ∙ (18min)

Section 20. New Features (Update date: 2025-05-31)

0 lectures

Published:

Last updated:

Reviews

Not enough reviews.

Please write a valuable review that helps everyone!

$59.40

dakgangjung123's other courses

Check out other courses by the instructor!

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

React, Node.js, MongoDB를 활용해 회사 웹사이트를 직접 제작하는 과정을 배울 수 있는 실전 강의입니다. 간단한 React, Node.js 배경으로 풀스택 프로젝트를 같이 만들어요!

중급이상

React, Node.js, MongoDB

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

🔥 HTML + Tailwind CSS + 순수 JavaScript만으로 완성하는 Firebase 사용자 인증! 소셜 로그인·휴대폰·위치 인증까지, 복잡한 백엔드 없이 쉽고 빠르게 계정 시스템 구축합니다.

초급

HTML/CSS, JavaScript, Firebase

Firebase 시리즈 #1: 소셜 로그인·휴대폰·위치 인증 완벽 가이드

닭강정

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

Similar courses

Explore other courses in the same field!

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

초급

MongoDB, Express, React

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

중급이상

React, Node.js, MongoDB

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

닭강정

처음하는 파이썬 백엔드 FastAPI 입문 (FastAPI부터 비동기 SQLAlchemy까지) [풀스택 Part1-2]

잔재미코딩 DaveLee

최신 풀스택과 백엔드를 위해 쉽고 성능도 빠른 FastAPI, 쉽게 차근차근 백엔드 개념부터 FastAPI 핵심 문법과 비동기 데이터베이스 활용까지 깔끔한 자료와 프로젝트로 정리할 수 있는 강의입니다.

초급

FastAPI, Python, backend

처음하는 파이썬 백엔드 FastAPI 입문 (FastAPI부터 비동기 SQLAlchemy까지) [풀스택 Part1-2]

잔재미코딩 DaveLee

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

코배투

React로 광고 수익형 웹사이트를 만들어 봅니다. 광고를 최적화 하고 서버 비용을 줄이기 위한 방법과 규모에 따른 사이트 운영 Tip까지 배워봅니다.

초급

React, AWS, cloudflare

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

코배투

Spring Boot를 활용하여 채팅 플랫폼 만들어보기

Hong

Spring Boot를 활용하여 JWT, ws 통신에 대해서 학습하며, 대용량 TPS를 처리하는 방법에 대해서 학습하실 수 있습니다.

초급

Spring Boot, JWT, websocket

Spring Boot를 활용하여 채팅 플랫폼 만들어보기

Hong

React 비기너: 튼튼한 기본 만들기

김영보

React 기본을 배울 수 있습니다. React와 관련된 HTML, JavaScript, DOM, Event, Object, Module, OOP 등을 정리할 수 있습니다.

초급

React, JavaScript, DOM

React 비기너: 튼튼한 기본 만들기

김영보

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

타입스크립트와 리액트 관련 강좌입니다.

중급이상

React, TypeScript

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

대세는 쿠버네티스 (초급~중급편)

일프로

[Update 2025.04] 이론과 실습으로 가성비 있게 쿠버네티스에 대한 실력을 높여 보세요. 이 강좌를 통해 여러분도 대세에 쉽게 편승할 수 있게 됩니다.

초급

Docker, Kubernetes, devops

대세는 쿠버네티스 (초급~중급편)

일프로

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

중급이상

Next.js, React, react-query

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

섹쉬 PHP 강좌 - PHP 기본부터 MYSQL, XML, 네이버쇼핑검색 을 이용한 활용까지

샵투월드

막강한 웹 언어인 PHP 에 대해서 기초부터 심화까지 배울수 있습니다.

초급

PHP, MySQL

섹쉬 PHP 강좌 - PHP 기본부터 MYSQL, XML, 네이버쇼핑검색 을 이용한 활용까지

샵투월드

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

정재남

개발부터 배포까지! 하나의 서비스를 완성하기 위한 험난한 여정을 여과없이 보여드립니다. 처음 써보는 기술들을 잔뜩 도입하여 좌충우돌 우당탕탕하면서도 어떻게든 헤쳐나갈 수 있어요!

초급

React, GraphQL, Firebase

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

정재남

WEB2 Node.js-MySQL

Egoing Lee

이 수업은 Node.js와 MySQL을 이용해서 웹애플리케이션을 만드는 방법에 대한 수업입니다.

중급이상

MySQL, Node.js

WEB2 Node.js-MySQL

Egoing Lee

주니어를 위한 3시간 만에 끝내는 도커+컨테이너

코드쿼카

전 세계 2,000만 명 이상의 개발자가 사용하는 기술 스택인 도커! 수많은 개발자들의 기본 기술스택으로 자리잡은 도커와 컨테이너 개념에 대해 공식 문서를 따라가며 공부합니다! 시중에 나온 기술문서들 중, 특히나 두꺼운 도커 책들을 보며 시작하기도 전에 겁먹으셨을거라고 생각해요. 이 강의는 도커 공식 문서를 기반으로 핵심 내용을 짚어주며, 실습 위주의 탄탄한 커리큘럼으로 구성되어 있습니다. 실습 위주로 학습하고 빠르게 실무 적용을 도와드릴 것으로 약속드릴 수 있어요! 강의를 마치면 실무적으로 다양하게 도커를 사용할 수 있게 될 거에요!

입문

Docker, docker-compose, docker-volume

주니어를 위한 3시간 만에 끝내는 도커+컨테이너

코드쿼카

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

빠른 실행과 검증의 시대, 바이브 코딩으로 누구보다 빠르게 실행하세요! 광고, 결제 등 수익화까지 빼놓지 않고 내 손으로 이루어 보세요.

입문

React, 웹앱, Next.js

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

PHP 프로그래밍 실무 완전 정복! with MySQL

유용한IT학습

본 강의는 PHP 프로그래밍 활용 개념 습득 및 실습을 위한 강좌로 기획되었으며, PHP 프로그래밍 활용개념을 습득하고자하는 수강생들을 위한 강좌입니다.

입문

PHP, phpmyadmin, MySQL

PHP 프로그래밍 실무 완전 정복! with MySQL

유용한IT학습

AI 시대, 이제 현업이 개발한다! Cursor와 ChatGPT로 시작하는 바이브코딩

개발하는 분석가

개발팀 눈치 보지 말고, 이제 내가 직접 만든다! 이 강의는 기획, 마케팅, 영업 등 실무 담당자가 개발자 도움 없이 AI도구를 활용하여 웹서비스의 핵심 기능을 직접 구현할 수 있도록 도와줍니다.

초급

Python, FastAPI, cursor

AI 시대, 이제 현업이 개발한다! Cursor와 ChatGPT로 시작하는 바이브코딩

개발하는 분석가

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

WEB3 - PHP & MySQL

Egoing Lee

PHP와 MySQL을 연동해서 웹의 접근성과 데이터베이스의 탁월한 정보관리 기능을 모두 갖춘 현대적인 웹애플리케이션을 구현하는 방법을 알려드리는 수업입니다.

중급이상

MySQL, PHP

WEB3 - PHP & MySQL

Egoing Lee

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

초급

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!

What you will learn!

Building a Voting Community from Front to Back End

🎉 The demo website is finally released!

https://talkandvote-demo.site/

⚠ Note

📦 Patch Notes

🔄 Ongoing update plan

📘 Lecture summary notes provided for students

Frontend Notes (37 chapters total)

Backend Notes (75 pages total)

🧩 Preview of the platform's key features

"Beyond simple voting, to a participatory community platform"

1) Users create their own hot topics

2) Check the real-time voting graph after voting

3) Membership function through payment function

4) Implementing FastAPI Admin Page

Do you have any questions?

💬 Q1. What level of person would be good to take this course at?

💬 Q2. Can I follow along until the end on my own? Isn't the practical environment difficult?

💬 Q3. Does the payment function actually make payments? Is it only for testing?

Things to note before taking the class

✅ Operating System (OS)

📦 Guide to learning materials

📁 Provided data format

📐 Data capacity and notes

🔎 Player Knowledge (good to have)

Recommended for
these people

Hello
This is

Curriculum

Reviews

dakgangjung123's other courses

Similar courses

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!

What you will learn!

Building a Voting Community from Front to Back End

🎉 The demo website is finally released!

https://talkandvote-demo.site/

⚠ Note

📦 Patch Notes

🔄 Ongoing update plan

📘 Lecture summary notes provided for students

Frontend Notes (37 chapters total)

Backend Notes (75 pages total)

🧩 Preview of the platform's key features

"Beyond simple voting, to a participatory community platform"

1) Users create their own hot topics

2) Check the real-time voting graph after voting

3) Membership function through payment function

4) Implementing FastAPI Admin Page

Do you have any questions?

💬 Q1. What level of person would be good to take this course at?

💬 Q2. Can I follow along until the end on my own? Isn't the practical environment difficult?

💬 Q3. Does the payment function actually make payments? Is it only for testing?

Things to note before taking the class

✅ Operating System (OS)

📦 Guide to learning materials

📁 Provided data format

📐 Data capacity and notes

🔎 Player Knowledge (good to have)

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

dakgangjung123's other courses

Similar courses

Recommended for
these people

Hello
This is