Pro NextJS & TypeScript – Ultimate Social Media App

Learn how WebSocket enables true bi-directional real-time communication for chat, stocking applications, online games, and video streaming, with examples like Facebook, WhatsApp, Discord, and Slack.

Learn how to exchange data between server and client using WebSocket, sending messages with ws.send, listening with onmessage, and ensuring readiness with onopen in an asynchronous connection.

Set up socket.io on both client and server to enable WebSocket-based chat, install the socket.io package, modify the server to create an io instance, and handle the connection event.

Build a chat app with socket.io by emitting a send message event containing username and message, then broadcast to all sockets using io and update the chat box.

Teach room-based chat in a Next.js app with web sockets by joining rooms, sending room or global messages, and emitting events with io.to on the server and client.

Learn how to implement shared layouts in Next.js using the route layout and its children prop, mirroring React Router Dom outlets and maintaining a consistent header across pages.

Compare client side rendering and server side rendering in Next.js, and explore static site generation and incremental static regeneration, with server pre-rendering delivering immediate content.

Learn how Next.js client components render on the server and then on the client using the new client tag, and how they differ from server components.

Understand client boundaries in Next.js by examining client and server components. See how importing server components into a client component affects rendering and props.

Demonstrate how client boundaries in Next.js propagate when a client component invokes a server component, and how a provider wrapper fixes issues and reduces bundle size.

Learn how to call an API from a Next.js server action by sending a JSON body with fetch, handling headers, and posting new song data from a form.

Learn how the useActionState hook manages server actions and form state to disable submit buttons, handle initial data shapes, and display updated results on screen.

Set up a Next.js project from scratch by following the docs, create an app named social client in TypeScript, skip Tailwind, and run in dev to view on localhost.

Master client-side form validation with react-hook-form in a Next.js project using useForm, register, and handleSubmit with a schema-driven validator for real-time errors and polished UI.

Clone the project, install bucket, configure env with MongoDB URL and Cloudinary API keys, create a MongoDB cluster and database, enable global network access, and run the development server.

Sign up a new user using the signup API and configure the Next.js client with API url and public env variable; test to receive user data and an access token.

Learn to attach the bearer token to every API request by centralizing token handling with a request interceptor, sourcing the access token from local storage or Redux.

Configure the access token expiry in the environment, restart the app, and log out and in to refresh it; redirect on unauthorized responses using client-side navigation and clear token data.

Build an interactive background color selector for a social media app, displaying a color list and updating the background color on click.

learn to build a create post form in Next.js with content, background color, and privacy handling, validate input, and call the post API using React Query.

Master the image upload workflow for a new post by uploading multiple files to Cloudinary, creating the post, and linking media via API calls and form data.

Understand how cursor pagination drives infinite scroll, visualize the next-page cursor and default limit of ten, and fetch subsequent pages as you scroll.

Explore how to implement React Query infinite scroll with cursor-based pagination in a Next.js social app, loading the next page on scroll, handling the cursor, and showing fetching status.

Learn to convert the infinite scroll into a reusable custom hook by wrapping a target ref and fetch logic for automatic data loading on scroll.

Bind the selected post data to an update modal using a Material UI menu with anchor origin and transform origin, and manage data flow through parent and child callbacks.

Install the socket.io client and create a socket context with a provider for real-time posts. Share the socket across components, listen for events, and clean up to prevent memory leaks.

Learn to implement real-time post updates in a Next.js social app using a socket to update a post by ID, changing background color and content, with notes on image updates.