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