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

Focused View

K.Sathyaprakash Reddy

12:20:56

15 View

1. Introduction

1. Next App Setup.mp4

06:58

2. Project Folder Structure.mp4

04:40

2. Ant-D Setup

1. Ant-D Installation.mp4

05:16

2. Overriding Ant-D Components.mp4

10:31

3. Clerk Authentication

1. Why Clerk.mp4

02:35

2. Clerk Intro.mp4

04:40

3. Auth Components.mp4

06:20

4. Custom Sign-in and Sign-up Pages.mp4

04:18

5. Sign-in and Sign-up Functionalities.mp4

06:04

6. Current User.mp4

07:21

7. Auth Middlewares.mp4

04:56

8. Styling of Signin and Signup Pages.mp4

08:39

4. Mongo Setup

1. Mongo Connection.mp4

05:08

2. User Model.mp4

06:00

3. Save Current User.mp4

10:33

5. Layout

1. Layout Structure.mp4

10:42

2. Layout Styling.mp4

07:26

3. Current User Info.mp4

18:42

4. Conditional Layout.mp4

03:11

6. State Management Setup

1. Setup Redux Toolkit.mp4

08:39

2. Save Current User In Redux.mp4

04:56

7. Updating Profile Picture

1. Integrate Firebase.mp4

09:18

2. Upload Profile Picture UI.mp4

09:35

3. Upload Profile Picture Logic.mp4

18:06

8. Chat App Architecture

1. Architecture Discussion.mp4

14:39

2. Models.mp4

09:24

3. Interfaces.mp4

04:10

9. Chat Layout and Creating Chat

1. Chat Layout.mp4

08:00

2. Chat List Header.mp4

08:27

3. Create Chat UI.mp4

10:40

4. Create Chat Server Action.mp4

11:27

5. Create Chat Conditions.mp4

12:01

6. Showing Chatlist.mp4

19:20

7. Selecting Chat.mp4

12:14

10. Chat Area

1. Recipient Card.mp4

15:24

2. New Message UI.mp4

10:34

3. Send Message.mp4

13:58

4. Show Messages.mp4

24:52

5. Date Time Format.mp4

06:14

11. Chat Card Update

1. Update Chat Based On Last Message.mp4

10:47

2. Messages Scroll Issue Fix.mp4

03:26

3. Update Unread Messages.mp4

11:50

4. Clear Unread Messages.mp4

10:25

12. Groups

1. Groups Folder Strucure.mp4

09:40

2. Create Group UI.mp4

15:36

3. Save Group.mp4

11:27

4. Recipient or Group Info.mp4

17:35

5. Edit group -1.mp4

06:52

6. Edit Group - 2.mp4

15:54

13. Bugs and Loading Issues

1. Chat List Bug Fix.mp4

01:53

2. Loading Issues.mp4

13:55

14. Node and Socket Setup

1. Socket IO Architecture.mp4

10:47

2. Node Setup.mp4

04:33

3. Socket Setup (Server Side).mp4

04:42

4. Socket Setup (Client Side).mp4

08:48

5. Socket Client Server Communation.mp4

10:45

6. Logout Functionality.mp4

08:20

7. Showing Online Users.mp4

11:26

15. Implement Sockets For Messages

1. Sending Real Time Message - 1.mp4

12:01

2. Sending Real Time Message - 2.mp4

08:50

3. Dynamic Scroller For Messages.mp4

07:20

16. Implement Sockets For Chat List

1. Update Chat Based On New Message - 1.mp4

16:31

2. Update Chat Based On New Message - 2.mp4

11:06

17. Typing Animation & Clear Unread Counts

1. Typing Animation - 1.mp4

12:20

2. Typing Animation - 2.mp4

02:57

3. Clearing unread counts.mp4

11:52

4. Chatslist Sort Bug Fix.mp4

06:41

18. Additional Features

1. Groups Users Typing Animation.mp4

07:10

2. Sending Emoji Part - 1.mp4

14:46

3. Sending Emoji - Part 2.mp4

02:41

4. Sending Image Part - 1.mp4

11:01

5. Sending Image Part - 2.mp4

12:58

19. Read Receipts

1. Implement Read Receipts - Part 1.mp4

12:32

2. Implement Read Receipts - Part 2.mp4

14:12

20. Deployment

1. Deploy Node App.mp4

07:37

2. Deploy Next JS App.mp4

10:22

3. Bug Fix After Deployment.mp4

03:20

Description

Build real time chat application using Next JS , Socket IO , Clerk , Firebase

What You'll 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 is this for?

Fullstack Developers

Nextjs Developers

What You Need to Know?

React Basics

Next Basics

More details

Description
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

Learn Next JS 14 Latest Features like App Router , Server Actions , Middlewares etc.
Implement Clerk Authentication .
Working with SOCKET IO to perform all real-time tasks.
Deploying Next JS App to Vercel and Node App to Render
Working with combination of both client and server components
Using Tailwind CSS in-order to override Ant Design default styling and building custom components

Project

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.

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.
Who this course is for:
Fullstack Developers
Nextjs Developers

User Reviews

Rating

average 0

Total votes0

Focused display

Hi,I am Satyaprakash Reddy, I am a freelance developer in India.I've 5 years of experience in developing applications in Android and Web Development.I've been teaching coding lectures from the past three years in an Institute. So now I wanted to share my knowledge across the globe through Udemy.I spend most of my time researching how to make learning to code fun and make hard concepts easy to understand. I apply everything I discover into my Bootcamp courses. In my courses, you'll find lots of geeky humor but also lots of explanations and animations to make sure everything is easy to understand.Thank U.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.