Course Information
Course Overview
Build real time chat application using Next JS , Socket IO , Clerk , Firebase
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.
Course Content
- 10 section(s)
- 77 lecture(s)
- Section 1 Introduction
- Section 2 Ant-D Setup
- Section 3 Clerk Authentication
- Section 4 Mongo Setup
- Section 5 Layout
- Section 6 State Management Setup
- Section 7 Updating Profile Picture
- Section 8 Chat App Architecture
- Section 9 Chat Layout and Creating Chat
- Section 10 Chat Area
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.
Reviews
-
DDavid Pardo
The fullstack chat web application was a lot of fun, I have learned a lot of things like: nextjs server actions, react server components and a lot of different libraries to manage users (like clerk) and to reploy backend web services (like render), plus building a web socket using socket.io. The course could be easily improved by the edition: a lot of video content is the author debugging on bugs caused by the code quality (which could really be better), and silence thinking about how to fix the issues. Another remark was that Firebase Storage now charges for its usage, however by the time the video was made, it was free. I then used Cloudinary instead, but a less experienced developer could get easily frustrated and drop the course.
-
PPK B
Bad usage of typescript. The instructor says the word "okay" every 5 seconds. It gives me headaches.
-
SSʜᴜvᴀᴅᴇᴇᴩ Mᴀɴᴅᴀʟ
great
-
KKevin Norton
First chat course I've done and really enjoying it. Great content A++