Next.Js Pro: Social Media App With Websockets & React Query

Build a modern social media app with Next.js, React Query & Socket IO – real-time chat, posts, likes & more.

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

Requirements

Basic knowledge of JavaScript and React

Know how to build basic applications with React and TypeScript

Basic experience with NextJS is helpful

Some exposure to React Query & Redux is a plus

Eagerness to learn and build a real-time app!

Description

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, notifications, and user presence 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 feedbackInfinite scrolling for dynamic feed loadingThis 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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Meet the project

Section 2: WebSockets Fundamental

Lecture 3 HTTP vs Websocket Protocol

Lecture 4 Build a chat app with http protocol

Lecture 5 TCP Handshake

Lecture 6 HTTP Handshake

Lecture 7 Websocket Usecase

Section 3: WebSockets in Practice

Lecture 8 Open a ws connection

Lecture 9 Send & receive data

Lecture 10 What's exactly a socket?

Lecture 11 Refactor chat app with websocket protocol

Section 4: Socket.IO

Lecture 12 Why we need socket io library?

Lecture 13 Setup socket io

Lecture 14 Send & receive data

Lecture 15 More on send & receive data

Lecture 16 Chat App: Send message

Lecture 17 Chat App: Broadcasting

Lecture 18 Chat App: Room - part 1

Lecture 19 Chat App: Room - part 2

Lecture 20 Namespace

Lecture 21 Chat App: List users online

Section 5: Next.js Fundamental: Core Concept

Lecture 22 Setup tutorial project

Lecture 23 Rule of create page

Lecture 24 More on router

Lecture 25 Shared layout

Lecture 26 Understand route group

Lecture 27 Navigate between component

Lecture 28 Dynamic route

Lecture 29 Client side rendering (CSR) vs Server side rendering (SSR)

Lecture 30 Static side generation (SSG)

Lecture 31 Incremental static regeneration (ISR)

Lecture 32 Understand server component

Lecture 33 Understand client component

Lecture 34 Hydrate process

Lecture 35 Understand client boundary issue

Lecture 36 More on client boundary

Lecture 37 Handle error

Lecture 38 Loading

Lecture 39 React suspense

Section 6: Next.js Fundamental: Server Action

Lecture 40 IMPORTANT - Note about this section

Lecture 41 Server action

Lecture 42 Call API in server action

Lecture 43 Organize server action file

Lecture 44 useFormStatus hook

Lecture 45 useActionState hook

Lecture 46 Schema validation

Lecture 47 Zod

Lecture 48 Server action - summary

Lecture 49 Redirect

Section 7: Next.js Fundamental: Cache

Lecture 50 Difference type of cache

Lecture 51 Full route cache

Lecture 52 Understand static page & dynamic page

Lecture 53 Understand time based validation

Lecture 54 Understand on demand validation

Lecture 55 Hey! I don't want to use cache

Lecture 56 Cache: Summarize

Section 8: Setup: Component UI Library, Redux Toolkit, Tanstack React Query, Axios

Lecture 57 Setup project from scratch

Lecture 58 Setup component ui library (Material UI)

Lecture 59 Understand theme in Material UI

Lecture 60 Resource for next lecture

Lecture 61 Build a layout

Lecture 62 Organize layout

Lecture 63 Fix use client tag

Lecture 64 Why we need redux & react query?

Lecture 65 Setup redux toolkit

Lecture 66 Redux provider - wrapper

Lecture 67 Setup react query

Lecture 68 Setup axios

Section 9: Authentication with Json Web Token

Lecture 69 Authentication layout

Lecture 70 Build a sign up page

Lecture 71 Validation with react hook form

Lecture 72 Resource for next lecture

Lecture 73 Setup backend

Lecture 74 Sign up API

Lecture 75 API testing tool

Lecture 76 Store user information in redux

Lecture 77 Sign in

Lecture 78 Setup toastify

Lecture 79 Protected page

Lecture 80 Persist redux data

Lecture 81 Unauthorize page

Lecture 82 Logout

Lecture 83 Attach token to api request

Lecture 84 Handle token expired

Lecture 85 Summarize

Section 10: Feature: Post

Lecture 86 Post creation modal

Lecture 87 Resource for next lecture

Lecture 88 Modal UI

Lecture 89 Organize page

Lecture 90 Resource for next lecture

Lecture 91 Background color selector

Lecture 92 Handle preview image on modal

Lecture 93 Remove preview image

Lecture 94 Organize component

Lecture 95 Create post

Lecture 96 Create post with image

Lecture 97 Custom hook for react query

Lecture 98 Render posts

Lecture 99 Invalidate queries

Lecture 100 Resource for next lecture

