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

سرفصل های دوره

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

1. Introduction

1. Next App Setup

2. Project Folder Structure

2. Ant-D Setup

1. Ant-D Installation

2. Overriding Ant-D Components

3. Clerk Authentication

1. Why Clerk

2. Clerk Intro

3. Auth Components

4. Custom Sign-in and Sign-up Pages

5. Sign-in and Sign-up Functionalities

6. Current User

7. Auth Middlewares

8. Styling of Signin and Signup Pages

4. Mongo Setup

1. Mongo Connection

2. User Model

3. Save Current User

5. Layout

1. Layout Structure

2. Layout Styling

3. Current User Info

4. Conditional Layout

6. State Management Setup

1. Setup Redux Toolkit

2. Save Current User In Redux

7. Updating Profile Picture

1. Integrate Firebase

2. Upload Profile Picture UI

3. Upload Profile Picture Logic

8. Chat App Architecture

1. Architecture Discussion

2. Models

3. Interfaces

9. Chat Layout and Creating Chat

1. Chat Layout

2. Chat List Header

3. Create Chat UI

4. Create Chat Server Action

5. Create Chat Conditions

6. Showing Chatlist

7. Selecting Chat

10. Chat Area

1. Recipient Card

2. New Message UI

3. Send Message

4. Show Messages

5. Date Time Format

11. Chat Card Update

1. Update Chat Based On Last Message

2. Messages Scroll Issue Fix

3. Update Unread Messages

4. Clear Unread Messages

12. Groups

1. Groups Folder Strucure

2. Create Group UI

3. Save Group

4. Recipient or Group Info

5. Edit group -1

6. Edit Group - 2

13. Bugs and Loading Issues

1. Chat List Bug Fix

2. Loading Issues

14. Node and Socket Setup

1. Socket IO Architecture

2. Node Setup

3. Socket Setup (Server Side)

4. Socket Setup (Client Side)

5. Socket Client Server Communation

6. Logout Functionality

7. Showing Online Users

15. Implement Sockets For Messages

1. Sending Real Time Message - 1

2. Sending Real Time Message - 2

3. Dynamic Scroller For Messages

16. Implement Sockets For Chat List

1. Update Chat Based On New Message - 1

2. Update Chat Based On New Message - 2

17. Typing Animation & Clear Unread Counts

1. Typing Animation - 1

2. Typing Animation - 2

3. Clearing unread counts

4. Chatslist Sort Bug Fix

18. Additional Features

1. Groups Users Typing Animation

2. Sending Emoji Part - 1

3. Sending Emoji - Part 2

4. Sending Image Part - 1

5. Sending Image Part - 2

19. Read Receipts

1. Implement Read Receipts - Part 1

2. Implement Read Receipts - Part 2

20. Deployment

1. Deploy Node App

2. Deploy Next JS App

3. Bug Fix After Deployment

139,000 تومان

افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy