The Codeholic
The Codeholic
  • 263
  • 5 958 979
Build and Deploy Real Time Messenger Clone - Laravel, React, Tailwind.css
🚀 Get VPS Server with as low as $4.49 per month. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀
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.
💻 Project Source Code: bit.ly/3vTvhhi
🔔 Subscribe: bit.ly/2xTQOI0
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.
Time Codes:
------------------------------
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
If you really love my content and want to support the channel:
🛒Check my Website: thecodeholic.com
🌟 Become a Patron: www.patreon.com/thecodeholic
🍺 Buy me Beer: www.buymeacoffee.com/thecodeholic
🖱️Follow me on social media:🖱️
x.com/thecodeholic
thecodeholic
thecodeholic
zhlédnutí: 46 306

Video

Laravel 11 + React SaaS with Stripe Integration
zhlédnutí 26KPřed 4 měsíci
In this video we are going to build fully functional Software as a service project (SaaS) with Laravel 11, React, Tailwind.css and Stripe online payments. Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/zuratc. Use coupon code "ZURATC" for an EXTRA 10% OFF If you want to deploy this project on custom domain, check my videos on deployment: 🎬 czcams.com/video/dpJDV25tptw/video.h...
Laravel 11 + React Full Stack App with Inertia - Project Management App
zhlédnutí 150KPřed 5 měsíci
In this video you're going to learn how to build single page applications with Laravel 11 and React by building this awesome project management website. In my opinion this is the perfect project if you want to learn how to take these two technologies: Laravel 11 and React and learn how to build awesome applications. This is going to be also a perfect project to put in your portfolio. 🎬 czcams.c...
Laravel 11 Tutorial for Beginners - Laravel Crash Course (2024)
zhlédnutí 169KPřed 5 měsíci
This video is the perfect starting point if you want to get started with Laravel 11. In this crash course we will learn the most fundamental topics in Laravel and create basic application with registration and login. 🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/zuratc. Use coupon code "ZURATC" for an EXTRA 10% OFF 🚀 🎬 czcams.com/video/dpJDV25tptw/video.html 🎬 czcams.com/v...
Setup VSCode for Laravel Development
zhlédnutí 24KPřed 6 měsíci
In this video I will teach you how to setup VSCode for Laravel development. I will share my favourite extensions, settings, live snippets, color and icon themes. This is my personal setup and yours might be different. Support me by subscribing - bit.ly/2xTQOI0 👉 My Live Snippets: bit.ly/3OYyHW3 If you really love my content and want to support the channel: 👉 Check my patreon page: bit.ly/49KM7N...
Email Sending on production with Amazon SES - Part 46 | Laravel Social Media Website
zhlédnutí 3,7KPřed 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement sending emails with Amazon SES. 📋 Full List of Features: bit.ly/48is8FG 🎬 The whole playlist: bit.ly/47...
Laravel Hosting with Github Actions - Part 45 | Laravel Social Media Website
zhlédnutí 5KPřed 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will deploy this project on Hostinger's shared hosting with Github actions. You will see the whole deployment steps. 📋...
Implement Dark Mode - Part 44 | Laravel Social Media Website
zhlédnutí 1,7KPřed 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement dark mode with tailwind.css. 📋 Full List of Features: bit.ly/48is8FG 🎬 The whole playlist: bit.ly/47kRH...
Debug and Optimize Number of Queries - Part 43 | Laravel Social Media Website
zhlédnutí 824Před 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will optimize number of database queries made in the application and speedup the entire project. 📋 Full List of Featur...
Pin Posts at the top of the Profile Page - Part 42 | Laravel Social Media Website
zhlédnutí 822Před 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement functionality to pin posts at the top of the group of user profile page. 📋 Full List of Features: bit.l...
Implement URL Preview - Part 41 | Laravel Social Media Website
zhlédnutí 1,3KPřed 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement preview for the URLs. We are going to fetch URL meta tags and show image, title and description. 📋 Full...
Attachment Video Preview - Part 40 | Laravel Social Media Website
zhlédnutí 675Před 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement attachment video preview. 📋 Full List of Features: bit.ly/48is8FG 🎬 The whole playlist: bit.ly/47kRH7B ...
Search for Posts with Hash tags - Part 39 | Laravel Social Media Website
zhlédnutí 516Před 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement highlighting hash tags and implementing search of posts with hashtags. 📋 Full List of Features: bit.ly/...
Global Search for Users, Groups. Posts - Part 38 | Laravel Social Media Website
zhlédnutí 692Před 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will implement global search for users, groups and posts. 📋 Full List of Features: bit.ly/48is8FG 🎬 The whole playlist...
Implement Photos Tab - Part 36 | Laravel Social Media Website
zhlédnutí 654Před 6 měsíci
🚀 Get 3 months of Hosting FOR FREE FREE domain. Check hostinger.com/thecodeholic. Use coupon code "THECODEHOLIC" for an EXTRA 10% OFF 🚀 I have built $7000 Social Media Website in Laravel from Start to Finish and deployed it on custom domain with Github actions. In this video we will display photos in Photos tab in group and user profile pages. 📋 Full List of Features: bit.ly/48is8FG 🎬 The whole...
Generate Post Content with Chat GPT API - Part 37 | Laravel Social Media Website
zhlédnutí 1,1KPřed 6 měsíci
Generate Post Content with Chat GPT API - Part 37 | Laravel Social Media Website
Show Only Relevant Posts on Home Page - Part 35 | Laravel Social Media Website
zhlédnutí 561Před 6 měsíci
Show Only Relevant Posts on Home Page - Part 35 | Laravel Social Media Website
Follow user, Show Posts, followers and followings - Part 34 | Laravel Social Media Website
zhlédnutí 867Před 7 měsíci
Follow user, Show Posts, followers and followings - Part 34 | Laravel Social Media Website
Display About Group Tab on Group's Profile Page - Part 33 | Laravel Social Media Website
zhlédnutí 385Před 7 měsíci
Display About Group Tab on Group's Profile Page - Part 33 | Laravel Social Media Website
Create Dedicated Post Page - Part 32 | Laravel Social Media Website
zhlédnutí 431Před 7 měsíci
Create Dedicated Post Page - Part 32 | Laravel Social Media Website
Send Email Notifications on Various actions - Part 31 | Laravel Social Media Website
zhlédnutí 751Před 7 měsíci
Send Email Notifications on Various actions - Part 31 | Laravel Social Media Website
Remove Users from Groups - Part 30 | Laravel Social Media Website
zhlédnutí 356Před 7 měsíci
Remove Users from Groups - Part 30 | Laravel Social Media Website
Deleting Posts and Comments by Admin Users - Part 29 | Laravel Social Media Website
zhlédnutí 639Před 7 měsíci
Deleting Posts and Comments by Admin Users - Part 29 | Laravel Social Media Website
Create and Load Group Posts - Part 28 | Laravel Social Media Website
zhlédnutí 573Před 7 měsíci
Create and Load Group Posts - Part 28 | Laravel Social Media Website
Change User Role inside Group - Part 27 | Laravel Social Media Website
zhlédnutí 548Před 7 měsíci
Change User Role inside Group - Part 27 | Laravel Social Media Website
Approve/Reject Pending Users from Group - Part 26 | Laravel Social Media Website
zhlédnutí 638Před 7 měsíci
Approve/Reject Pending Users from Group - Part 26 | Laravel Social Media Website
Join to Groups with Auto Approval - Part 25 | Laravel Social Media Website
zhlédnutí 430Před 7 měsíci
Join to Groups with Auto Approval - Part 25 | Laravel Social Media Website
Send and Accept Invitations to join to Group - Part 24 | Laravel Social Media Website
zhlédnutí 906Před 7 měsíci
Send and Accept Invitations to join to Group - Part 24 | Laravel Social Media Website
Group Profile Page - Part 23 | Laravel Social Media Website
zhlédnutí 641Před 7 měsíci
Group Profile Page - Part 23 | Laravel Social Media Website
Render Groups on Home Page - Part 22 | Laravel Social Media Website
zhlédnutí 605Před 7 měsíci
Render Groups on Home Page - Part 22 | Laravel Social Media Website

