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) 92 reviews

1,347 learners

Level Intermediate

Course period Unlimited

React
React
TypeScript
TypeScript
react-query
react-query
supabase
supabase
zustand
zustand
React
React
TypeScript
TypeScript
react-query
react-query
supabase
supabase
zustand
zustand
날개 달린 동전

Recommend Course to grow and earn commission!

날개 달린 동전

Marketing Partners

Recommend Course to grow and earn commission!

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

  • 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

Recommended for
these people

Who is this course right for?

  • 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.

Need to know before starting?

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

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

Hello
This is winterlood

37,593

Learners

2,641

Reviews

1,621

Answers

4.9

Rating

19

Courses

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.

 

More

Co-instructor

Curriculum

All

88 lectures ∙ (22hr 9min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

92 reviews

5.0

92 reviews

  • 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

    • 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.

        • 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!

          • 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.

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!

            $42.90