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

Next.js 14 Real-Time Chat App using Socket IO, available at $54.99, has an average rating of 4.4, with 77 lectures, based on 14 reviews, and has 162 subscribers.

You will learn about Implement CLERK Authentication for sign-up and sign-in. Logged in users will be able to see all the list of users who registered in the application If any user want to chat with other user , they have to add the user to chats list Users can create one-to-one chat and also group chats. Users can able to update their profile picture , create groups , edit groups. Users can see unread messages count in chats-list for every chat. Integrating socket io in-order to make all the chat functionalities real time. Once the socket io is integrated , users will be able to send and receive the messages in real-time. Recipient users can see the typing animation if any user is typing in that chat. Read Receipts functionality for the messages. This course is ideal for individuals who are Fullstack Developers or Nextjs Developers It is particularly useful for Fullstack Developers or Nextjs Developers.

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

Summary

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

Price: $54.99

Average Rating: 4.4

Number of Lectures: 77

Number of Published Lectures: 77

Number of Curriculum Items: 77

Number of Published Curriculum Objects: 77

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Implement CLERK Authentication for sign-up and sign-in.

Logged in users will be able to see all the list of users who registered in the application

If any user want to chat with other user , they have to add the user to chats list

Users can create one-to-one chat and also group chats.

Users can able to update their profile picture , create groups , edit groups.

Users can see unread messages count in chats-list for every chat.

Integrating socket io in-order to make all the chat functionalities real time.

Once the socket io is integrated , users will be able to send and receive the messages in real-time.

Recipient users can see the typing animation if any user is typing in that chat.

Read Receipts functionality for the messages.

Who Should Attend

Fullstack Developers

Nextjs Developers

Target Audiences

Fullstack Developers

Nextjs Developers

Hello, Welcome to the course Next.js 14 Real-Time Chat App

Certainly, I’d be happy to elaborate on the features included in the Next.js 14  Real-Time Chat App course.

Tech Stack

1. Learn Next JS 14 Latest Features like App Router , Server Actions , Middlewares etc.

2. Implement Clerk Authentication .

3. Working with SOCKET IO to perform all real-time tasks.

4. Deploying Next JS App to Vercel and Node App to Render

5. Working with combination of both client and server components

6. Using Tailwind CSS in-order to override Ant Design default styling and building custom components

Project

1. Implement CLERK Authentication for sign-up and sign-in.

2. Logged in users will be able to see all the list of users who registered in the application

3. If any user want to chat with other user , they have to add the user to chats list

4. Users can create one-to-one chat and also group chats.

5. Users can able to update their profile picture , create groups , edit groups.

6. Users can see unread messages count in chats-list for every chat.

7. Integrating socket io in-order to make all the chat functionalities real time.

8. Once the socket io is integrated , users will be able to send and receive the messages in real-time.

9. Recipient users can see the typing animation if any user is typing in that chat.

10. Read Receipts functionality for the messages.

Next.js is an open-source, objective-coded framework for web developers created by Kotlin JS developers. It is used to create server-rendered React applications and can be used with modern JavaScript languages like TypeScript, GraphQL, and React components.

Next.js allows developers to create web applications to a high standard with pre-built features such as routing, file-based routing, webpack dev server, hot module replacement, static exports, and code splitting.

Next.js works well for building static sites and progressive web apps that are SEO-friendly, accessible, and fast.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Next App Setup

Lecture 2: Project Folder Structure

Chapter 2: Ant-D Setup

Lecture 1: Ant-D Installation

Lecture 2: Overriding Ant-D Components

Chapter 3: Clerk Authentication

Lecture 1: Why Clerk

Lecture 2: Clerk Intro

Lecture 3: Auth Components

Lecture 4: Custom Sign-in and Sign-up Pages

Lecture 5: Sign-in and Sign-up Functionalities

Lecture 6: Current User

Lecture 7: Auth Middlewares

Lecture 8: Styling of Signin and Signup Pages

Chapter 4: Mongo Setup

Lecture 1: Mongo Connection

Lecture 2: User Model

Lecture 3: Save Current User

Chapter 5: Layout

Lecture 1: Layout Structure

Lecture 2: Layout Styling

Lecture 3: Current User Info

Lecture 4: Conditional Layout

Chapter 6: State Management Setup

Lecture 1: Setup Redux Toolkit

Lecture 2: Save Current User In Redux

Chapter 7: Updating Profile Picture

Lecture 1: Integrate Firebase

Lecture 2: Upload Profile Picture UI

Lecture 3: Upload Profile Picture Logic

Chapter 8: Chat App Architecture

Lecture 1: Architecture Discussion

Lecture 2: Models

Lecture 3: Interfaces

Chapter 9: Chat Layout and Creating Chat

Lecture 1: Chat Layout

Lecture 2: Chat List Header

Lecture 3: Create Chat UI

Lecture 4: Create Chat Server Action

Lecture 5: Create Chat Conditions

Lecture 6: Showing Chatlist

Lecture 7: Selecting Chat

Chapter 10: Chat Area

Lecture 1: Recipient Card

Lecture 2: New Message UI

Lecture 3: Send Message

Lecture 4: Show Messages

Lecture 5: Date Time Format

Chapter 11: Chat Card Update

Lecture 1: Update Chat Based On Last Message

Lecture 2: Messages Scroll Issue Fix

Lecture 3: Update Unread Messages

Lecture 4: Clear Unread Messages

Chapter 12: Groups

Lecture 1: Groups Folder Strucure

Lecture 2: Create Group UI

Lecture 3: Save Group

Lecture 4: Recipient or Group Info

Lecture 5: Edit group -1

Lecture 6: Edit Group – 2

Chapter 13: Bugs and Loading Issues

Lecture 1: Chat List Bug Fix

Lecture 2: Loading Issues

Chapter 14: Node and Socket Setup

Lecture 1: Socket IO Architecture

Lecture 2: Node Setup

Lecture 3: Socket Setup (Server Side)

Lecture 4: Socket Setup (Client Side)

Lecture 5: Socket Client Server Communation

Lecture 6: Logout Functionality

Lecture 7: Showing Online Users

Chapter 15: Implement Sockets For Messages

Lecture 1: Sending Real Time Message – 1

Lecture 2: Sending Real Time Message – 2

Lecture 3: Dynamic Scroller For Messages

Chapter 16: Implement Sockets For Chat List

Lecture 1: Update Chat Based On New Message – 1

Lecture 2: Update Chat Based On New Message – 2

Chapter 17: Typing Animation & Clear Unread Counts

Lecture 1: Typing Animation – 1

Lecture 2: Typing Animation – 2

Lecture 3: Clearing unread counts

Lecture 4: Chatslist Sort Bug Fix

Chapter 18: Additional Features

Lecture 1: Groups Users Typing Animation

Lecture 2: Sending Emoji Part – 1

Lecture 3: Sending Emoji – Part 2

Lecture 4: Sending Image Part – 1

Lecture 5: Sending Image Part – 2

Chapter 19: Read Receipts

Lecture 1: Implement Read Receipts – Part 1

Lecture 2: Implement Read Receipts – Part 2

Chapter 20: Deployment

Lecture 1: Deploy Node App

Lecture 2: Deploy Next JS App

Lecture 3: Bug Fix After Deployment

Instructors

K.Sathyaprakash Reddy
Full Stack Developer

Rating Distribution

1 stars: 0 votes

2 stars: 1 votes

3 stars: 2 votes

4 stars: 1 votes

5 stars: 10 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!