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

Build real time chat application using Next JS , Socket IO , Clerk , Firebase

What you'll learn
Implement CLERK Authentication for sign-up and sign-in.
Logged in users will be able to see all the list of users who registered in the application
If any user want to chat with other user , they have to add the user to chats list
Users can create one-to-one chat and also group chats.
Users can able to update their profile picture , create groups , edit groups.
Users can see unread messages count in chats-list for every chat.
Integrating socket io in-order to make all the chat functionalities real time.
Once the socket io is integrated , users will be able to send and receive the messages in real-time.
Recipient users can see the typing animation if any user is typing in that chat.
Read Receipts functionality for the messages.
Requirements
React Basics
Next Basics
Description
Hello, Welcome to the course
Next.js 14 Real-Time Chat App
Certainly, I'd be happy to elaborate on the features included in the Next.js 14 Real-Time Chat App course.


Tech Stack
Learn Next JS 14 Latest Features like App Router , Server Actions , Middlewares etc.
Implement Clerk Authentication .
Working with SOCKET IO to perform all real-time tasks.
Deploying Next JS App to Vercel and Node App to Render
Working with combination of both client and server components
Using Tailwind CSS in-order to override Ant Design default styling and building custom components
Project
Implement CLERK Authentication for sign-up and sign-in.
Logged in users will be able to see all the list of users who registered in the application
If any user want to chat with other user , they have to add the user to chats list
Users can create one-to-one chat and also group chats.
Users can able to update their profile picture , create groups , edit groups.
Users can see unread messages count in chats-list for every chat.
Integrating socket io in-order to make all the chat functionalities real time.
Once the socket io is integrated , users will be able to send and receive the messages in real-time.
Recipient users can see the typing animation if any user is typing in that chat.
Read Receipts functionality for the messages.
Next.js is an open-source, objective-coded framework for web developers created by Kotlin JS developers. It is used to create server-rendered React applications and can be used with modern JavaScript languages like TypeScript, GraphQL, and React components.
Next.js allows developers to create web applications to a high standard with pre-built features such as routing, file-based routing, webpack dev server, hot module replacement, static exports, and code splitting.
Next.js works well for building static sites and progressive web apps that are SEO-friendly, accessible, and fast.
Who this course is for:
Fullstack Developers
Nextjs Developers


More Info