Komentáře

  • @nikolavemic5216
    @nikolavemic5216 Před 55 minutami

    This is mindblowing tutorial...thanks so much!!

  • @eslamelbadry6383
    @eslamelbadry6383 Před 6 hodinami

    need help when make private channel and try to send message from mobile app flutter get this in reverb debug without data like this : { "event": "pusher:subscribe", "data": { "channel": "chat.2", "auth": "ed5zsi5ebpdmawcqbwva:9e87ca525bdfc96735423e9295272af8c456e4914814a2c8bfdb98feae6f8006" } } but i use broadcase with data but data not retuned

  • @dfordemo981
    @dfordemo981 Před 9 hodinami

    awesome and great and coooooolll and making developers job and business ready $$$$$$$$$$$$$$$

  • @musvc
    @musvc Před 20 hodinami

    your tutorial is very fast and i find my self lost after watching it.... i'm comming from a desktop dev. envoroment by the way.

  • @mehdi_abik
    @mehdi_abik Před 22 hodinami

    best tutorials in yt ❤❤tnks❤

  • @gessegoncalves6493

    Greate

  • @emirano
    @emirano Před dnem

    I really appreciate the great work and efforts you put on this but thus isn't a beginner's tutorial. You will just type and say do this do that and i am just sitting watching completely dumb founded

    • @TheCodeholic
      @TheCodeholic Před dnem

      Thanks for the feedback, but let me ask. How good are you in PHP? Do you know OOP well? How many minutes did you watch? Which part exactly did you get lost?

    • @emirano
      @emirano Před dnem

      ​@@TheCodeholicI can't say am an export but I did a few projects with php so I'll say advanced. Now it's really that am lost though, but you tend to not really give a explanation as to what it is the function or code you wrote is to do. So please I know you helping the community but please it's beginners so I don't have an prior knowledge of laravel or any functions in it.

    • @TheCodeholic
      @TheCodeholic Před dnem

      @emirano I agree. I tried to make this beginner friendly. I am actually working on 25 hours Laravel for beginners course. Where I think I explain everything in detail, but I want to get better. So if you link me a timestamp where I just write and did not explain it I will be very helpful. And again I appreciate feedback. Thanks for letting me know

  • @zughbor
    @zughbor Před dnem

    Hi, I just wanna add something about security or Let's wonder why in first place you don't even get close to that topic we are talking about PHP so Backend ....

  • @penguinman9837
    @penguinman9837 Před dnem

    Note! If you in the 'Define Views' chapter and you go to copy the code from the repository, make sure you do NOT accidentally copy the tag <x-app-layout> but leave it at <x-layout> or you will get an error.

  • @youssefjellal6617
    @youssefjellal6617 Před dnem

    how can i have access to server logs , i have a probleme that the server may be go down when i try to start the application and thanx for your response

  • @penguinman9837
    @penguinman9837 Před dnem

    Hmm. php artisan make:view => make.view is not defined. I must have missed something in the configuration? I'm using Laravel 11, not 10.

    • @penguinman9837
      @penguinman9837 Před dnem

      I'll just manually create the file for now, but do let me know what I got wrong.

  • @wtfdoiputhere
    @wtfdoiputhere Před 2 dny

    this look like so much fun to play around with on my next project

  • @user-eq9zo5vj7c
    @user-eq9zo5vj7c Před 2 dny

    This video made me realize I can never be a good developer.

    • @TheCodeholic
      @TheCodeholic Před 2 dny

      I just remembered the question I was asking to myself in 2012 when I started my internship. I was looking at the boss/mentor's screen how fast and greatly he was doing: coding, researching, writing sql queries... And I was blown away. "Will I ever be close to as good as he is?"

  • @Jack1Martin-w6l
    @Jack1Martin-w6l Před 3 dny

    Gonzalez Linda Martin Daniel Lopez Shirley

  • @adeyinkaforex1437
    @adeyinkaforex1437 Před 3 dny

    You really done a very great job here bro... thanks for sharing this with us

  • @rja1011
    @rja1011 Před 3 dny

    Awesome project!!!

  •  Před 3 dny

    Context : 3:39:13 Deleting only works well for projects that have no tasks. If we try to drag a project with assigned tasks, we will get a constraint error (because we set this when we wrote the migrations) Here's how I avoided it: Actually, I just warn the user that they can't delete a project as long as it has tasks public function destroy(Project $project) { $name = $project->name; if($project->tasks()->count() > 0) { return to_route("project.index")->with('warning', "Project $name cannot be deleted because it has `{$project->tasks()->count()}` tasks."); } $project->delete(); if($project->image_path) { Storage::disk('public')->deleteDirectory(dirname($project->image_path)); } return to_route('project.index')->with('success', "Project $name was deleted successfully."); } And, i used react toastify to display session messages export default function Index({ auth, projects, queryParams = null, flash }) { queryParams = queryParams || {}; useEffect(() => { if (flash.success) { toast.success(flash.success); } if (flash.warning) { toast.warning(flash.warning); } }, [flash]); };

  • @acuteclub7381
    @acuteclub7381 Před 3 dny

    Awesome tutorial! very well explained. thx

  • @hirenpandya5086
    @hirenpandya5086 Před 4 dny

    (●'◡'●)

  • @YoTurkish
    @YoTurkish Před 5 dny

    I am having issue when i try to migrate database and its saying error: 1 table users has no column named available credits

  • @martonteker1799
    @martonteker1799 Před 5 dny

    Very good crash course, really brought me up to speed with Laravel 11 and Inertia!

  • @dym_sh
    @dym_sh Před 5 dny

    hey, just letting you know, im following this tutorial after the laravel-11 video, and i love it!

  • @mashapoguajay3322
    @mashapoguajay3322 Před 6 dny

    Im getting error i left it

  • @RamakrishnaPR
    @RamakrishnaPR Před 6 dny

    Thank you for time and effort

  • @coffeeandtalk
    @coffeeandtalk Před 6 dny

    your method does not teach anything as you should save and show result little by little so we see the puzzle getting put together slowly, overall there's alot to learn here which is good but you shiuld slow down and show results little by littke

  • @RamakrishnaPR
    @RamakrishnaPR Před 9 dny

    thank you for sharing

  • @devvvolf
    @devvvolf Před 9 dny

    0:40 I changed windows for a moment and got scared by Olaf's voice. wth😂😂😂😂

  • @devvvolf
    @devvvolf Před 9 dny

    I was able to complete the course without any problems. I am very grateful to you, Mr. Zura. You are undoubtedly an excellent teacher. An incredible course. I learned a lot. Thank you for everything.

  • @syrianmadridista5683

    1:09:30 please what is the tool that you are using here?

  • @abakabwjwvwnwb
    @abakabwjwvwnwb Před 10 dny

    how can i deploy this using some free hosting services? Do you have a guide??

    • @TheCodeholic
      @TheCodeholic Před 10 dny

      Not on free hosting. FYI: You can't assign domain on free hosting.

  • @unfoldingdawn
    @unfoldingdawn Před 10 dny

    Thank you my friend :) I just finished building my first Laravel project following your tutorial! Your teaching style was perfect for me. Thank you!

  • @MirwaliAbdali
    @MirwaliAbdali Před 10 dny

    Your teaching methods are not so good. Why don't you explain the tutorials correctly your communication also not good in your laravel pluse react app course you were just passing the lessons and not doing so well teaching.

    • @TheCodeholic
      @TheCodeholic Před 10 dny

      Thanks for you feedback. I see your point. There are two types of tutorials I generally make. 1. When I am very well prepared. I have project built beforehand and to save some time I use that copy & paste technique for that, which actually saves a lot of time in terms of final tutorial length. If I did not do that copy & paste It would not be possible to complete that tutorial in 12 hours. And CZcams does not allow to upload 20 hours long videos. In that case I had to split the tutorial into multipls parts which is something I did not want. For me as a content creator that does not bring views and that only discouridges me, because In the past I created such playlist and some of the videos have less that 1000 views. 2. Second type of tutorials I make are when I am not well prepared. I take the project and I complete it during the video.In which case I browse docs as well and I don't copy and paste because I don't have code prepared. In that case I should choose simpler projects. Just stay subscribed because I plan to do both types of projects. Also if you are absolute new to Laravel this particular project is not for you. First you should learn the basics of Laravel and React. Next time I will try to make very clear intros for videos. Thanks for the feedback

    • @immanuelnganga3920
      @immanuelnganga3920 Před 8 dny

      @@TheCodeholic I think you are doing a good job. Nobody said it'll be easy. Bro your tutorials gave me a job. I think you shouldnt listen to the nay sayers and focus on the small positive change you are making to the world. I think you should even do playlist of longer projects because it really helps people like me alot to grasp alot of content. also do a video of stripe implementation thank you so much

    • @TheCodeholic
      @TheCodeholic Před 8 dny

      Thank you for your words. I do have a video about Stripe integration

  • @ramazanaktas748
    @ramazanaktas748 Před 11 dny

    So you wasted other people's time for a non-existing job?

    • @TheCodeholic
      @TheCodeholic Před 11 dny

      And I paid them for their spent hours for giving me estimate

  • @juniordev4190
    @juniordev4190 Před 12 dny

    I prefer laragon over xampp. Laragon is easier, provides easy to add project, self signed SSL certificates and pretty URL.

  • @VFFAME
    @VFFAME Před 12 dny

    Is this on shared hosting ?

  • @modiddymo
    @modiddymo Před 12 dny

    Awesome tutorial! I'm writing an article about Laravel and this is helping me get up to speed quickly. Thank you :)

  • @safiarashidaraya7955
    @safiarashidaraya7955 Před 12 dny

    Is there any way to use otp verification instead of using a link?

  • @sayandas120294
    @sayandas120294 Před 12 dny

    Just because unlike other CZcamsrs, you asked humbly. Also your content is amazing’ subscribed!!!