강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Bite-Sized Real-World Projects - SNS Edition

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

(5.0) 88 reviews

1,318 learners

Level Intermediate

Course period Unlimited

  • winterlood
  • hyobin
supabase
supabase
zustand
zustand
react-query
react-query
React
React
TypeScript
TypeScript
supabase
supabase
zustand
zustand
react-query
react-query
React
React
TypeScript
TypeScript

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

민경언

31% enrolled

I've taken quite a few paid courses on Inflearn, and in every aspect, Lee Jeong-hwan's courses are the best. That's why I've taken all of Lee Jeong-hwan's courses. This React SNS course is great too. Lee Jeong-hwan's courses... 1. You can feel the preparation that went into the course while watching. => When you watch videos from other instructors, almost none of them prepare scripts. Most seem to only prepare content at the title level. As a result, when you watch their videos, they stumble, repeat what they've already said... Examples turn out differently from the results... In some cases, they swallow their saliva so much that it was disgusting, so I didn't continue watching afterward. However, with Lee Jeong-hwan's courses, you can feel that scripts are thoroughly prepared before filming. So there's no redundancy, and the progression is smooth. It's very satisfying, and it really feels worth paying for. 2. The course environment is well prepared. => Unlike videos from other instructors, the audio is consistent from start to finish. When you watch Lee Jeong-hwan's courses, he films almost without moving. This seems to be because moving prevents the voice from being recorded at an even pitch. 3. The course content quality is excellent. => When you watch videos from other instructors, most just type on PPT and show it. It doesn't feel very thoughtful. From the perspective of paying to watch, it sometimes feels like a waste of money. Lee Jeong-hwan's courses don't have screens shown through PPT. Everything is explained with animated screens. This allows for faster understanding. However, watching Lee Jeong-hwan's courses... there's a problem. When I watch preview videos of other instructors' paid content, the quality doesn't satisfy me, so I'm reluctant to purchase... Other instructors should watch Lee Jeong-hwan's courses and benchmark them. Inflearn should also benchmark Lee Jeong-hwan's courses, set them as the standard, and request instructors who want to operate paid courses to follow suit. Isn't it natural that better quality should be provided for paid content? So... I only call Lee Jeong-hwan's courses "courses." I just call other instructors' content "videos"... they're insufficient to be called courses.

5.0

kaeuhy

10% enrolled

Looking at the course curriculum, I thought it was truly comprehensive. There is no more perfect course for frontend development than this. Frontend = Lee Jeong-hwan

5.0

챙준

100% enrolled

I got great inspiration from the Live Session I attended before starting the course, and I think I was able to get a better feel for things by following along with the project. I was able to think more deeply about the usefulness of server state management using Tanstack Query, and I think I was able to learn broadly about TypeScript and React, which are my main frameworks, as well as Zustand and Supabase. When anyone has concerns about side projects, encountering this course would be a really good start. I highly recommend it!

What you will gain after the course

  • Build a production-level SNS project using React.js + TypeScript + Supabase.

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

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

로드맵-강의상세

Click the image to go to the roadmap.
> Roadmap link:https://link.onebitefe.com/r/3fr3f6

Series Course Links
> React in Bite-Sized Pieces: https://inf.run/v3XAj
>
TypeScript in Bite-Sized Pieces: https://inf.run/FpLm4
>
Next.js in Bite-Sized Pieces: https://inf.run/v3XAj

With React.js + TypeScript

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 use React.js + TypeScript + Supabase to

We'll build a production-level SNS service from start to finish that's ready to be provided to actual users.

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

> Test account email: test@onebitefe.com

> Test account password: 123456


Not just simple UI implementation,

You'll build the core features that make up a real serviceyourself.

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, and more

You'll design and implement core features that are used in real-world services today.


⚙️ User Authentication & Authorization

  • Email signup/login

  • Social Login (GitHub)

  • Password recovery

  • Session management

  • Authorization using RLS

⚙️ Infinite Feed Scroll

  • Managing infinite scroll feed using useInfiniteQuery

  • Cache data management


⚙️ Image Attachment

  • Image upload and management using Supabase Storage

  • Post and profile image upload feature implementation


⚙️ Likes

  • Resolving concurrency issues (RPC)

  • Fast result reflection through cache manipulation


⚙️ Infinitely Nested Comments

  • Implementation of infinitely nested comment functionality

  • Recursive component rendering


⚙️ Theme switching feature

  • Provides system, dark, and light themes

  • 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, we will learn each of the powerful tools introduced below, one by one

we will actively apply them to real projects.


Tailwind CSS


Shadcn/ui


  • Tailwind CSS-based design library

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

  • https://ui.shadcn.com/

Zustand


Tanstack Query



This is not just copy-paste clone coding.

We've included perfect explanations of concepts, covering the background and structure of features.

This course is absolutely not just a simple code-along course.

Why it's implemented that way, and how the flow is structured

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

Target Audience for This Course

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 Hanip Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just as the same food tastes better when it looks appealing,
I believe that even the same concept explanation is 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 appear, I didn't just briefly explain them and move on, or assume you already know them. I made every effort to ensure you won't need to Google anything separately while taking the course.

⚖ Principle 3. Plausibility

To maintain your interest, I always created the lectures while thinking about plausibility - whether new content that appears during the lecture is connected to previous content, and whether you might 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 on 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 an exclusive community to share knowledge and news with each other and grow together.

About the Instructor


