강의

멘토링

커뮤니티

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.

(2.7) 3 reviews

89 learners

Level Intermediate

Course period Unlimited

  • 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

Reviews from Early Learners

Reviews from Early Learners

2.7

5.0

JONG

100% enrolled

The course naturally progressed from service completion to scaling.

What you will gain after the course

  • 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

Voting Community, Building Everything from Frontend to Backend

I first conceived of this voting platform in winter 2024.
At that time, as you may know, Korean society was in turmoil over a political event, and public opinion was extremely divided over whether to impeach the president.

Meanwhile, I happened to come across an overseas voting platform called Polymarket, where there was a space for people to anonymously participate and share opinions in real-time, even on sensitive topics like "for or against impeachment."
Seeing that, I suddenly thought:

"Couldn't we make this too?"

That's how it started.
A simple yet meaningful community platform where you can create trending topics → share them → exchange opinions anonymously → and check the results together

I implemented that flow as a full-stack application using React, FastAPI, and Docker.
A space where people's opinions don't disappear but accumulate to create meaning.
A project that is both technically practical and personally meaningful to create - I want to complete it together with you.


🎉 Finally, the demo website is launched!

https://talkandvote-demo.site/

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

Caution

The payment feature on this demo site processes actual payments and withdraws funds.
However, this is a test payment and will be automatically canceled within a certain period, so don't worry. (If the refund is not processed after the specified time, please contact us through the Q&A section.)

Building a Voting Community Platform with React & FastAPI: Monetization with Payment System! YouTube Video

📘 Providing Lecture Summary Notes for Students

I provide lecture summary PDF notes to everyone taking this course.

From frontend to backend, it contains detailed explanations and example code for unfamiliar code.

Frontend Notes (Total 37 pages)

  • JavaScript Basic Syntax Summary

  • React Component Composition Patterns

  • # Practical Guide to Using React Hooks (useState, useEffect, useContext, etc.)

  • Tailwind CSS style code


Backend Notes (Total 75 pages)

  • # Python Syntax Basics and Example Code

  • # FastAPI Structure, Path Configuration, and Dependency Injection

  • JWT-based Authentication / Refresh Token Processing Flow Diagram

  • # DB Model Design & Relational Data Structure

  • RESTful API Design & Response Structure


🧩 Platform Key Features Preview

"Beyond Simple Voting, Towards a Participatory Community Platform"

1) Users directly create trending topics

Users can create topics on subjects they're curious about.
From entering the topic → adding options → selecting a category
A single topic is created and shared with all users through a simple form submission.

2) Check real-time voting graph after voting

The voting results can be viewed as a real-time bar graph that updates immediately after making a selection. It's designed so that anyone can participate with a single click and intuitively compare the results.

3) Membership Features Through Payment Functionality

By directly implementing integration with domestic payment systems like Toss and Kakao Pay, you'll go beyond simple feature implementation to design a monetizable platform structure.
You can experience the complete flow of generating actual revenue in your own service, including limiting topic creation based on membership tiers.

4) Implementing FastAPI Admin Page

You can manage all user, topic, and voting data in an integrated way on the FastAPI admin page.
You'll also build back-office features yourself, such as voting statistics, blocking abnormal topics, and changing user status.

Building Your Own Company Website with React, Node.js, and MongoDB: The Complete Guide

If you want to experience web development from A to Z, I recommend this course. React, Node.js You can learn the fundamentals of web development by building a website with a blog and admin page based on these technologies.

What if I was on the Titanic?! Building a Survival Probability Prediction AI Web Service with PyTorch & Next.js

"Could I have survived if I had been on the Titanic?" We'll solve this intriguing question with real data.
You can create an AI model with PyTorch, implement a backend server with FastAPI, a web interface with Next.js, and complete a full-stack project that encompasses both AI and web development.

Do you have any questions?

💬 Q1. What level of learner is this course suitable for?

I've dabbled a bit with React and Python basics, but I haven't built a complete project yet.
What level do I need to be at to follow this course?


A1. This course is designed so that anyone who has touched the basics of React and Python at least once can follow along sufficiently. Since we build everything together from start to finish, parts where concepts might be confusing are thoroughly supplemented with PDF notes and code comments. It's the perfect difficulty level if you've "tried it before" rather than being in a "perfectly knowledgeable state".

💬 Q2. Can I follow along to the end on my own? Is the practice environment difficult?

Since it's a full-stack project, I'm a bit worried... Are the environment setup and practice flow difficult? Will I be able to complete it on my own?


