Realtime Chat with Laravel-Livewire: Tall App from Scratch

Focused View

Namu Makwembo

2:59:44

123 View

1. Introduction

1. Create new Laravel application.mp4

02:25

2. Install Breeze.mp4

02:27

3.1 Github Repository.html

3. Install Livewire.mp4

01:31

2. ChatList Component Design

1.1 Github Repository.html

1.2 index.blade.zip

1.3 web.zip

1. Create Index.mp4

05:14

2.1 avatar.blade.zip

2. Create x-avatar component.mp4

01:11

3. Chat list header.mp4

05:21

4.1 chat-list.blade.zip

4. Chatlist Item.mp4

12:29

3. ChatBox Component Design

1.1 chat-box.blade.zip

1. Chat.Chat.mp4

02:19

2. ChatBox.mp4

01:56

3. Chatbox Header.mp4

02:26

4. Chatbox messages.mp4

07:39

5.1 chat-box.blade.zip

5. Chatbox Footer.mp4

04:20

4. Create Models and Migrations

1.1 2023 06 03 073254 create conversations table.zip

1. Conversation table.mp4

01:46

2.1 2023 06 03 073305 create messages table.zip

2. Messages Table.mp4

01:43

5. Design Relationships, scopes and methods

1.1 conversation.zip

1. Conversation Relationship.mp4

01:00

2.1 message.zip

2. Message Relationship.mp4

01:19

3.1 user.zip

3. User Relationship.mp4

01:08

6. Create userlist and conversation

1.1 users.blade.zip

1.2 users.zip

1.3 web.zip

1. Create Users list.mp4

08:04

2. Create Conversation.mp4

06:28

7. Get conversation from query parameter

1. Load SelectedConversation in Main Chat.mp4

02:29

8. Get All Conversations

1.1 chat-list.blade.zip

1.2 chatlist.zip

1. Load All Conversations.mp4

06:41

2. Scroll to SelectedChat.mp4

04:19

9. Sending message & Load Messages

1. Make Selected Conversation nullable & Get Receiver.mp4

01:05

2. Send and save message to database.mp4

04:40

3. Load messages.mp4

03:47

4. Message read Status.mp4

01:25

5. Push message to Chatbox.mp4

01:25

6. Show Message time.mp4

02:20

7.1 chat-box.blade.zip

7.2 chatbox.zip

7. Scroll Chat to bottom.mp4

03:15

8. Hide Avatar of Auth Message.mp4

04:18

9. Update conversation updated at when new message sent.mp4

01:03

10.1 chat-box.blade.zip

10.2 chatbox.zip

10. Emit event to Chatlist.mp4

01:11

10. Mark Messages As Read

1.1 chat.zip

1. Mark Messages in Main Chat.mp4

01:34

11. Refresh Chatlist ,Get Unread Messages Count

1. Listen to emitted event in Chatlist.mp4

01:32

2. Get Unread messages count.mp4

02:47

3.1 chat-list.blade.zip

3.2 chatlist.zip

3.3 conversation.zip

3. Chatlist Message Read Status.mp4

03:50

12. Load More Messages

1. Load more messages.mp4

04:33

2.1 chat-box.blade.zip

2.2 chatbox.zip

2. Update Chat Scroll Position.mp4

03:02

13. Broadcasting

1. Install Pusher SDK & Laravel Echo.mp4

06:34

2.1 chatbox.zip

2.2 messagesent.zip

2. MessageSent Notification.mp4

05:51

3.1 chatbox.zip

3. Listen MessageSent Notification.mp4

06:57

4. Add Queued Jobs.mp4

03:46

5.1 chat-box.blade.zip

5.2 chat-list.blade.zip

5.3 chatbox.zip

5.4 messageread.zip

5. MessageRead Notification.mp4

07:16

6. Mark message AsRead using Alpine.js in Chatbox.mp4

02:55

7. Update Chatlist After message is broadcasted.mp4

01:57

14. Deleting Conversations

1.1 2023 06 04 084141 create messages table.zip

1.2 chat-list.blade.zip

1.3 chatlist.zip

1. Delete Conversation By User Method.mp4

10:03

2.1 conversation.zip

2.2 user.zip

2. Filter Deleted Conversations.mp4

04:21

3.1 chatbox.zip

3.2 Github Repository.html

3. Filter Deleted Messages.mp4

04:02

Description

Master real-time chat apps with Laravel, Livewire, Tailwind, and Alpine.js for seamless interactivity

What You'll Learn?

