inflearn logo

Building a Voting Community Platform with React & FastAPI: From Development to Monetization with a Payment System!

In this course, we will practice step-by-step how to use React and FastAPI to implement social features such as real-time voting, comments, and likes, as well as how to monetize by integrating payment systems (Kakao Pay, Toss Pay, etc.).

(2.7) 3 reviews

92 learners

Level Intermediate

Course period Unlimited

React
React
MySQL
MySQL
Docker
Docker
REST API
REST API
FastAPI
FastAPI
React
React
MySQL
MySQL
Docker
Docker
REST API
REST API
FastAPI
FastAPI

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

  • Implementation of a social community platform including voting, like, and comment features

  • Building a JWT authentication and user login/signup system

  • Integration of a monetization system via the I'mport payment API

  • Experience with the entire web service workflow, from setting up a Docker-based development environment to DB design, API documentation, and deployment.

Building a voting community from scratch: From frontend to backend

I first thought of this voting platform in the winter of 2024.
As you well know, at that time, Korean society was in a state of turmoil due to a certain political event, and it was a period when public opinion regarding the impeachment of the president was extremely polarized.

In the midst of that, I happened to come across an overseas voting platform called Polymarket, and I saw that there was a space where people could participate anonymously and share their opinions in real time, even on sensitive topics like "for or against impeachment."
Seeing that, a thought suddenly occurred to me:

"Couldn't we make this too?"

That's how it all started.
A simple yet meaningful community platform where you can create a trending topic → share it → 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 someone's opinion doesn't disappear, but accumulates to become meaningful.
I want to complete this project with you—a project that is both technically practical and something I personally wanted to create..


🎉 The demo website is finally live!

https://talkandvote-d721d.web.app/

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

Precautions

The payment function on this demo site involves actual transactions where funds will be withdrawn.
However, please be assured that these are test payments and will be automatically canceled within a certain period. (If a refund is not processed after some time, please contact us through the Q&A section.)

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

📘 Lecture summary notes provided for students

We provide lecture summary PDF notes to everyone who takes this course.

From frontend to backend, we have included detailed explanations and example codes for any unfamiliar code.

Frontend Notes (Total 37 pages)

  • Summary of basic JavaScript syntax

  • React component composition methods

  • Practical usage of React Hooks (useState, useEffect, useContext, etc.)

  • Tailwind CSS style code


Backend Notes (Total 75 pages)

  • Python Grammar Basics and Example Code

  • FastAPI structure, route configuration, and dependency injection

  • JWT-based Authentication / Refresh Token Processing Flowchart

  • DB Model Design & Relational Data Configuration

  • RESTful API Design & Response Structure


🧩 Preview of Key Platform Features

"Beyond simple voting, toward a participatory community platform"

1) Users directly create trending topics

Users can create topics about subjects they are curious about.
From entering a subject → adding options → to selecting a category,
a single topic is created and shared with all users just by filling out a simple form.

2) Check real-time voting graphs after voting

Voting results can be viewed through a real-time bar graph that is updated immediately after selection. It is designed so that anyone can participate with a single click and intuitively compare the results.

3) Membership functionality through payment features

By directly implementing integration with domestic payment systems such as Toss and Kakao Pay, you will go beyond simple functional implementation to design a monetizable platform structure.
You can experience everything from limiting the number of topics created based on membership levels to the actual revenue-generating workflow within your own service.

4) Implementing the FastAPI Admin Page

You can manage all user, topic, and voting data collectively through the FastAPI admin page.
You will also directly configure back-office functions such as voting statistics, blocking inappropriate topics, and changing user status.

Creating 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 based, you can learn the standard of web development by creating a website complete with a blog and an admin page.

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

We explore the intriguing question, "If I had been on the Titanic, would I have survived?" using real-world data.
You can complete a full-stack project that encompasses both AI and web development by creating an AI model with PyTorch, implementing a backend server with FastAPI, and building a web interface with Next.js.

Do you have any questions?

💬 Q1. What level of experience is recommended for someone taking this course?