Lecture 101 Format date

Lecture 102 Understand infinite scroll pagination

Lecture 103 Infinite scroll

Lecture 104 useInfiniteScroll hook

Lecture 105 Post card component

Lecture 106 Binding value to modal

Lecture 107 Update post

Lecture 108 Change update modal

Lecture 109 Delete post

Lecture 110 Setup socket context

Lecture 111 How to realtime for post create?

Lecture 112 Update cache manually technique - real time post create

Lecture 113 Real-time: upload media

Lecture 114 Real-time: Update post

Lecture 115 Fix update image bug

Lecture 116 Real-time: replace image

Lecture 117 Real-time: delete post

Section 11: Feature: Post Reaction

Lecture 118 Resource for next video

Lecture 119 Reaction UI

Lecture 120 Organize component

Lecture 121 React to post

Lecture 122 Show reaction

Lecture 123 Optimistic update technique

Lecture 124 Remove reaction

Lecture 125 Show reaction count

Lecture 126 Reaction viewer component

Lecture 127 Show reaction modal

Lecture 128 Reaction tabs component

Lecture 129 Show available reaction on tabs

Lecture 130 Render user's reactions

Lecture 131 Real-time: handle add reaction

Lecture 132 Real-time: handle remove reaction

Section 12: Feature: Comment

Lecture 133 Resource for next lecture

Lecture 134 Comment modal

Lecture 135 Organize component

Lecture 136 Post comment - part 1

Lecture 137 Post comment - part 2

Lecture 138 Invalidate queries

Lecture 139 Reply comment - part 1

Lecture 140 Reply comment - part 2

Lecture 141 Re-use component

Lecture 142 Action dropdown

Lecture 143 Edit comment - part 1

Lecture 144 Edit comment - part 2

Lecture 145 Delete comment

Lecture 146 Real-time: add comment

Lecture 147 Real-time: update comment

Lecture 148 Immer library: mutate directly data

Lecture 149 Refactor to immer

Lecture 150 Real-time: delete comment

Section 13: Feature: Profile

Lecture 151 Resource for next lecture

Lecture 152 Profile UI

Lecture 153 Refactor left sidebar

Lecture 154 Upload avatar

Lecture 155 Update avatar to redux

Lecture 156 Upload cover photo

Lecture 157 Edit profile

Lecture 158 Share user profile state

Section 14: Feature: Friends

Lecture 159 Resource for next lecture

Lecture 160 User UI

Lecture 161 Render all users

Lecture 162 Send friend request

Lecture 163 Cancel friend request

Lecture 164 Accept friend request - part 1

Lecture 165 Accept friend request - part 2

Lecture 166 Reject friend request

Lecture 167 Friend page

Lecture 168 Add friend page to sidebar

Section 15: Feature: Conversation & Message

Lecture 169 Resource for next lecture

Lecture 170 Another resource

Lecture 171 Conversation page

Lecture 172 Create a conversation

Lecture 173 Send a message

Lecture 174 Render all messages

Lecture 175 Organize component

Lecture 176 Delete message

Lecture 177 Render all conversations - part 1

Lecture 178 Render all conversations - part 2

Lecture 179 Infinite scroll message

Lecture 180 Show name on conversation detail page

Lecture 181 Keyboard event

Lecture 182 Handle new line message

Lecture 183 Resource for next lecture

Lecture 184 Attach image

Lecture 185 Remove image

Lecture 186 Send message with image

Lecture 187 Fix performance issue when typo message

Lecture 188 Bottom to top infinite scroll

Lecture 189 Test send message flow

Lecture 190 Real-time: send message

Lecture 191 Real-time: delete message

Lecture 192 Fix last message date

Lecture 193 Seen message - part 1

Lecture 194 Seen message - part 2

Lecture 195 Real-time: seen message

Lecture 196 Delete conversation

Section 16: Comeback to Friend Feature: Real Time

Lecture 197 Comeback

Lecture 198 Real-time: send friend request

Lecture 199 Real-time: accept friend request

Lecture 200 Infinite scroll

Lecture 201 Unfriend

Lecture 202 Real-time: unfriend

Lecture 203 Real-time: friend added

Lecture 204 Real-time: more about unfriend

Lecture 205 Show friends on right sidebar

Lecture 206 Fix bug

Section 17: Responsive

Lecture 207 Basic responsive

React or NextJS developers who want to level up with real-time features,Frontend developers looking to master React Query for data fetching and caching,Anyone curious about building chat apps, and live updates using Socket IO,Intermediate learners ready to go beyond simple CRUD apps,Students or professionals preparing for frontend job interviews and want a strong project in their portfolio