CourseFlix

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

Course content

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

Related courses

  • Build and Deploy a B2B SaaS AI Support Platform thumbnail

    Build and Deploy a B2B SaaS AI Support Platform

    By: Antonio Erdeljac (Code With Antonio)
    In this course, we will build a customer support platform powered by AI from scratch: we will set up a live chat using Convex Agents, add voice support through.
    22 hours 20 minutes 55 seconds 5 / 5
  • Duolingo Clone thumbnail

    Duolingo Clone

    By: Antonio Erdeljac (Code With Antonio)
    In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language
    11 hours 12 minutes 32 seconds
  • NestJS Server-Sent Events | Build a Real Time Crypto Dashboard thumbnail

    NestJS Server-Sent Events | Build a Real Time Crypto Dashboard

    By: Michael Guay
    Study how to create a crypto dashboard on NestJS using Server-Sent Events to stream data in real-time without reloading the page. Set up
    23 minutes 57 seconds

Frequently asked questions

What is Next.js 14 Real-Time Chat App using Socket IO about?
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…
Who teaches Next.js 14 Real-Time Chat App using Socket IO?
Next.js 14 Real-Time Chat App using Socket IO is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Next.js 14 Real-Time Chat App using Socket IO?
Next.js 14 Real-Time Chat App using Socket IO contains 77 lessons with a total runtime of 12 hours 22 minutes. All lessons are available to watch online at your own pace.
Is Next.js 14 Real-Time Chat App using Socket IO free to watch?
Next.js 14 Real-Time Chat App using Socket IO is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Next.js 14 Real-Time Chat App using Socket IO online?
Next.js 14 Real-Time Chat App using Socket IO is available to watch online on CourseFlix at https://courseflix.net/course/next-js-14-real-time-chat-app-using-socket-io. The page hosts every lesson with the integrated video player; no download is required.