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.
1,703 learners
Level Intermediate
Course period Unlimited
Reviews from Early Learners
5.0
nubes
I've encountered web frontend lectures through various platforms like YouTube, Inflearn, and books, but I definitely find that watching lectures helps me concentrate better and makes learning more enjoyable. The downside was that depending on the instructor's voice or pronunciation, there were many cases where I'd get sleepy and couldn't absorb the content. However, I happened to come across a React lecture and started with it, and instructor Lee Jung-hwan's pronunciation and audio quality matched me so well that I was able to listen to the lectures with great concentration. That's how I ended up listening to TypeScript, Next.js, and SNS lectures in succession, and I could definitely feel the quality improving progressively. After getting a job and working as a developer, I realized how important fundamentals and understanding how things work are. While I always understood things when studying, I would forget so much when I didn't use them for a while. However, in Lee Jung-hwan's lectures, while there is coding, he explains the theory in between using materials, so after watching a few times, I come to understand it, and later I can find and watch just those parts again, which has been very helpful. I was very impressed by learning about different syntax and methods that exist, not just the coding methods I frequently used, and discovering "oh, there's this way too." This lecture series really includes many technology stacks I'm using in my actual work, so I was eager to take it. While watching the zustand and tanstack-query lectures, it was a lecture that made me realize "oh, I can use it this way." I'm looking forward to the next lecture!
5.0
dozer
While doing full-stack development, I've been so focused on just getting things implemented that I haven't really studied frontend in depth. I'm also quite careful when choosing courses, so I always worry "what if the course content isn't good or satisfying for what I paid?" These concerns build up until right before I hit the purchase button, and I have many courses I started but never finished... First of all, Instructor Lee Jung-hwan's courses have such excellent quality that I think you can trust his name alone when enrolling. The scripts and materials he prepares are extremely satisfying. I think diction and content delivery are the most important factors, and he excels in these areas too - he's clear and straightforward, and he explains in detail things like why we need to implement things a certain way, which is really great. You know that expression "work less, earn more"...? I want to tell the instructor "work a lot and earn even more for it"...😊😊 Personally, I'm interested in RN too, so I'm eagerly waiting for an RN course to come out. Cheering for you, instructor!
5.0
vbnm0712
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!!!
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
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
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.
Email sign-up/login
Social login (GitHub)
Password recovery
Session management
Authorization using RLS
Feed infinite scroll management using useInfiniteQuery
Cache Data Management
Image upload and management using Supabase Storage
Implemented post and profile image upload functionality
Resolving concurrency issues (RPC)
Fast result updates through cache manipulation
Implement infinitely nested comments functionality
Recursive component rendering
Provides system, dark, and light themes
Implement theme persistence and prevent flickering using Persist
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
A tool that makes CSS styling more convenient
No separate CSS files are needed for styling
Shadcn/ui
A design library based on Tailwind CSS
Provides high-quality components (e.g., Input, Button, Dialog, etc.)
Zustand
A small, lightweight global state management library
An emerging powerhouse that is displacing the traditional Redux.
TanStack Query
Server state management library
Helps handle loading and errors when fetching asynchronous data
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.
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.
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.
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.
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.
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
We gather in an exclusive community for course participants, sharing knowledge and news with one another as we grow.
Naver Cafe: https://cafe.naver.com/winterlood
Open chat room: Please check the participation link in the course materials.
A frontend developer & educator who believes there is a way to explain anything easily and enjoyably
📚 Books
Published: "Bite-Sized Next.js"
Published "Bite-Sized React"
📹 Course
Next.js in Bite-Sized Pieces
TypeScript in Bite-Sized Pieces
React in Bite-Sized Pieces
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)
Inflearn Verified
Career Verified
45,027
Learners
3,491
Reviews
1,790
Answers
4.9
Rating
34
Courses
There is always a way to explain anything easily!
YouTube: https://link.onebitefe.com/r/8n6pxm
📚 books
"(Revised Edition) Bite-Sized React" published
"A Bite-Sized Next.js" Published
"A Bite-Sized React" published
🏆 Award
2025 Inflearn Year-End Awards Bestseller Winner
2024 Inflearn Year-End Awards Learners’ PICK Award Winner
2023 Inflearn Year-End Awards Learners’ PICK Winner
📹 Course
Bite-Sized Vibe Coding
Bite-Sized React.js Practical Project – Social Media Edition
Bite-Sized Next.js
TypeScript in Bite-Sized Pieces
Bite-Sized React
Co-instructor
All
90 lectures ∙ (22hr 9min)
Course Materials:
All
151 reviews
5.0
151 reviews
Reviews 1
∙
Average Rating 5.0
5
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.
Reviews 2
∙
Average Rating 5.0
5
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.
Reviews 2
∙
Average Rating 5.0
Edited
Reviews 15
∙
Average Rating 3.3
5
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.
Reviews 2
∙
Average Rating 5.0
Edited
5
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!!!
Check out other courses by the instructor!
Explore other courses in the same field!
![[Renewal] Creating a NodeBird SNS with ReactCourse Thumbnail](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?w=420)
