inflearn logo
inflearn logo

Bite-Sized React.js Practical Project - SNS Edition

Now it's time to take on a real-world challenge 🔥 We will develop a production-grade SNS using React.js + TypeScript + Supabase, building features such as authentication & authorization, infinite scroll, image uploads, likes, infinitely nested comments, and dark mode. In the process, we will also explore server and global state management techniques using Zustand and Tanstack Query.

(5.0) 수강평 93개

강의소개.상단개요.수강생.short

난이도 중급이상

수강기한 무제한

React
React
TypeScript
TypeScript
react-query
react-query
supabase
supabase
zustand
zustand
React
React
TypeScript
TypeScript
react-query
react-query
supabase
supabase
zustand
zustand

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

5.0

5.0

민경언

31% 수강 후 작성

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% 수강 후 작성

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% 수강 후 작성

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!

강의상세_배울수있는것_타이틀

  • We will build a professional-grade SNS project using React.js, TypeScript, and Supabase.

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

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


> Apply for One Bite Challenge 8th Cohort (~until Feb 22nd) : https://link.onebitefe.com/r/g5n989

로드맵-강의상세

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

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

React.js + TypeScript through

We will build a professional-grade SNS service.

If you are just repeating tutorials while asking AI for help, it is now time to take on a real-world project.

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

We will build a professional-grade SNS service, ready for actual users, from start to finish.

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

> Test account email: test@onebitefe.com

> Test account password: 123456


It's not just about simple UI implementation,

Core features that make up a real service will be built by you directly.

This course goes beyond simple UI or CRUD implementation at a level that AI can generate.

Authentication/Authorization, image uploads, infinite scroll, likes, infinitely nested comments, dark mode, etc.

We will personally design and implement the core features used in today's real-world services.


⚙️ User Authentication & Authorization

  • Email Sign-up/Login

  • Social Login (GitHub)

  • Find Password

  • Session Management

  • Authorization using RLS

⚙️ Feed Infinite Scroll

  • Managing feed infinite scroll using useInfiniteQuery

  • Cache data management


⚙️ Image Attachment

  • Image upload and management using Supabase Storage

  • Implementation of post and profile image upload functions


⚙️ Likes

  • Resolving Concurrency Issues (RPC)

  • Fast reflection of results through cache manipulation


⚙️ Infinitely nested comments

  • Implementation of infinitely nested comments

  • Recursive component rendering


⚙️ Theme switching 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 functions well, our tools must also be upgraded.

In this lecture, we will learn each of the powerful tools introduced below, one by one.

We plan to actively utilize them in actual projects.


Tailwind CSS


Shadcn/ui


  • Design library based on Tailwind CSS

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

  • https://ui.shadcn.com/

Zustand


  • A small and lightweight global state management library

  • An emerging powerhouse that is displacing the traditional Redux

  • https://zustand-demo.pmnd.rs/

Tanstack Query



This is not just a clone coding course where you simply follow along.

From the background and structure of features to perfect conceptual explanations, it's all included.

This course is absolutely not about just mindlessly typing out code generated by AI.

Why it is implemented that way and how the flow is structured

I have also included plenty of theoretical explanations so that you can understand and digest it yourself.

Target Audience for the Course

This course is designed for those who have a basic understanding of React.js and TypeScript.

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

The 5 Principles of the One-Bite Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just as food that looks good tastes better,
I believe that even for the same conceptual explanation, more intuitive and attractive visual materials make it easier to understand.

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

⚖ Principle 2. Kindness

When new terms or concepts appeared, I did not gloss over them or jump to the conclusion that you already knew them. I made every effort to ensure you wouldn't have to search on Google separately while listening to the lecture.

⚖ Principle 3. Plausibility

To maintain the interest of the students, I created the lectures while always considering logical consistency—ensuring that whenever new content is introduced, it is connected to previous material and that you don't feel a sudden break in the flow.

⚖ Principle 4. Good Vocalization and Diction

Since you have to listen to my voice for a long time, I am always striving for good vocalization and diction.
To this end, I have produced 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

We gather in a student-exclusive community to grow together by sharing knowledge and news.

Instructor Introduction


Junghwan Lee | Winterlood

A frontend developer & educator who believes there is a way to explain anything easily and funly

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

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

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

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

  • Those who are looking for a course where Q&A is conducted at least once every day from Monday to Friday.

  • Those who are looking for a course with an active student community directly managed by the instructor.

선수 지식, 필요할까요?

  • React.js Basics (Level of "One Bite React" course students)

  • TypeScript Basics (Level of students who have taken the "One Bite TypeScript" course)

강의소개.지공자소개

37,707

수강생

2,649

수강평

1,623

답변

4.9

강의 평점

19

강의_other

Shall we take a bite-sized piece of Web Front-end?!

Hello 🙇‍♂

I am someone who believes there is a way to explain anything easily and enjoyably,

I am someone who wants to create the warmest developer community in the world.

 

더보기

공동 지식공유자

커리큘럼

전체

88개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

해당 강의에서 제공: [object Object]
강의 게시일: 
마지막 업데이트일: 

수강평

전체

93개

5.0

93개의 수강평

  • hyezzm1200님의 프로필 이미지
    hyezzm1200

    수강평 11

    평균 평점 5.0

    5

    67% 수강 후 작성

    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~

    • jjmullan님의 프로필 이미지
      jjmullan

      수강평 9

      평균 평점 5.0

      5

      100% 수강 후 작성

      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!

      • dudals010126님의 프로필 이미지
        dudals010126

        수강평 4

        평균 평점 5.0

        5

        56% 수강 후 작성

        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.

        • cjswodmsgus5064님의 프로필 이미지
          cjswodmsgus5064

          수강평 2

          평균 평점 5.0

          수정됨

          5

          10% 수강 후 작성

          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

          • nataek2159님의 프로필 이미지
            nataek2159

            수강평 15

            평균 평점 3.3

            5

            31% 수강 후 작성

            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.

            winterlood님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            강의상세.할인문구

            $38,500.00

            30%

            $42.90