강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Bite-sized Real-world Projects - SNS Edition

Now it's time to take on the real challenge 🔥 Let's develop a professional-grade SNS together using React.js + TypeScript + Supabase, creating features like authentication & authorization, infinite scroll, image upload, likes, infinite nested comments, dark mode, and more. Throughout this process, we'll also explore server and global state management techniques using Zustand and Tanstack Query.

(5.0) 64 reviews

1,140 learners

  • winterlood
  • hyobin
이론 실습 모두
실전프로젝트
한입시리즈
react.js
supabase
zustand
react-query
React
TypeScript

Reviews from Early Learners

What you will gain after the course

  • We'll create a professional-level SNS project using React.js + TypeScript + Supabase.

  • We'll create features such as authentication & authorization, infinite scroll, image upload, likes, infinitely nested comments, dark mode, and more.

  • We'll explore server and global state management techniques using Zustand and Tanstack Query.

React.js + TypeScript through

Let's build a professional-grade SNS service.

If you've been repeating tutorials, now it's time to challenge yourself with a real-world project.

In this course, we will utilize React.js + TypeScript + Supabase to

We'll build a production-ready SNS service from start to finish that can be provided to real users.

Demo Site: https://demo-onebite-log.vercel.app/

> Test account email: test@onebitefe.com

> Test account password: 123456


Not just simple UI implementation,

Build the core featuresthat make up real services yourself.

This course is not a tutorial that simply teaches UI or CRUD implementation.

Authentication/authorization, image upload, infinite scroll, likes, infinitely nested comments, dark mode, etc.

Today, we directly design and implement core functionalities used in real-world services.


⚙️ User Authentication & Authorization

  • Email Sign Up/Login

  • Social Login (GitHub)

  • Find Password

  • Session Management

  • Authorization using RLS

⚙️ Feed Infinite Scroll

  • Managing infinite scroll feeds using useInfiniteQuery

  • Cache Data Management


⚙️ Attach Image

  • Image Upload and Management Using Supabase Storage

  • Post and profile image upload functionality implementation


⚙️ Like

  • Resolving Concurrency Issues (RPC)

  • Fast result reflection through cache manipulation


⚙️ Infinite Nested Comments

  • Implementing Infinite Nested Comment Functionality

  • Recursive Component Rendering


⚙️ Theme Change Feature

  • Provides system, dark, and light themes

  • Implementing Theme Persistence and Flicker Prevention Using Persist




Introducing tools for more powerful React apps

TailwindCSS + Zustand + Tanstack Query

To handle complex features well, our tools must also be upgraded together.

In this course, you will learn each of the powerful tools outlined below one by one

I plan to actively utilize this in actual projects.


Tailwind CSS


Shadcn/ui


  • Tailwind CSS-based design library

  • Provides high-quality components (ex. Input, Button, Dialog, etc.)

  • https://ui.shadcn.com/

Zustand


Tanstack Query



This is not just follow-along clone coding.

It perfectly covers the background and structure of the features, along with complete conceptual explanations.

This course is absolutely not just a simple code-along tutorial that ends with typing.

Why it's implemented that way, and what flow it's structured with

I've included plenty of theoretical explanations so you can directly understand and absorb the material.

Course Enrollment Target Audience Guide

This course is designed for those who have a foundation in React.js and TypeScript.

If you are not familiar with the above technologies, we recommend taking the prerequisite courses below first.

5 Principles of the One Bite Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just like the same food tastes better when it looks good,
I think the same concept explanation will be easier to understand with more intuitive and attractive visual materials.

Therefore, I made continuous efforts to create intuitive visual materials including animations.

⚖ Principle 2. Kindness

When new terms or concepts appeared, I didn't roughly explain them and move on, nor did I assume you would already know them. I made every effort to ensure you wouldn't need to do separate googling while taking the course.

⚖ Principle 3. Plausibility

To maintain students' interest, I always created lectures while considering plausibility - ensuring that when new content appears during the lecture, it is always connected to the previous content and that you don't feel like the flow is suddenly interrupted.

⚖ Principle 4. Good Vocalization and Diction

Since you'll be listening to my voice for a long time, I'm always working hard to maintain good vocalization and diction.
To achieve this, I've created the lectures so that you can understand everything even when played at 2x speed.

Give it a listen! 2x Speed Playback Link

⚖ Principle 5. Communication

Students gather in the exclusive community to share knowledge and news with each other and grow together.

Knowledge Sharer Introduction


Lee Jeong-hwan | Winterlood

A frontend developer & educator who believes
there's always a way to explain anything easily and fun

Recommended for
these people

Who is this course right for?

  • Students of the One Bite series (React.js + TypeScript course completers)

  • Those who already have knowledge of React.js and TypeScript

  • Those who want to move beyond tutorial-level content and take on real-world projects

  • People looking for courses where Q&A responses occur at least once daily, Monday through Friday

  • Those looking for courses with active student communities directly managed by the instructors

Need to know before starting?

  • React.js Basics (One-bite React course student level)

  • TypeScript Basics (One Bite TypeScript Course Student Level)

Hello
This is

35,721

Learners

2,366

Reviews

1,528

Answers

4.9

Rating

13

Courses

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

Curriculum

All

