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

12h 22m 25s
English
Paid

Course description

This course will introduce you to creating a real-time chat application using Next.js 14 and Socket.IO. We will cover both the latest features of Next.js and advanced tools for building dynamic applications.

Read more about the course

Technology Stack:

  • Exploring the latest features of Next.js 14, such as App Router, Server Actions, Middlewares, and more.
  • Implementing authentication through Clerk.
  • Working with Socket.IO to provide all real-time features.
  • Deploying a Next.js application on Vercel and a Node.js application on Render.
  • Using both client and server components in combination.
  • Applying Tailwind CSS to customize Ant Design styles and create custom components.

Project Tasks:

  • Implementing authentication through Clerk for registration and login.
  • Displaying a list of all registered users for authorized users.
  • Creating a list of chats with users to enable communication.
  • Supporting personal and group chats.
  • Updating profile, adding and editing groups.
  • Displaying the number of unread messages for each chat.
  • Integrating Socket.IO to enable real-time chat functionality.
  • Implementing "typing" animations to show when a message is being typed by the interlocutor.
  • Implementing message read statuses.

About Next.js:

Next.js is a powerful open-source framework for web development, designed for building server and client applications with React. It supports modern languages like TypeScript and GraphQL and offers numerous features, including routing, static export, code splitting, and SEO support. Next.js suits both static sites and progressive web applications, providing high performance and accessibility.

Join this course and create a real-time chat application using Next.js and Socket.IO, gaining valuable knowledge and skills with modern web technologies!

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 77 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Next App Setup

All Course Lessons (77)

#Lesson TitleDurationAccess
1
Next App Setup Demo
06:59
2
Project Folder Structure
04:41
3
Ant-D Installation
05:17
4
Overriding Ant-D Components
10:32
5
Why Clerk
02:36
6
Clerk Intro
04:41
7
Auth Components
06:21
8
Custom Sign-in and Sign-up Pages
04:19
9
Sign-in and Sign-up Functionalities
06:05
10
Current User
07:22
11
Auth Middlewares
04:57
12
Styling of Signin and Signup Pages
08:40
13
Mongo Connection
05:10
14
User Model
06:01
15
Save Current User
10:35
16
Layout Structure
10:44
17
Layout Styling
07:27
18
Current User Info
18:44
19
Conditional Layout
03:12
20
Setup Redux Toolkit
08:40
21
Save Current User In Redux
04:57
22
Integrate Firebase
09:19
23
Upload Profile Picture UI
09:36
24
Upload Profile Picture Logic
18:07
25
Architecture Discussion
14:40
26
Models
09:25
27
Interfaces
04:11
28
Chat Layout
08:01
29
Chat List Header
08:29
30
Create Chat UI
10:41
31
Create Chat Server Action
11:28
32
Create Chat Conditions
12:03
33
Showing Chatlist
19:21
34
Selecting Chat
12:15
35
Recipient Card
15:25
36
New Message UI
10:35
37
Send Message
13:59
38
Show Messages
24:53
39
Date Time Format
06:15
40
Update Chat Based On Last Message
10:48
41
Messages Scroll Issue Fix
03:27
42
Update Unread Messages
11:51
43
Clear Unread Messages
10:26
44
Groups Folder Strucure
09:42
45
Create Group UI
15:37
46
Save Group
11:28
47
Recipient or Group Info
17:36
48
Edit group -1
06:53
49
Edit Group - 2
15:55
50
Chat List Bug Fix
01:54
51
Loading Issues
13:56
52
Socket IO Architecture
10:48
53
Node Setup
04:34
54
Socket Setup (Server Side)
04:43
55
Socket Setup (Client Side)
08:49
56
Socket Client Server Communation
10:47
57
Logout Functionality
08:21
58
Showing Online Users
11:27
59
Sending Real Time Message - 1
12:03
60
Sending Real Time Message - 2
08:51
61
Dynamic Scroller For Messages
07:21
62
Update Chat Based On New Message - 1
16:32
63
Update Chat Based On New Message - 2
11:07
64
Typing Animation - 1
12:21
65
Typing Animation - 2
02:58
66
Clearing unread counts
11:54
67
Chatslist Sort Bug Fix
06:42
68
Groups Users Typing Animation
07:11
69
Sending Emoji Part - 1
14:47
70
Sending Emoji - Part 2
02:42
71
Sending Image Part - 1
11:02
72
Sending Image Part - 2
13:00
73
Implement Read Receipts - Part 1
12:33
74
Implement Read Receipts - Part 2
14:14
75
Deploy Node App
07:38
76
Deploy Next JS App
10:23
77
Bug Fix After Deployment
03:21

Unlock unlimited learning

Get instant access to all 76 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Sources: udemy
Learn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea
19 hours 29 minutes 29 seconds
Build A Canva Clone

Build A Canva Clone

Sources: Code With Antonio
In this 18-hour course, we will create a platform for graphic design with numerous features. You will learn how to create an intuitive editor for cust...
17 hours 48 minutes 39 seconds
Build A Slack Clone

Build A Slack Clone

Sources: Code With Antonio
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.
15 hours 13 minutes 30 seconds
The No-BS Solution for Enterprise-Ready Next.js Applications

The No-BS Solution for Enterprise-Ready Next.js Applications

Sources: Jack Herrington
Next.js is one of the most popular frameworks for building web applications. It is fast, flexible, and underpins some of the largest sites on the internet.
8 hours 20 minutes 31 seconds