Pro NextJS & TypeScript – Ultimate Social Media App

Compare HTTP's request–response model with WebSockets' bidirectional communication, and see how a chat feature can use WebSockets to push and receive messages in real time.

Build a simple chat app over http with express and cors, creating endpoints to send and fetch messages. Explore how web sockets enable real-time updates.

Explore the tcp handshake and its three-way syn, syn-ack, and ack steps, and see how http runs on tcp while stateless requests coexist with persistent connections.

The HTTP handshake upgrades an HTTP connection to a WebSocket connection by sending an upgrade header and receiving a 101 response, enabling two-way communication.

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.

Set up a WebSocket connection by using the native browser WebSocket API on the client and a small server package to handle the upgrade to WebSocket.

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.

Describe how a socket is the endpoint between a client and its server, enabling WebSocket communication, where a server serves multiple clients and each client connects to a single server.

Build a real-time chat with WebSocket by sending messages from the client to the server, then broadcasting to all connected clients and handling message types.

Explore why socket.io is preferred for real-time apps, providing event-based messaging, auto reconnect, rooms and namespaces, engine.io integration, and fallbacks like long polling.

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.

Use Socket.io to send and receive data with an event-based API, emitting a welcome event to a socket and listening for that event on the client.

Learn to send and receive data over web sockets by emitting update events, wrapping data in objects, listening for updates with callbacks, and using acknowledgements to trigger server actions.

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.

Explore broadcasting with socket.io to send messages to all clients or to all except the sender using the io object, and broadcast new user joined notifications in a chat app.

Explore building chat rooms with socket.io by joining rooms, emitting join room requests, and having the server add a socket to the room so messages stay within that room.

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.

Explore how Socket.io namespaces isolate events, create a default slash namespace and an admin namespace, and emit or listen to events within each channel.

Implement a real-time online user list by prompting for a username, emitting a new user event via socket.io over WebSocket, and broadcasting updates to all clients.

Learn Next.js fundamentals through a setup tutorial: install, copy syntax, create a project, enable the app router, and explore Turbo Box support for Next.js 15.

Define routes in Next.js by creating a sign-in folder that matches the URL, add a sign-in page component, and verify routing works using the default export and file-based routing.

Discover how to map the root URL using the app folder in Next.js, create nested routes like dashboard and admin, and define the base route file to control the router.

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.

Explore route groups in Next.js, building multi level layouts and headers with root and child layouts, and organizing pages with layout groups to improve readability and maintainability.

Learn to navigate between pages in next.js using the link component and useRouter, enabling client navigation to sign in and sign up without refreshing the app.

Explore dynamic routing in next.js by building a product listings page with nested dynamic routes using [slug], handling params and promises, and leveraging a server component.

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.

Explore the drawbacks of server side rendering and learn how static site generation prebuilds HTML at build time to boost performance and user experience.

Implement incremental static regeneration to build only hot products at build time. Generate HTML for other products on the first request and serve it instantly on subsequent requests.

Explore server components in Next.js, where components render on the server and data can be fetched with async/await directly in the component, while hooks cannot run there.

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.

Explore the hydration process in Next.js, where the server sends a React server component to the client, and hydration attaches events to enable interactive UI even without client JavaScript.

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.

Explore Next.js error handling in routing, including global and local errors, implement a client component error to show 'something went wrong' and provide a 'try again' recovery.

Create and export a login component, integrate the login UI into the app, and observe global versus local routing, a 3000ms delay, product listing data, and upcoming suspense for fetch.

Learn to use suspense in Next.js to fetch and render product listings with a fallback. The technique wraps the API calls in a separate component to improve performance.

Explore how to mutate data on the server in Next.js by using server actions, the use server directive, and the form action to submit form data from client to server.

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.

Explore the useFormStatus hook to manage form state during server actions and mutations, enabling the submit button to disable for three seconds and binding status across components.

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.

Explore schema validation by validating form data, handling server and client side errors, and surfacing messages in the UI using client components, form status, and React Query.

Learn to implement server-side form validation in Next.js using the Zod schema validation library, define schemas, validate data, handle errors with flatten, and manage success and error messaging.

Define server actions inside the server, separate client and server components, and use form status to track data, errors, and loading states in a Next.js app.

Explore how to use the redirect function from next/navigation in Next.js to auto navigate to a song page after creation, with a practical example and troubleshooting tips.

Explore the four caching types in Next.js, focusing on request memoization, data cache, and how server and client caches interact via the router.

Explore full route cache behavior by building a Next.js app and distinguishing static vs dynamic rendering, pre-rendering content on the server, and rendering on demand.

Understand how static and dynamic pages work in Next.js, exploring dynamic routes, server components, and how production mode and revalidation affect rendering and caching.

Explore time based validation in Next.js Pro: compare on-demand and periodic validation, learn how revalidation after a set duration serves fresh data while handling stale data in the background.

Learn how to implement on-demand validation in Next.js by using provider tags or masks, revalidating specific URLs with tags, and applying the fetch API in real-world scenarios.

Explore how Next.js handles fetch caching, including when to disable caching and using options like no store, frozen dynamics, and unstable store, with a recommended await collection in Next.js 15.

