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
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
supastarter - SaaS starter kit for Next.js & Nuxt
Sources: supastarter
Supastarter is a powerful starter kit for building scalable and production-ready SaaS applications based on Next.js. Save hundreds of hours...
Next.js 14 & React - The Complete Guide
Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds
Sleek Next.JS Applications with shadcn/ui
Sources: fullstack.io
Dive into the development of modern web interfaces by learning the basics of shadcn/ui, TailwindCSS, and Radix UI. Learn to create flexible and modular...
5 hours 10 minutes 20 seconds
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2
Sources: udemy
This is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the cour
8 hours 6 minutes 25 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper
Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...