A2. You can definitely follow along. We won't start with anything too complex from the beginning, and the React + FastAPI + Docker setup itself is structured to be built up step by step.

And parts that might be confusing during practice are

  • Organized PDF Notes

  • Complete code for each chapter provided in Notion

  • Q&A for Error Cases

I've prepared everything like this.

The goal is to shift from asking "Can I do this on my own?"
to "How far can I expand from here?"

💬 Q3. Does the payment feature actually process payments? Or is it only available for testing?

You mentioned integrating with Toss and Kakao Pay... Does real money actually get charged?
Is it only test payments that are possible?


A3. In this course, we use the API of I'mport, a domestic PG integration service, to directly implement actual payment methods such as credit cards, Toss, and KakaoPay.

The payment request actually goes through and money is deducted.
But don't worry! If you don't have a business registration, you won't actually receive the money,
and after a certain period of time, the payment will be automatically canceled (refunded).

Points to Note Before Enrollment

✅ Operating System (OS)

  • This course can be practiced on all of the following operating systems.

    • Windows 10 or later

    • macOS (including M1/M2)

    • Ubuntu 20.04 or higher, or other Linux distributions

    • Recommended to use Chrome browser-based development environment

📦 Learning Materials Guide

# 📁 Provided Materials Format

  • Organized PDF Lecture Notes (Frontend 37 pages / Backend 75 pages)

  • Source Code Examples (Notion link provided)


  • PPT/Text-based core technology stack slides provided

  • When necessary, provide API documentation and ReadMe files that were used

📐 Data Capacity and Precautions

  • # Translation PDF file size: approximately 1MB

  • Source Code: Real-time copying available from Notion

  • All materials are shared exclusively for students.

🔎 Prerequisites (Nice to Have)

  • # HTML/CSS, JavaScript Basic Syntax

  • Understanding React Components and useState/useEffect Structure

  • Experience with Python syntax and basic functions/classes

  • React, MySQL, Docker, REST API, FastAPI are used!

※ The explanations are structured so that even complete beginners can follow along,
but we recommend familiarizing yourself with basic grammar first.

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

907

Learners

46

Reviews

58

Answers

4.6

Rating

7

Courses

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

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

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

 

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

 

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

Curriculum

All

64 lectures ∙ (17hr 17min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

3 reviews

2.7

3 reviews

  • artline1412님의 프로필 이미지
    artline1412

    Reviews 8

    Average Rating 5.0

    Edited

    5

    100% enrolled

    The course naturally progressed from service completion to scaling.

    • dakgangjung123
      Instructor

      JONG, thank you so much for your valuable review! I'm really happy to hear that the flow from service completion to expansion was well conveyed. I'll repay you with even better lectures!

  • griotold님의 프로필 이미지
    griotold

    Reviews 33

    Average Rating 4.9

    2

    30% enrolled

    Sigh... I'm working on Section 5. Ch.4 (Frontend) Main Page, and I'm having such a hard time fixing bugs because the lecture and lecture materials are different. It seems like the lecture was uploaded without proper review, which is really disappointing. This isn't even a free course - I'm paying money to take it, so I think this level of quality is a bit unacceptable. I would appreciate it if you could make sure the lecture content and materials match throughout the entire course.

    • dakgangjung123
      Instructor

      Hello, thank you for leaving such a valuable review. I sincerely apologize for the inconvenience caused by the mismatch between the lecture content and materials in the frontend main page section of Section 5 that you mentioned. We have identified and fixed the bugs and inconsistency issues that occurred in that section, and we are currently conducting a thorough review of the entire course once again. Going forward, we will improve to ensure that the lectures and materials align more accurately so there is no confusion in learning. Thank you sincerely for your valuable feedback despite the inconvenience. We will repay you with better lectures. Thank you.

  • farmerkyh2857님의 프로필 이미지
    farmerkyh2857

    Reviews 6

    Average Rating 4.3

    1

    19% enrolled

    I wish the lecture had clearly explained the process rather than simply reading from a script.

    • dakgangjung123
      Instructor

      Hello, thank you for leaving such a valuable course review. As you mentioned, rather than simply reading from a script, I should have explained the process and reasoning more clearly, and I apologize for falling short in that regard. Going forward, I will make improvements so that you can understand the flow and principles more easily. I sincerely appreciate your feedback, and I will repay you with better lectures. Thank you!

$59.40

dakgangjung123's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!