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

12h 22m 25s
English
Paid

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 Next.js 14 Real-Time Chat App using Socket IO

Join premium to watch
Go to premium
# Title Duration
1 Next App Setup 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

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

Sleek Next.JS Applications with shadcn/ui

Sleek Next.JS Applications with shadcn/uifullstack.io

Category: Next.js
Duration 5 hours 10 minutes 20 seconds
Real-Time Collaborative Apps with Next.js and Supabase

Real-Time Collaborative Apps with Next.js and Supabasefullstack.io

Category: Next.js
Duration 51 minutes 59 seconds
Server side rendering with Next + React

Server side rendering with Next + Reactudemy

Category: React.js, Next.js, MongoDB, OpenGL Shading Language (GLSL)
Duration 29 hours 43 minutes 19 seconds
Build a Google Docs Clone

Build a Google Docs CloneCode With Antonio

Category: Next.js
Duration 10 hours 26 seconds
Full Stack Development

Full Stack Developmentneetcode.io

Category: TypeScript, Next.js
Duration 4 hours 24 minutes 36 seconds
Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Discord Clone - Learn MERN Stack with WebRTC and SocketIOudemy

Category: JavaScript, React.js, Node.js, MongoDB, Socket.IO, WebRTC
Duration 19 hours 29 minutes 29 seconds
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress

Ecommerce on the Jamstack with Snipcart, Next.js, & WordPressleveluptutorials

Category: Next.js, Wordpress
Duration 4 hours 18 minutes 15 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advancedudemy

Category: React.js, Next.js, NestJS
Duration 8 hours 40 minutes 51 seconds
Build a Youtube Clone

Build a Youtube CloneCode With Antonio

Category: React.js, Next.js
Duration 23 hours 42 minutes 10 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejsudemy

Category: React.js, Next.js, Node.js, MongoDB, Socket.IO
Duration 13 hours 2 minutes 12 seconds