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

1,434 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

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

pgaey

57% enrolled

I am sharing my personal views from a learner's perspective. I hope this helps those who are considering taking this course. 1. The system flow is easy to understand. In each lecture, the instructor explains the system flow of the feature being implemented using various materials. Since the visual aids change according to the flow, it’s great because you can visualize difficult concepts before diving in. Since architecture is more important than code implementation, this is a truly excellent element. 2. It covers concepts. Because the concepts are covered, it’s easy to understand and you learn the "why" behind things. As I gained knowledge this way, I personally became curious about how the instructor studied. It made me think that the difference ultimately lies in how deep one digs into official documentation and references; it challenged me to realize the importance of looking into the source code and acquiring knowledge "also" through official documentation. This isn't just a simple clone coding course. 3. It’s not just "easy." While the concepts are explained well, it’s not incredibly easy. As it is a practical project, the important parts have some level of difficulty. Personally, the difficulty level was just right for me. It’s perfect because it’s neither too hard nor too easy. 4. Diction The instructor's diction is very good. They say you notice the difference most when it's gone. I didn't necessarily feel that good diction made me focus better, but it's very difficult when the opposite is true. There is absolutely no such stress here. ** Conclusion ** I think this course will be helpful for those who want to get a grasp of the project flow. I had experience implementing parts here and there, but I realized that knowing the architecture and system flow that make up a project is what's truly important. Those who haven't experienced a project from A to Z will receive a lot of help from this.

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

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.

로드맵-강의상세

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

Series Lecture Links
> One Bite React:https://inf.run/kdHbe
One Bite TypeScript: https://inf.run/FpLm4
One Bite Next.js: 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 questions, it's 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 implementing a simple UI,

Core features that make up a real-world service will be built by you firsthand.

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 Signup/Login

  • Social Login (GitHub)

  • Find Password

  • Session Management

  • Authorization using RLS

⚙️ Feed Infinite Scroll

  • Managing feed infinite scroll using useInfiniteQuery

  • Cache data management


⚙️ Attach Image

  • Image uploading and management using Supabase Storage

  • Implementation of post and profile image upload functions


⚙️ Likes

  • Resolving Concurrency Issues (RPC)

  • Reflecting results quickly through cache manipulation


⚙️ Infinitely nested comments

  • Implementation of infinitely nested comment functionality

  • Recursive component rendering


⚙️ Theme switching feature

  • Provides system, dark, and light themes

  • Implementing theme persistence using Persist and preventing flickering features




Introducing tools for more powerful React apps

TailwindCSS + Zustand + Tanstack Query

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

In this course, we will learn each of the powerful tools listed below, one by one, and

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 clone coding where you simply follow along.

From the background and structure of functions to perfect conceptual explanations, everything is included.

This course is absolutely not just about mindlessly following along and typing out code.

Why it is implemented that way and what the overall flow of the structure is

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

Target Audience for the Course

This course was 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 that you take the following prerequisite courses first.

The 5 Principles of the Bite-Sized Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just as the same food feels more delicious when it looks good,
I believe that even for the same conceptual explanation, more intuitive and attractive visual materials will be easier to understand.

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

⚖ Principle 2. Kindness

I did not gloss over new terms or concepts with vague explanations, nor did I jump to the conclusion that you would already be familiar with them. I made every effort to ensure you wouldn't need to search on Google separately while taking the course.

⚖ Principle 3. Probability

To keep students engaged, I created these lectures with a constant focus on logical flow—ensuring that whenever new content is introduced, it connects to previous material so that you never feel like the flow is suddenly interrupted.

⚖ Principle 4. Good Vocalization and Diction

Since you will be listening 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 playing them at 2x speed.

Take a listen! 2x speed playback link

⚖ Principle 5. Communication

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

About the Instructor


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

38,392

Learners

2,864

Reviews

1,655

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

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

 

More

Co-instructor

Curriculum

All

90 lectures ∙ (22hr 9min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

116 reviews

5.0

116 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

    • pgaey0106님의 프로필 이미지
      pgaey0106

      Reviews 2

      Average Rating 5.0

      5

      57% enrolled

      I am sharing my personal views from a learner's perspective. I hope this helps those who are considering taking this course. 1. The system flow is easy to understand. In each lecture, the instructor explains the system flow of the feature being implemented using various materials. Since the visual aids change according to the flow, it’s great because you can visualize difficult concepts before diving in. Since architecture is more important than code implementation, this is a truly excellent element. 2. It covers concepts. Because the concepts are covered, it’s easy to understand and you learn the "why" behind things. As I gained knowledge this way, I personally became curious about how the instructor studied. It made me think that the difference ultimately lies in how deep one digs into official documentation and references; it challenged me to realize the importance of looking into the source code and acquiring knowledge "also" through official documentation. This isn't just a simple clone coding course. 3. It’s not just "easy." While the concepts are explained well, it’s not incredibly easy. As it is a practical project, the important parts have some level of difficulty. Personally, the difficulty level was just right for me. It’s perfect because it’s neither too hard nor too easy. 4. Diction The instructor's diction is very good. They say you notice the difference most when it's gone. I didn't necessarily feel that good diction made me focus better, but it's very difficult when the opposite is true. There is absolutely no such stress here. ** Conclusion ** I think this course will be helpful for those who want to get a grasp of the project flow. I had experience implementing parts here and there, but I realized that knowing the architecture and system flow that make up a project is what's truly important. Those who haven't experienced a project from A to Z will receive a lot of help from this.

      • choileo09108916님의 프로필 이미지
        choileo09108916

        Reviews 1

        Average Rating 5.0

        5

        35% enrolled

        Hello, Instructor Jeonghwan! I am a student who first entered the world of development through your book, "React in Bite-Sized Pieces." At the time, thanks to your book, I discovered the joy of development and received so much help. There was a period when I faced setbacks during my job search and almost gave up on my dreams, but when I looked back at my happiest memories, it was always the version of myself that was coding. When I gathered the courage to return, I saw how much you had grown into such an excellent instructor, and I chose this course without a second thought. Thanks to the perfect quality and explanations that met all my expectations, I learned so much that my hiatus felt insignificant. Thank you sincerely for lighting my path once again. I will always be rooting for you! Thank you.

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

          • kim9668님의 프로필 이미지
            kim9668

            Reviews 3

            Average Rating 5.0

            Edited

            5

            52% enrolled

            How are you doing? I am enjoying your classes, and I'm leaving this review to recommend your new lectures. I support you as you always put in so much effort and expertise, and I hope you continue to become a top-tier star instructor. Happy New Year!

            Similar courses

            Explore other courses in the same field!

            $42.90