강의

멘토링

로드맵

NEW
Applied AI

/

Utilize AI

Creating a Board with Vibe Coding + Sign Up and Login (React + FastAPI)

Building React User Registration, Login + Board with Vibe Coding (React + FastAPI) is a hands-on course where you directly complete a full-stack web application using AI prompts. OpenAI Codex and Claude Code In this course, you'll connect a React (TypeScript) frontend with a FastAPI backend to implement: User registration & login functionality Board CRUD (create, read, update, delete) JWT authentication and authorization handling all within a single project. Particularly, rather than just stopping at writing code, 👉 AI prompt code generation → execution and modification → testing → expansion Through this "Vibe Coding" learning approach, you can experience a new development flow of working together with AI. After completing the course, you'll be able to directly finish your own "member-only board service," and additionally challenge yourself with extended features like comments, likes, and image uploads.

2 learners are taking this course

  • Kyung-il In
바이브코딩
Reactjs
FastAPI
풀스택
인공지능
React
Node.js
TypeScript
AI

What you will learn!

  • AI-Based Development Experience

  • Frontend (React + TypeScript)

  • Backend (FastAPI)

  • Vibe coding CRUD development

Create React Sign-up Login + Board with VibeCoding (React + FastAPI)

VibeCoding: Building a Full-Stack Membership/Login + Board System with React + FastAPI

  • This course is a project-based lecture that implements sign-up/login functionality and board CRUD functionality, which are most commonly used in actual services, by utilizing both frontend (React) and backend (FastAPI) together.

You'll learn this kind of content

  1. Development Environment Setup

    • Node.js, Python, VS Code, GitHub and other basic tool installation and utilization

    • Linux(WSL) based development environment experience

  2. AI-Based Development Workflow

    • OpenAI Codex CLI Usage

    • Claude Code Usage Guide

    • Prompt writing → Automatic code generation → Error correction & improvement

  3. Frontend (React)

    • Creating Board UI (List, Write, Edit/Delete)

    • Sign-up/Login Screen Configuration


  4. Backend (FastAPI)

    • Implementing Board CRUD API

    • User Registration/Login API + JWT Authentication/Authorization

    • Permission handling (edit/delete only your own posts)

  5. Project Integration

    • React Frontend ↔ FastAPI Backend Integration

    • Complete service flow (Sign up → Login → Write post → Edit/Delete) finished

    • Practical Full-Stack Web Service Development Experience


🎯 Learning Results

  • Complete Your Own Full-Stack Web Service

  • Acquiring AI Development Tool Utilization Skills

  • React + FastAPI Integration Experience

  • Direct implementation of core logic for a web service called Member Management + Board CRUD


👉 In short, this course provides the experience of "completing a web service where users can log in to my service, write posts, and manage content" as a full-stack application using AI tools.

The person who created this course

Hello, I'm Kyung-il In.

  • Completed KAIST Graduate School of Management

  • Kookmin University Master's

  • Hanyang University Ph.D. (in progress)

  • Artificial Intelligence-Based Big Data Analysis

  • AI Chatbot Engine and Chatbot System Development

  • Android POS system and server development

    Research field

  • A Study on Improving Electronic Document Reliability Using Blockchain and Distributed File Systems

  • Research on Data Value Formation and Creation Using Blockchain Systems

  • Research on Industrial Application of AI Chatbot Systems and RPA Utilization

  • Research on Multi-Domain Conversational Chatbot Systems

Pre-enrollment Reference Information

Practice Environment

  • CPU: Intel i5 (4 cores or more) or AMD Ryzen 5 or higher

  • Memory (RAM): 8GB or more (4GB is possible for practice only, but there will be speed degradation)

  • Disk: 10GB or more free space (including Node modules, Python virtual environment, DB file storage)

  • Graphics Card (GPU): Not essential (web development relies on CPU performance)

Learning Materials - Notion Link Provision Method

  • Course Introduction Page: Course overview, curriculum, and pre-enrollment preparation summary

  • Hands-on Guide Document: Installation Methods, Development Environment Setup, Command Collection

  • Example Code/Screenshots: You can immediately check the examples shown during the lecture

  • Additional Learning Materials: Organized links to official documentation, blogs, and reference videos

Prerequisites and Important Notes

  • Web Development Fundamentals

  • Recommended Prerequisites

    • You can take this course even if you're new to React, but knowing the concept of components will help you understand faster.

    • If you know the basic syntax of Python, learning FastAPI will be easier.

👉 Difficulty: Beginner ~ Intermediate
👉 This course is more suitable for those who have some experience with web development rather than complete programming beginners.

Recommended for
these people

Who is this course right for?

  • Beginners who are just starting web development

  • Frontend/Backend developers who want to challenge themselves with full-stack development

  • Learners interested in AI-based development methods (Vibe Coding)

  • Learners who need toy project ideas

  • Those looking for short, intensive, hands-on lectures

Need to know before starting?

  • CHAT GPT

  • React.js

  • FastAPI

Hello
This is

1,045

Learners

29

Reviews

21

Answers

4.9

Rating

3

Courses

열공

Curriculum

All

20 lectures ∙ (1hr 44min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$35,750.00

35%

$42.90

Kyung-il In's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!