watch on aatventure.news

The Codeholic | Laravel 11 and React Messenger Clone

In this massive tutorial we will learn how to build fully functional real time messaging application with Laravel 11 and React. As a choice of web socket server we will use Laravel Reverb.

2024-04-23 18:00:00 - Laravel

Project Features

-----------------------------------------------------

- Sending and receiving messages in real time

- Sending emojis

- Send markdown messages

- Deleting your own sent messages

- Load older messages with infinite scroll loading

- Sending all types of files

- Dedicated button to quickly shared images

- Dedicated button to record and send audio files

- Preview on small screen and on full screen of images, videos, audio and PDFs

- Ability to add new users

- Block and Unblock users

- Give and remove admin permissions to users.

- Create Groups and add users

- Edit or delete groups. This will start a background job, so that if the group is large and needs several minutes to be deleted,

  it will be deleted in background and will notify users using web sockets.

- Update your own profile details: Name, email, password or profile picture

- Fully responsive UI working on very small devices.


https://buymeacoffee.com/thecodeholic/e/247009


00:00:00 - Demo

00:03:18 - Introduction

00:06:10 - Choosing Hosting Provider

00:09:36 - Project Setup

00:15:39 - Install Necessary Packages

00:20:58 - Explain Broadcasting and Reverb

00:30:29 - Explain Database Schema

00:33:47 - Generate Models and Migrations

00:38:56 - Generate Model fillable and relations

00:43:08 - Generate Factories

00:50:50 - Generate Seed Data

01:03:16 - Create ChatLayout and Render Conversations

02:45:15 - Render Messages

03:39:59 - Render Message Input Component

03:54:10 - Sending and Receiving messages

04:17:20 - Create Event Bus

04:33:13 - Load Older Messages on Scroll

05:13:50 - Style Markdown Messages

05:22:47 - Implement Sending Emojis

05:36:03 - Sending and Downloading Attachments

06:31:30 - Record and Send Audio

06:45:25 - Implement Toast Notifications

07:02:34 - Deleting Messages

07:40:55 - Group CRUD

09:13:59 - Update Profile Picture

09:32:06 - Add New Users

09:54:46 - Implement Block/Unblock, Make Admin

10:07:57 - Sending Emails

10:39:56 - Deploy Project on VPS

11:33:00 - Assign Custom Domain

11:42:30 - Setup Github Actions

11:56:34 - Conclusion

More Posts