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

The Road to Next

The Road to NextRobin Wieruch

Category: React.js, Next.js
Duration 18 hours 14 minutes 50 seconds
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
The No-BS Solution for Enterprise-Ready Next.js Applications

The No-BS Solution for Enterprise-Ready Next.js ApplicationsJack Herrington

Category: Next.js
Duration 8 hours 20 minutes 31 seconds
Duolingo Clone

Duolingo CloneCode With Antonio

Category: Next.js
Duration 11 hours 12 minutes 32 seconds
Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcnudemy

Category: Next.js
Duration 8 hours 12 minutes 38 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
Next.js & React with ChatGPT - Development Guide (2023)

Next.js & React with ChatGPT - Development Guide (2023)udemy

Category: React.js, Next.js, ChatGPT
Duration 7 hours 6 minutes 49 seconds
Real-time chat with Node.js, Socket.io and Vue.js

Real-time chat with Node.js, Socket.io and Vue.jsCodecourse

Category: Node.js, Vue, Socket.IO
Duration 26 minutes 39 seconds
NextJS & OpenAI - 2024 Edition

NextJS & OpenAI - 2024 Editionudemy

Category: Next.js
Duration 13 hours 41 minutes 21 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete GuideudemyAcademind Pro

Category: React.js, Next.js
Duration 36 hours 13 minutes 15 seconds