I've dabbled in the basics of React and Python, but I haven't built a complete project yet.
What level of proficiency is required to follow this course?


A1. This course is designed so that anyone who has at least touched the basics of React and Python can follow along. Since we build everything together from start to finish, I have supplemented parts where concepts might get confusing with detailed PDF notes and code comments. It is the perfect difficulty level for those who are at the stage of “I’ve done it before” rather than “I know it perfectly.”

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

Since it's a full-stack project, I'm feeling a bit pressured... Is the environment setup or the practice flow difficult? Will I be able to complete it all on my own?


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

And for the parts that might be confusing during the hands-on practice,

  • Organized PDF notesGhi chú PDF đã được tổng hợp

  • Full code provided for each Notion chapter

  • Q&A for error resolution

Everything has been prepared like this.

The goal is to change the question from "Can I do this on my own?" to
"How far can I expand from here?"

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

You mentioned integrating Toss and Kakao Pay… does real money actually get deducted?
Is only test payment possible?


A3. In this course, we will directly implement actual payment methods such as credit cards, Toss, and Kakao Pay by utilizing the API of I'mport, a domestic PG integration service.

An actual payment request will be made and money will be withdrawn.
But don't worry! If you are not registered as a business, you cannot actually receive the money,
and after a certain period of time, the payment will be automatically cancelled (refunded).

Notes before taking the course

✅ Operating System (OS)

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

    • Windows 10 or higher

    • macOS (including M1/M2)

    • Ubuntu 20.04 or higher, or other Linux distributions

    • Recommended to use a Chrome browser-based development environment

📦 Learning Materials Guide

📁 Provided Material Formats

  • Organized PDF lecture notes (37 pages for Frontend / 75 pages for Backend)

  • Source Code Examples (Notion link provided)


  • PPT/text-based core technology stack slides provided

  • API documentation and ReadMe files used will be provided if necessary

📐 Material Size and Precautions

  • PDF size: approximately 1MB

  • Source Code: Real-time copying available on Notion

  • All materials are for student-only sharing.

🔎 Prerequisite Knowledge (Optional)

  • Basic HTML/CSS and JavaScript syntax

  • Understanding of React components and useState/useEffect structures

  • Experience with Python syntax and using simple functions/classes

  • React, MySQL, Docker, REST API, and FastAPI will be used!

※ Although the explanations are structured so that even complete beginners can follow along,
it is recommended to familiarize yourself with the basic syntax.

Recommended for
these people

Who is this course right for?

  • Developers who want to implement payment features (Kakao Pay, Toss Pay, etc.) into their websites

  • Those who want to experience a full-stack project utilizing React and FastAPI together

  • Those who want to implement user-participatory community services (comments, likes, voting, etc.)

  • Those who want to learn the entire workflow of a web service, including Docker and deployment.

Need to know before starting?

  • Basic concepts of React (component structure, props/state, basic hook usage such as useState, useEffect, etc.)

  • Basic structure of FastAPI (defining routers, handling requests/responses)

  • Python Syntax Basics (Functions, Classes, List/Dictionary usage, etc.)

Hello
This is dakgangjung123

1,693

Learners

80

Reviews

65

Answers

4.5

Rating

9

Courses

Hello! I am a graduate of Sogang University's Computer Science and Engineering department, and I am currently preparing for graduate school.

I fell in love with programming in high school when I happened to start full-stack web development and automated trading using Python.

Since then, I have shared my skills and know-how through various projects and programming tutoring activities. Based on these experiences, I am striving to create lectures that make even those new to programming feel, "Wow, this can be so easy!"

I want to help you learn through practical examples and friendly explanations. Thank you.

Go to GitHub Repository (Click!)

More

Curriculum

All

64 lectures ∙ (17hr 17min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

3 reviews

2.7

3 reviews

  • artline1412님의 프로필 이미지
    artline1412

    Reviews 9

    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 34

    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!

dakgangjung123's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

25% off for new members

$49.40

25%

$59.40