A Bite-Sized Practical React.js Project – Social Media Edition

Now it’s time to take on a real-world project 🔥 Together, we’ll build a production-grade social networking service with React.js + TypeScript + Supabase, implementing features such as authentication & authorization, infinite scrolling, image uploads, likes, infinitely nested comments, and dark mode. Along the way, we’ll also explore server and global state management techniques using Zustand and Tanstack Query.

(5.0) 148 reviews

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

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

  • Let's build a production-grade social media project using React.js + TypeScript + Supabase.

  • Implement features such as authentication & authorization, infinite scrolling, image uploads, likes, infinitely nested comments, and dark mode.

  • 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
> Bite-Sized React:https://inf.run/kdHbe
Bite-Sized TypeScript: https://inf.run/FpLm4
Bite-Sized Next: https://inf.run/v3XAj

React.js + TypeScriptthrough

Build a professional-grade social networking service.

If you’ve been repeatedly following tutorials while asking AI for help, it’s time to take on a real-world project.

In this course, we use React.js + TypeScript + Supabase to build...

Build a professional-grade SNS service from start to finish, at a level suitable for real users.

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

> Test account email: test@onebitefe.com

> Test account password: 123456


Not just a simple UI implementation,

core features that make up a real service you will build them yourself.

This course goes beyond simple UI or CRUD implementations at the level AI can generate.

authentication/authorization, image uploads, infinite scrolling, likes, infinitely nested comments, dark mode, and more.

You’ll design and implement essential features used in real-world services today.


⚙️ User Authentication & Authorization

  • Email sign-up/login

  • Social login (GitHub)

  • Password recovery

  • Session management

  • Authorization using RLS

⚙️ Infinite scrolling for the feed

  • Feed infinite scroll management using useInfiniteQuery

  • Cache Data Management


⚙️ Attach images

  • Image upload and management using Supabase Storage

  • Implemented post and profile image upload functionality


⚙️ Likes

  • Resolving concurrency issues (RPC)

  • Fast result updates through cache manipulation


⚙️ Infinitely nested comments

  • Implement infinitely nested comments functionality

  • Recursive component rendering


⚙️ Theme switching feature

  • Provides system, dark, and light themes

  • Implement theme persistence and prevent flickering using Persist




Introducing tools for more powerful React apps

TailwindCSS + Zustand + Tanstack Query

To handle complex features effectively, our tools need to be upgraded as well.

In this course, we will learn the powerful tools introduced below one by one.

We will actively apply them to actual projects.


Tailwind CSS


Shadcn/ui


  • A design library based on Tailwind CSS

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

  • https://ui.shadcn.com/

Zustand


  • A small, lightweight global state management library

  • An emerging powerhouse that is displacing the traditional Redux.

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

TanStack Query



This is not clone coding where you simply follow along and type the code.

It thoroughly covers everything from the background and structure of each feature to conceptual explanations.

This course is absolutely not one where you simply type along with the code and call it a day.

Why it is implemented that way and what flow it is structured around

It also includes plenty of theoretical explanations so that you can understand and digest everything on your own.

Who This Course Is For

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

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

The Five Principles of the Bite-Sized Series

⚖ Principle 1. Intuitive and Rich Visual Materials

Just as food tastes better when it looks good,
I believe that even when explaining the same concept, more intuitive and appealing visual materials are easier to understand.

Therefore, I worked tirelessly to create intuitive visual materials, including animations.

⚖ Principle 2. Kindness

When new terms or concepts appeared, I did not simply explain them superficially and move on, or assume that you already knew them. I made every effort to ensure that you would not need to Google anything separately while listening to the lecture.

⚖ Principle 3. Coherence

To keep you interested, whenever new material appears during the lecture, I created it with coherence in mind, always considering whether it was related to what came before and whether it might feel like the flow was suddenly being interrupted.

⚖ Principle 4. Good Vocal Delivery and Diction

Since you will be listening to my voice for a long time, I always strive to maintain good vocal projection and diction.
To this end, I created the lectures so that you can understand everything even when playing them at 2x speed.

Give it a listen! 2x playback link

⚖ Principle 5. Communication

We gather in an exclusive community for course participants, sharing knowledge and news with one another as we grow.

About the Knowledge Sharer


Jeonghwan Lee | Winterlood

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

Recommended for
these people

Who is this course right for?

  • Students of the Bite-Sized 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 tutorials and take on real-world projects

  • For those looking for courses where questions are answered at least once every day from Monday to Friday

  • For those looking for courses with active learner communities directly run by the knowledge provider

Need to know before starting?

  • React.js Basics (at the level of students who have taken the Bite-Sized React course)

  • TypeScript Basics (at the level of students taking the “Bite-Sized TypeScript” course)

Hello
This is winterlood

Inflearn Verified

Career Verified

44,125

Learners

3,390

Reviews

1,772

Answers

4.9

Rating

34

Courses

There is always a way to explain anything simply!


  • 📚 Book

     

  • 🏆 Award

    • Won the 2025 Inflearn Year-End Awards Bestseller Award

       

    • Winner of the 2024 Inflearn Year-End Awards, selected by students

    • 2023 Inflearn Year-End Awards Learners’ PICK Winner

     

  • 📹 Course

    • Bite-Sized Vibe Coding

    • Bite-Sized React.js Practical Project - Social Media Edition

    • Next.js in Bite-Sized Lessons

    • Bite-Sized TypeScript

    • Bite-Sized React

More

Co-instructor

Curriculum

All

90 lectures ∙ (22hr 9min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

148 reviews

5.0

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

      • hisu0712님의 프로필 이미지
        hisu0712

        Reviews 2

        Average Rating 5.0

        Edited

        5

        100% enrolled

        The One-Bite series has been a joy to listen to every time, and this One-Bite SNS lecture was also incredibly informative and fun! Personally, when taking the One-Bite series, I found that reviewing using the progress tracker, books, or missions helped things stick in my memory. However, since this lecture is project-based, I reviewed it by listening to the lecture and then doing a second round of clone coding on a new project instead of using the methods mentioned above. I personally hope that more of these project-based, high-difficulty lectures will be released in the future... If you want to take front-end development lectures on Inflearn, I absolutely recommend teacher Lee Jung-hwan!!!

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

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!