Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Language
English
Taught by
Van Nguyen
Rating
4 views
Course Overview
Build a modern social media app with Next.js, React Query, Redux & Socket IO – real-time chat, posts, likes & more.
Want to build a real-time social media app with modern tools like NextJS, React Query, and Socket IO? This course is for you.
In this hands-on project-based course, you’ll build the frontend of a full-featured social media platform from scratch. You’ll implement real-time features such as live chat, reactions, and friends using WebSockets (Socket IO). With React Query, you’ll master efficient data fetching, caching, pagination, and optimistic updates to provide a smooth user experience.
We’ll use NextJS App Router, Material UI, and TypeScript to build clean, scalable, and modern UI components. You’ll also implement core social media features like posts, likes, comments, and friends systems with a fully interactive UI.
Whether you’re an intermediate developer looking to build your portfolio or a React developer aiming to learn advanced tools and patterns — this course will guide you step by step.
Another major focus is React Query—one of the most powerful and widely-used libraries for handling server state in modern React apps. You’ll learn how to effectively use it for fetching, caching, and mutating data, along with advanced techniques like:
Optimistic updates for instant UI feedback
Infinite scrolling for dynamic feed loading
This course isn’t just about building a project—it’s about understanding when, why, and how to use the right tools for building fast, scalable, and real-time frontend applications.
Note: This course does not focus heavily on Server Components, as we are building a social media app—a type of application where data changes frequently and requires real-time updates. Instead, we prioritize the tools and techniques best suited for highly dynamic, interactive user experiences.
Course Content
- 10 section(s)
- 208 lecture(s)
- Section 1 Introduction
- Section 2 WebSockets Fundamental
- Section 3 WebSockets in Practice
- Section 4 Socket.IO
- Section 5 Next.js Fundamental: Core Concept
- Section 6 Next.js Fundamental: Server Action
- Section 7 Next.js Fundamental: Cache
- Section 8 Setup: Component UI Library, Redux Toolkit, Tanstack React Query, Axios
- Section 9 Authentication with Json Web Token
- Section 10 Feature: Post
What You’ll Learn
- Implement real-time features using WebSockets (Socket IO) for live chat, friends, and more.
- Create a powerful authentication system with JWT, and protected routes.
- Optimize performance with infinite scrolling, pagination, and query caching using React Query.
- Implement likes, comments, friends, conversations, and other key social features.
- Manage global and per-page state cleanly with Redux and React Query
- Optimize user experience with optimistic updates, and loading states
Reviews
-
MMisa Pop
very practical course
-
GGil Atkins
The project was really impressive. I learned a lot in just the first few sections, I especially liked how the instructor used React Query in the project.