Lee Jeong-hwan | Winterlood

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

  • 📚 Books

    A frontend developer & educator who believes there's always a fun way to explain things 📚 Books "Bite-sized Next.js" published "Bite-sized React" published


  • 📹 Courses

    • Bite-sized Next.js

    • Bite-sized TypeScript

    • Bite-sized React


Recommended for
these people

Who is this course right for?

  • Students of the One Bite series (those who have completed React.js + TypeScript)

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

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

  • For those looking for courses where Q&A happens at least once daily, Monday through Friday

  • For those looking for courses with active student communities directly managed by the instructor

Need to know before starting?

  • React.js basics (level of someone who has taken the "One Bite React" course)

  • TypeScript Basics (equivalent to completing the "One Bite TypeScript" course)

Hello
This is

37,200

Learners

2,604

Reviews

1,600

Answers

4.9

Rating

13

Courses

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

안녕하세요 🙇‍♂

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

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

 

Curriculum

All

88 lectures ∙ (22hr 9min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

88 reviews

5.0

88 reviews

  • nataek2159님의 프로필 이미지
    nataek2159

    Reviews 15

    Average Rating 3.3

    5

    31% enrolled

    I've taken quite a few paid courses on Inflearn, and in every aspect, Lee Jeong-hwan's courses are the best. That's why I've taken all of Lee Jeong-hwan's courses. This React SNS course is great too. Lee Jeong-hwan's courses... 1. You can feel the preparation that went into the course while watching. => When you watch videos from other instructors, almost none of them prepare scripts. Most seem to only prepare content at the title level. As a result, when you watch their videos, they stumble, repeat what they've already said... Examples turn out differently from the results... In some cases, they swallow their saliva so much that it was disgusting, so I didn't continue watching afterward. However, with Lee Jeong-hwan's courses, you can feel that scripts are thoroughly prepared before filming. So there's no redundancy, and the progression is smooth. It's very satisfying, and it really feels worth paying for. 2. The course environment is well prepared. => Unlike videos from other instructors, the audio is consistent from start to finish. When you watch Lee Jeong-hwan's courses, he films almost without moving. This seems to be because moving prevents the voice from being recorded at an even pitch. 3. The course content quality is excellent. => When you watch videos from other instructors, most just type on PPT and show it. It doesn't feel very thoughtful. From the perspective of paying to watch, it sometimes feels like a waste of money. Lee Jeong-hwan's courses don't have screens shown through PPT. Everything is explained with animated screens. This allows for faster understanding. However, watching Lee Jeong-hwan's courses... there's a problem. When I watch preview videos of other instructors' paid content, the quality doesn't satisfy me, so I'm reluctant to purchase... Other instructors should watch Lee Jeong-hwan's courses and benchmark them. Inflearn should also benchmark Lee Jeong-hwan's courses, set them as the standard, and request instructors who want to operate paid courses to follow suit. Isn't it natural that better quality should be provided for paid content? So... I only call Lee Jeong-hwan's courses "courses." I just call other instructors' content "videos"... they're insufficient to be called courses.

    • cjswodmsgus5064님의 프로필 이미지
      cjswodmsgus5064

      Reviews 2

      Average Rating 5.0

      Edited

      5

      10% enrolled

      Looking at the course curriculum, I thought it was truly comprehensive. There is no more perfect course for frontend development than this. Frontend = Lee Jeong-hwan

      • jjmullan님의 프로필 이미지
        jjmullan

        Reviews 9

        Average Rating 5.0

        5

        100% enrolled

        I got great inspiration from the Live Session I attended before starting the course, and I think I was able to get a better feel for things by following along with the project. I was able to think more deeply about the usefulness of server state management using Tanstack Query, and I think I was able to learn broadly about TypeScript and React, which are my main frameworks, as well as Zustand and Supabase. When anyone has concerns about side projects, encountering this course would be a really good start. I highly recommend it!

        • hyezzm1200님의 프로필 이미지
          hyezzm1200

          Reviews 10

          Average Rating 5.0

          5

          67% enrolled

          I was wondering if I could actually create something like this, but as I follow along with the easy and detailed explanations step by step, it's amazing to see it gradually being implemented 😊😊 I think if I just listen to this one lecture repeatedly, I'll be able to properly understand the flow and ecosystem of both frontend and backend. I've watched all the previous lectures too, so please continue to provide great lectures in the future~

          • dudals010126님의 프로필 이미지
            dudals010126

            Reviews 4

            Average Rating 5.0

            5

            56% enrolled

            I haven't completed the course yet, but I'm leaving a review. Rather than thinking "I need to create a portfolio through this course," I think it would be better to take this course with the mindset of "How does the overall flow of a project using Supabase and React work?" - focusing on understanding the big picture. The quality of the course is excellent. I took a Supabase course before this one, but unlike that course, this one explains things in incredibly detailed depth - it's on a completely different level. Of course, rather than just taking this course and thinking "Oh, so this is how Supabase works," it's better to use this course to establish a very basic conceptual framework, then study further through Supabase's official documentation - you'll understand much better than before. This is possible because Lee Jung-hwan explains things so well and makes it easier to understand with visual materials. That's why I really recommend taking this course. Also, Zustand and React Query lectures are included in this course, and they're amazing... They're very easy to understand. This course seems to be very helpful when studying on your own later.

            Limited time deal ends in 4 days

            $41,250.00

            25%

            $42.90

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!