Explore caching data in Natchez to boost performance, covering four caching kinds, full cache with static and dynamic decisions, and time-based or on-demand validation.

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.

Integrate the Material UI component library into the Next.js project, configure the app with the Material UI providers, and test by rendering a sample button copied from the documentation.

Understand how the Material UI theme defines colors and typography through the palette and primary variants, and how to override components like the button with theme configuration.

Download the attached file, place it in the app folder, and install the bucket to prepare the layout, including header, app bar, sidebar, main content, and a right sidebar.

Organize app layout by creating header and left/right sidebars as separate components, place main content in the page, wrap children in the layout, and make it responsive with CSS.

Fix use client tag to ensure client-side rendering for header state and z-index behavior in a Next.js social media app, adjusting layout and sidebars to work at runtime.

Explore why redux and react query are used together to share state across components, enabling client-side data fetching for real-time updates, infinite scroll, and socket integration in a Nestjs app.

Set up redux toolkit and react-redux in the Netjet app, create a store, reducers, and a color reducer to manage state.

Wrap the layout with a Redux provider, create a client-only provider component, and resolve server and client component issues to enable a working Redux store in the Next.js app.

Install version 5 of react query, create a query client, and wrap the Next.js app with the query client provider and the Redux top-level provider via a custom hook.

Set up Axios to power the API layer, configure an Axios instance with interceptors, define authentication and user APIs, and replace the default fetch with a wrapper for consistent requests.

Builds a from-scratch authentication flow in Next.js, adding a signup route and an authentication layout that cleanly groups routes and returns children, while refactoring root layout and removing unused code.

Build a sign up page by copying templates, refactoring into a dedicated sign up component within an authentication folder, and using live preview to verify the UI.

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.

Discover how to test a social app API using Insomnia, importing a YAML file to create a social collection, and verify authentication with email and password to obtain a token.

Learn to set up a redux user slice, store user credentials and access token in redux and local storage, and navigate to the home page after a successful api call.

Create the sign in page in the app authentication flow, configure the sign in input, and use the authentication API to obtain an access token and redirect upon success.

Install and configure toastify to display success and error messages, import the toast container, and centralize notification logic for API responses.

Learn how to implement a protected page in a Next.js app using Redux authentication, client-side redirects, and a common component to guard routes and persist login state.

Persist redux data by loading the user from local storage on the client, using a getUser utility to safely read storage and avoid server-side rendering errors in Next.js.

Implement unauthorized page handling in a Next.js social app by guarding routes, checking isAuthenticated, and redirecting logged-in users away from sign in or sign up to the home page.

Implement logout by clicking the avatar to open a material ui menu with a logout option, reset redux user to initial state, clear local storage, and navigate to sign-in page.

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.

Learn how to implement authentication without libraries, manage ACLs, and access the Redux store outside components, then practice navigation in a Next.js social media app.

Build a post creation modal in a Next.js social app by replacing inputs with typography, styling a Material UI dialog, and wiring click-to-open behavior for creating posts.

Explore implementing a modal UI for creating a boss model, featuring image upload, background color options, title, content and action areas, an accessible close button, and a create action.

Keep the home page as a server component and import the client-dependent parts outside, practice organizing post pages with proper index and patch steps to ensure correct Next.js behavior.

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

Implement image preview on a modal by triggering a hidden file input with useRef, handling the file selection, converting it to a blob URL, and rendering a live preview list.

Add an absolute close icon on a preview image with hover styling; implement onClick to remove the image by index and revoke the object URL to free memory.

Organize a complex component by extracting the background color selector into its own component, wiring colors and on select handlers, and isolating the image preview into another component.

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.

Create a custom hook for React Query to encapsulate a post creation mutation with media uploads, including file handling and cloud upload logic, and separate it from the component.

Fetch and render posts using a post API and react query, then display the author name, content, and images with an image preview component.

this video shows how to revalidate data after creating a post using React Query, triggering invalidation of the post query on mutation success so the new post appears immediately.

Format date shows how to format timestamps in a react application using a popular library, with examples like '3 hours ago' and 'yesterday', and demonstrates a sample migration workflow.

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.

Refactor by isolating the post area into a post card component and wire in the necessary imports. Clean up unused imports and verify the app remains functional after changes.

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.

Learn to implement update post flows by binding existing data, editing content, and replacing media with a mutation that updates image files and revalidates data.

Implement an update post flow in a modal by toggling between create and update logic, using initial values, the logged-in state, and the post model, then refresh the application.

Learn to implement delete post with a confirmation modal in a Next.js social app using React Query mutations, API calls, and data revalidation.

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 creation by listening to socket events, update the user interface immediately with server-emitted post data, and manage state or React Query integration.

Update the cache manually with setQueryData and an update function to add the new post at the beginning of the existing data for real-time updates.

Listen for the post:apply media event, filter posts by id, and append the uploaded media to the matching post in real time so images display after upload.

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.

Debug the update image bug by tracing how removing and adding images changes the array and indices, including removing the last image like the Google icon.

Master real-time image replacement in a social media app by reflecting image updates, showing the image on update, and handling media with event listeners for remote image updates.

Handle delete post in real-time by updating the page, looking up data, and filtering out the post using the boss array from this team.