Next.js 14 Real-Time Chat App using Socket IO

Install and integrate the Antd UI library in a Next.js project. Learn to use the button components and resolve Tailwind CSS overlap by turning off preflight in Tailwind CSS config.

Wrap the app in a config provider and a theme provider to apply a token-based theme globally, customizing primary color, button height, border radius, shadows, and hover styles for consistency.

Learn to set up Clerk authentication and user management by creating an account, starting a project, customizing the sign-in form, and saving environment keys to a dot env file.

Create sign in and sign up pages with clerk, wrap the app with clerk provider in the layout for Next.js 14, and configure middleware and a user button for authentication.

Learn to build custom sign-in and sign-up pages in a Next.js 14 app using clerk, keeping authentication on your domain with app directory changes and env variables.

Demonstrate sign up and sign in flows in a Next.js 14 app, including first name, last name, username, email and password validation, account creation, email verification, and sign out behavior.

Display the current user's details on private pages by retrieving first name, last name, username, and email. Handle missing email gracefully and prepare data for future storage in MongoDB.

Learn how the Clark authentication middleware handles public and private routes, and how to make a page like contact us publicly accessible by updating the public routes.

Learn to style sign-in and sign-up pages using css in a Next.js app, focusing on background, centering, Montserrat font, watermark removal, border radius, and responsive card sizing.

Learn to connect a Next.js app to a local MongoDB server with Mongoose, configure environment variable for the Mongo URL, and implement a db config connect function to test MongoDB.

Create a dedicated MongoDB users collection and a Mongoose user model with clerk user id, name, username, email (optional), profile pic, bio, and timestamps.

Store the logged-in user in the MongoDB users collection via a server action, using Clerk's current user to find or create the user and normalize responses with JSON.stringify/parse.

Create a shared root layout for Next.js chat app, featuring a persistent header with project title and current user, and reusable layout provider, header, and content components across pages.

Style the Next.js 14 chat app header and make the current user dynamic by fetching from MongoDB via a server action, then display the user's name and profile picture.

Implement a right side drawer that shows user info using a typed interface. Display profile image, name, id, and joined date, with clerk sign-out and routing to sign in.

Learn to conditionally render the layout header for public and private routes using next navigation's path name hook, showing the header after login and handling logout to close the drawer.

Explore setting up redux toolkit for global state management to store current user data, avoid prop drilling, and access user info across pages using a redux provider.

Store the current user in redux toolkit via a selector and dispatch, replacing local state with global current user data, and access it across components like the header and profile.

Integrate Firebase into a Next.js real-time chat app to enable profile picture updates and store images in Firebase storage. Configure Firebase with environment variables using Next.js public keys for access.

Learn to build the profile picture upload interface within the current user info component, handle a selected file with a live preview, enforce a single image, and update Firebase storage.

Learn to implement uploading a profile picture in a Next.js app with Firebase storage, including a helper to upload bytes and retrieve a download URL, then update the user profile.

Examine the architecture of a real-time Next.js chat app, including charts collection, chart documents for 1-to-1 and group chats, and message structures with read by and unread counts.

Learn to implement mongoose-based chat and message models for a real-time chat app, including chart and message schemas, user references, group fields, admins, and read/unread tracking.

Explore designing TypeScript interfaces for chat and message models aligned with MongoDB schemas, including id, user types, last message, and group properties, plus architecture context.

Design a two-panel UI for a Next.js 14 real-time chat app using socket io, with a fixed-width charts pane and a chart area, including a charts header and charts list.

Create a chat list header with a flex layout and a dropdown to initiate new charts, opening a centered create new chart modal that shows non-connected users.

Build a chat interface by loading users via a server action, rendering avatars and names, showing a loading spinner, and offering add-to-charts while filtering out the current user.

Create a server action in charts.ts to add a chart using the chart model, sending a payload with user IDs, created by the current user, and is group chart.

In next.js 14 real-time chat app using socket io course, fetch and filter charts for logged-in user, populate chart users, and update redux state with get all charts, handling loading.

Pull chat data from reducer, map through each chart, and render a chart card showing the recipient or group name and profile picture with last message, time, and unread counts.

Highlight and select charts with a hover and persistent selected state, implemented via a redux chart slice, updating the store and styling for clear chart identification and loading indicators.

Create a recipient card in a Next.js real-time chat app, displaying the selected chart recipient’s info, messages, and a new message component, with a no-chart state using a logo.

Create the send message interface for a Next.js 14 real-time chat app, featuring an emoji picker placeholder, input field, and send button, with a flex-based layout.

Learn to implement send and receive message flow for a Next.js 14 real-time chat app, storing messages by chart, wiring server actions, and building the message UI and chart info.

Build the real-time chat messages UI by chart id, render messages with sender info and profile picture, align current user to the right with timestamps.