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
0:00
/ #1: Next App Setup
All Course Lessons (77)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Next.js From Scratch 2024
Sources: Brad Traversy
The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth al
11 hours 54 minutes 9 seconds
Full Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)
Sources: Michael Guay
Find out how to set up authentication with Clerk in 20 minutes in a Next.js and NestJS application. A simple and secure integration for your project.
18 minutes 9 seconds
CodeFast | Learn to code in weeks, not months.
Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Sources: Web Dev Cody
Are you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with
5 hours 53 minutes 23 seconds