88 lectures ∙ (22hr 9min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

64 reviews

5.0

64 reviews

  • 민경언님의 프로필 이미지
    민경언

    Reviews 15

    Average Rating 3.3

    5

    31% enrolled

    인프런에서 꽤 많은 유료 강의를 들었는데..모든 면에서 이정환님의 강의는 최고 입니다. 그래서 이정환님의 강의는 모두 들었습니다. 이번 리액트 SNS 강의도 좋으네요.. 이정환님의 강의는... 1. 강의 준비를 해온 것이 들으면서 느껴집니다. => 다른 강사들의 영상을 보면 거의 대부분 스크립트 준비 같은 건 안합니다. 대부분 제목 수준의 내용만 준비 하는 것 같습니다. 그러다 보니 영상을 보면 버벅 거리고, 한 말 또 하고.. 예제가 결과와 다르게 나오고..어떤 경우는 하도 침을 꼴깍 넘기는 소리를 너무 많이 내서 더러워서 이후로 듣지 않은 것도 있습니다. 그런데 이정환님의 강의는 촬영 전에 스크립트를 철저히 준비 하는 것이 보다 보면 느껴집니다. 그러니까 중언도 없고, 진행이 매끄럽습니다. 매우 만족 스럽고, 정말 돈을 내고 들을 만 하다고 느껴 집니다. 2. 강의 환경 준비를 잘 합니다. => 다른 강사들의 영상과 다르게 처음 부터 끝까지 음향이 일정 합니다. 이정환님의 강의를 보면 거의 움직이지 않고 촬영 합니다. 움직이면 음성이 고른 높낮이로 녹음이 되지 않기 때문에 그런 것 같습니다. 3. 강의 내용 품질이 좋습니다. => 다른 강사들의 영상을 보면 대부분 PPT에 그냥 타이핑 해서 보여줍니다. 별로 정성스럽다는 느낌이 들지 않습니다. 유료로 보는 입장에서 좀 돈이 아깝다는 느낌이 들기도 합니다. 이정환님의 강의는 PPT로 보여지는 화면이 없습니다. 모두 애니메이션화 된 화면으로 설명을 합니다. 그러다 보니 이해가 빠를 수 있습니다. 그런데 이정환 님의 강의를 보다 보니..문제가 있습니다. 다른 강사들의 유료 영상 미리보기를 보면 품질이 맘에 들지 않아 구매가 꺼려 집니다... 다른 강사들은 이정환님의 강의를 보고 벤치마킹 해야 합니다. 인프런 측에서도 이정환님의 강의를 벤치 마킹 해서 이를 기준으로 삼고 유료로 운영 하고자 하는 강사들에게 따를 것을 요청 해야 합니다. 돈 내고 보는 건데 보다 좋은 품질을 서비스 해야 하는 것이 당연한 것 아닐까요? 그래서..이정환님의 강의만 강의라고 부릅니다. 다른 강사들의 영상은 그냥 영상 이라고 부릅니다..강의라고 부르기엔 부족 합니다.

    • kaeuhy님의 프로필 이미지
      kaeuhy

      Reviews 1

      Average Rating 5.0

      Edited

      5

      10% enrolled

      강의 커리큘럼을 보며, 참 알차다고 생각했습니다. 이보다 더 완벽한 프론트엔드를 위한 강의는 존재하지 않습니다. 프론트엔드 = 이정환

      • 챙준님의 프로필 이미지
        챙준

        Reviews 9

        Average Rating 5.0

        5

        100% enrolled

        강의를 시작하기 전에 들었던 Live Session 에서 좋은 영감을 받았고, 프로젝트를 따라하면서 더 감을 잘 익힐 수 있었던 것 같아요. Tanstack Query 를 활용한 서버 상태 관리의 유용함에 대해 좀더 깊게 생각할 수 있었고, 제가 생각했을 때 저의 주력 프레임워크인 TypeScript, React 와 Zustand, Supabase 까지 폭넓게 배울 수 있었습니다. 누구든 사이드 프로젝트에 대한 고민이 있을 때, 이 강의를 접하고 나면 정말 좋은 시작이 될 것 같아요. 강력 추천합니다!

        • 김김님의 프로필 이미지
          김김

          Reviews 8

          Average Rating 5.0

          5

          67% enrolled

          내가 이런걸 만들수있을까 싶던것을 하나하나 쉽고 자세한 설명과 함께 만들어가다보니 점점 구현되고있는게 신기합니다 ㅎㅎ 이강의 하나만 반복해서 들으면 프론트와 백엔드의 흐름과 생태환경을 제대로 이해할수 있을듯 싶습니다. 이전강의도 다 챙겨봤는데, 앞으로도 좋은 강의 부탁드립니다~

          • Ay Caramba님의 프로필 이미지
            Ay Caramba

            Reviews 4

            Average Rating 5.0

            5

            56% enrolled

            아직 완강하진 않았지만 수강평 남깁니다. 이 강의를 통해서 포트폴리오를 만들어야지~ 라는 생각보다 이 강의를 통해서 supabase와 리액트를 사용한 프로젝트의 플로우는 어떻게 흘러갈까? 라는 생각으로 전체적인 흐름을 보려는 생각으로 수강하시면 더 좋을 것 같습니다. 강의 질은 엄청 좋습니다. 이 강의 전에 supabase강의를 들었지만 그 강의와는 다르게 정말 차원이 다르게 자세하게 설명해주십니다. 물론 이 강의만 듣고 supabase는 이렇구나~ 보다는 이 강의를 통해서 아주 기본적인 개념 틀을 잡으신 후에 supabase의 공식 문서를 통해 더 공부하시면 전보다 훨씬 이해가 잘되서 더 좋습니다. 물론 이정환님께서 설명을 잘해주시고, 시각자료로 더 쉽게 설명해주셔서 가능한 일인것 같습니다. 때문에 꼭 이 강의를 들으셨으면 좋겠습니다. 그리고 zustand와 리액트 쿼리 강의도 이 강의에 포함되어 있는데 엄청 좋습니다... 이해가 잘 되고요. 이 강의를 통해서 나중에 혼자 더 공부할때 도움이 많이 되는것 같습니다.

            $42.90

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!