Gain a comprehensive understanding of Laravel, Livewire, and the TALL-Stack and their role in building modern web applications.
You will Learn the principles of real-time communication using WebSockets and how to integrate them into a Laravel application.
You will Master the use of Livewire components to create interactive and dynamic user interfaces.
You will Learn how to make your frontend and backend communicate and share information, enabling the creation of a powerful chat system.
Build a fully functional chat application with features like real-time updates, message history, message read updates, deleting conversations and messages, and
Together we'll Explore advanced topics such as broadcasting notifications, multi-level queries, and securing the chat application.
We'll Leverage the power of Tailwind CSS and Alpine. js to create visually appealing and responsive user interfaces.
Learn and apply best practices for code organization and maintainability within the Laravel Livewire ecosystem.
By the end of this course you will gain the confidence to create your own real-time chat applications using Laravel, Livewire, and the TALL-Stack.

Who is this for?

Beginner Developers: If you have a basic understanding of web development concepts and want to expand your knowledge by diving into real-time chat application development, this course is a perfect fit for you. It provides a comprehensive introduction to Laravel, Livewire, and the TALL-Stack, allowing you to build practical chat applications from scratch.

Intermediate Developers: If you already have experience with PHP and Laravel, and want to learn how to leverage these technologies to create dynamic and interactive chat applications, this course will provide you with advanced techniques and best practices. You will explore real-time communication using WebSockets, enhance user interfaces with Livewire components, and implement advanced features like notifications and multi-level queries.

Web Development Enthusiasts: If you are passionate about web development and enjoy exploring new frameworks and technologies, this course offers an opportunity to expand your skill set. By mastering Laravel, Livewire, and the TALL-Stack, you will gain valuable knowledge that can be applied to a wide range of web development projects.

What You Need to Know?

Basic understanding of web development concepts

Familiarity with HTML and CSS

Basic knowledge of PHP and Laravel

You will need a computer or laptop with internet access

Code editor (e.g., Visual Studio Code, Sublime Text)

you will need to a modern web browser (e.g., Google Chrome, Mozilla Firefox) installed on your computer

Make sure PHP and Composer is already installed on your computer - you need to have at least php 8x and composer 2.x.x in order for us seamlessly install Lavavel and dependency packages

More details

Description
Take your development skills to the next level and master the art of building real-time chat applications with the cutting-edge technologies of Laravel, Livewire, and the powerful TALL-Stack (Tailwind CSS, Alpine.js, Laravel, and Livewire). Join me on a transformative journey that empowers you to create dynamic and interactive chat systems.

By enrolling in this course, you will gain the knowledge and expertise to harness the true potential of Laravel and Livewire, combining their strengths to create a robust, efficient, and interactive chat application. Laravel, renowned as one of the most popular PHP frameworks, provides a solid foundation for your project, while Livewire brings simplicity and interactivity to the forefront.

But it doesn't stop there. With the inclusion of Tailwind CSS, you will have the tools to design captivating and user-friendly interfaces that will leave a lasting impression on your users. Tailwind CSS offers a utility-first approach, enabling you to effortlessly style your chat application and ensure it is responsive across different devices and screen sizes.

Throughout the course, we provide comprehensive lesson files and resources, ensuring a seamless learning experience. You can easily follow along with the provided files, allowing you to watch the videos at your own pace. Additionally, all the code from the course is available on our GitHub resource link, providing you with access to the full codebase for future reference and exploration.

Now is the time to embark on this exhilarating journey of building an amazing and responsive real-time chat application. Don't miss out on this opportunity to enhance your development skills and create an application that will impress both clients and users alike. Join us today and let's unlock the potential of Laravel, Livewire, and the TALL-Stack together.
Who this course is for:
Beginner Developers: If you have a basic understanding of web development concepts and want to expand your knowledge by diving into real-time chat application development, this course is a perfect fit for you. It provides a comprehensive introduction to Laravel, Livewire, and the TALL-Stack, allowing you to build practical chat applications from scratch.
Intermediate Developers: If you already have experience with PHP and Laravel, and want to learn how to leverage these technologies to create dynamic and interactive chat applications, this course will provide you with advanced techniques and best practices. You will explore real-time communication using WebSockets, enhance user interfaces with Livewire components, and implement advanced features like notifications and multi-level queries.
Web Development Enthusiasts: If you are passionate about web development and enjoy exploring new frameworks and technologies, this course offers an opportunity to expand your skill set. By mastering Laravel, Livewire, and the TALL-Stack, you will gain valuable knowledge that can be applied to a wide range of web development projects.

User Reviews

Rating

average 0

Total votes0

Focused display

PHP

Laravel

Namu Makwembo

Instructor's Courses

I am a dedicated software engineering student and instructor based in Turkey. With a strong background in PHP, Laravel, CSS, HTML, and JavaScript, I have accumulated 5 years of valuable experience in the field. Ever since I wrote my first code in C++, programming has been an inseparable part of my life. As I continue to learn and grow, I find great joy in sharing the various programming tricks and skills I've acquired with fellow programmers in my community.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.