강의

멘토링

커뮤니티

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

87 learners

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

Reviews from Early Learners

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

729

Learners

32

Reviews

57

Answers

4.7

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

  • JONG님의 프로필 이미지
    JONG

    Reviews 7

    Average Rating 5.0

    Edited

    5

    100% enrolled

    서비스가 완성부터 확장까지 자연스럽게 이어지는 강의였습니다.

    • 닭강정
      Instructor

      JONG님, 소중한 리뷰 감사합니다! 서비스 완성부터 확장까지의 흐름이 잘 전달되었다니 정말 기쁩니다. 더 좋은 강의로 보답하겠습니다!

  • 고리오영감님의 프로필 이미지
    고리오영감

    Reviews 32

    Average Rating 4.9

    2

    30% enrolled

    하... 섹션 5. Ch.4 (프론트엔드) 메인 페이지를 하고 있는데요. 강의랑 강의자료가 달라서 버그 잡느라 너무 고생입니다. 검수를 안하고 강의를 업로드한 거 같아서 너무 아쉽습니다. 무료 강의도 아니고 돈 내고 듣는데, 이정도 퀄리티는 조금 아닌 거 같아요. 전체적으로 강의 내용과 강의자료가 일치가 되도록 해주셨으면 좋겠습니다.

    • 닭강정
      Instructor

      안녕하세요, 소중한 수강평 남겨주셔서 감사합니다. 말씀해주신 섹션 5의 프론트엔드 메인 페이지 부분에서 강의 내용과 자료가 일치하지 않아 불편을 드린 점 진심으로 죄송합니다. 해당 구간에서 발생한 버그와 불일치 문제를 확인하고 수정하였으며, 전체 강의를 다시 한 번 꼼꼼히 검토 중입니다. 앞으로는 강의와 자료가 보다 정확히 맞물려 학습에 혼란이 없도록 개선하겠습니다. 불편을 감수하시면서도 귀중한 의견 남겨주셔서 진심으로 감사드립니다. 더 나은 강의로 보답드리겠습니다. 감사합니다.

  • farmerkyh님의 프로필 이미지
    farmerkyh

    Reviews 6

    Average Rating 4.3

    1

    19% enrolled

    단순히 script를 읽는 강의가 아닌 과정을 명확히 설명을 해줬으면 좋았겠네요

    • 닭강정
      Instructor

      안녕하세요, 소중한 수강평 남겨주셔서 감사합니다. 말씀해주신 부분처럼 단순히 스크립트를 읽는 느낌보다는 과정과 이유를 더 명확히 설명드렸어야 했는데 부족했던 점 죄송합니다. 앞으로는 흐름과 원리를 더 쉽게 이해하실 수 있도록 보완하겠습니다. 지적해주셔서 진심으로 감사드리고, 더 나은 강의로 보답드리겠습니다. 감사합니다!

$59.40

dakgangjung123's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!