CF

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

12h 22m 25s
English
Paid

Discover the potential of real-time communication applications by building a chat app from scratch using Next.js 14 and Socket.IO. This course provides comprehensive coverage of the latest tools and features necessary for crafting dynamic applications.

Technology Stack

In this course, you will explore:

  • Latest features of Next.js 14 including App Router, Server Actions, and Middlewares.
  • Authentication implementation with Clerk.
  • Real-time capabilities provided by Socket.IO.
  • Deployment of a Next.js application on Vercel and a Node.js application on Render.
  • Combining both client and server components efficiently.
  • Utilizing Tailwind CSS to customize styling of Ant Design components and create custom UI elements.

Project Tasks

The hands-on tasks in this course include:

  • Implement registration and login authentication with Clerk.
  • Display a comprehensive list of all registered users for authorized access.
  • Facilitate communication by creating user chat lists.
  • Enable support for both personal and group chats.
  • Profile updates and group management, including addition and editing.
  • Visualize the number of unread messages for each chat session.
  • Enhance chat functionality by integrating Socket.IO for real-time messaging.
  • Implement "typing" indicators to show ongoing message composition.
  • Include message read statuses for improved interactivity.

About Next.js

Next.js stands as a robust open-source framework tailored for web developers focusing on building server and client-side applications using React. It supports cutting-edge technologies such as TypeScript and GraphQL, and includes features like routing, static export, code splitting, and SEO optimization. Next.js excels in constructing both static websites and progressive web applications, offering superior performance and accessibility.

Join this course to master the creation of a real-time chat application using Next.js and Socket.IO, and gain proficiency in modern web technologies!

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 77 lessons

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
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

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling in the course, it is recommended that you have a basic understanding of JavaScript and experience with React, as Next.js is a React-based framework. Familiarity with Node.js and server-side development will also be beneficial due to the course's focus on both client and server components. Knowledge of CSS is helpful for working with Tailwind CSS and Ant Design components.
What will I build during this course?
During the course, you will build a real-time chat application from scratch using Next.js 14 and Socket.IO. Key features include user registration and login with Clerk, personal and group chat functionalities, real-time messaging with Socket.IO, and deployment on Vercel and Render. You will also implement 'typing' indicators and message read statuses for enhanced interactivity.
Who is the target audience for this course?
The course is ideal for web developers interested in building real-time communication applications. It suits those who want to deepen their understanding of Next.js and Socket.IO, as well as developers looking to integrate authentication systems like Clerk and deploy applications on platforms such as Vercel and Render.
How does this course differ from other courses on Next.js?
This course focuses specifically on building a real-time chat application using Next.js 14, leveraging features like App Router and Server Actions. It uniquely combines this with real-time communication through Socket.IO, and covers deployment on Vercel and Render. Compared to general Next.js courses, it provides a practical approach to integrating real-time capabilities and advanced authentication.
Which specific tools and platforms will I learn to use in this course?
The course covers the latest features of Next.js 14, including App Router and Server Actions, as well as authentication with Clerk. You will learn to implement real-time capabilities using Socket.IO and style components with Tailwind CSS and Ant Design. Deployment will be covered on Vercel for the Next.js application and Render for the Node.js application.
What topics are not covered in this course?
The course does not cover introductory concepts of JavaScript or React, as it assumes foundational knowledge in these areas. Additionally, it does not delve into other real-time communication technologies outside of Socket.IO or advanced backend services unrelated to the chat application.
How much time should I expect to commit to this course?
The course consists of 77 lessons, which are designed to be comprehensive and hands-on. While the total runtime is not specified, students should expect to dedicate significant time to understand the concepts thoroughly, complete the hands-on tasks, and experiment with building the chat application.