Real time forum app

How to make a real-time chat system using laravel, vuejs, and pusher. Let us start with very basic and move to advanced feature for making a chat group where a user can send a message and other user receives the message in real time. One more feature is implemented in this course is the notification to join and leave for any user in the group
9.79 Hours 103 tutorials expert
1

What this course is all about and what technologies we are going to use in this course.

7.52 Minutes
2

Install laravel to get started.

3.33 Minutes
3

If you want to have course source code, check this video for where I put project repository on github.

6.28 Minutes
4

Create models for various tables we . will use in this project

7.93 Minutes
5

Create migrations for questions table

1.80 Minutes
6

Create migration for reply table

2.00 Minutes
7

Create likes table and category table migration

2.95 Minutes
8

Now create a mysql database and run migration to have all table on our database

1.75 Minutes
9

Set up eloquent relationship for questions

2.23 Minutes
10

Setup relationship between reply and user

2.62 Minutes
11

setup question factory for creating dummy questions

2.83 Minutes
12

Create factories for other models

2.18 Minutes
13

create database seeding to start working with test data

6.45 Minutes
14

Routes for questions for CRUD operation on it

3.50 Minutes
15

Get all question we ahve on our database

1.97 Minutes
16

Connect your route with model key name to fetch model data on the fly

3.13 Minutes
17

Delete part of CRUD operation on Questions

2.70 Minutes
18

Create part of CRUD operation on Question

8.52 Minutes
19

Create a resource for question to transform the data giving to api

9.02 Minutes
20

Update part of CRUD operation on Question

4.63 Minutes
21

Store part of CRUD operation on Category

4.13 Minutes
22

Read and Delete part of CRUD operation on Category

5.55 Minutes
23

Update part of CRUD operation on Category

5.60 Minutes
24

Showing all the replies for a given question

8.03 Minutes
25

Store and Delete of Reply - CRUD operation

5.65 Minutes
26

Transform data to be given for Category and Reply

6.48 Minutes
27

Update part of CRUD operation on Reply Model

3.20 Minutes
28

Create a system to like or Unlike anything on the project

8.43 Minutes
29

Using JsonWebToken for authentication or login system.

5.40 Minutes
30

Seting up JWT on Laravel and create its AuthController

4.95 Minutes
31

Checking that JWT is valid or not for a given user

5.43 Minutes
32

Using JWT to identify user and register them on our database

4.92 Minutes
33

Create a middleware to check for jwt and authentication of user

6.68 Minutes
34

Lets handle some exception if thrown by laravel

7.32 Minutes
35

Using Vuetify - a material frontend for vuejs components.

8.78 Minutes
36

Create your first component to start with

3.55 Minutes
37

Footer and toolbar using vuetify component.

4.20 Minutes
38

Lets use Vue Router to make our app, a single page application

4.40 Minutes
39

Create a login component so make user login on our project

7.38 Minutes
40

Continue on creating login component

6.03 Minutes
41

Getting JWT token on successfull login and store it safely

5.17 Minutes
42

Create a helper class in javascript called 'user class' to check for user login or not

4.52 Minutes
43

Another helper class to manage localstorage of browser

5.38 Minutes
44

Checking if token is valid, if token is generated from api or not.

9.53 Minutes
45

Storing token and username on LocalStorage, so that everytime we can fetch user details from localstorage

4.53 Minutes
46

Create Login and Logout helper class to manage both

7.50 Minutes
47

Now lets work on signup component

6.80 Minutes
48

Lets handle any validation error from laravel while user trying to register on our app

7.10 Minutes
49

We need to login the user who has just registered.

5.32 Minutes
50

Redirect user when he has successfully logged in to our app

3.73 Minutes
51

Login information for authenticated user

6.65 Minutes
52

Logout Authenticated User

6.43 Minutes
53

Let's create forum component for forum

4.65 Minutes
54

Getting all the questions from Laravel

7.08 Minutes
55

Fetch that question only which user is clicked

6.92 Minutes
56

Display that question with proper styling

5.73 Minutes
57

Lets now store a new question.

8.32 Minutes
58

Add a markdown editor to create question

6.62 Minutes
59

JWT token has to be passed for every request.

3.53 Minutes
60

We need to create a url friendly slug for question

3.40 Minutes
61

We need a markdown parser to parse question which is stored in markdown syntax to our database

6.20 Minutes
62

Check whether the question is created by logged In user or not

6.27 Minutes
63

Very important that the question owner can only delete that question

2.95 Minutes
64

User has the ability to update his question.

8.52 Minutes
65

Update the question at laravel end

8.42 Minutes
66

Fetch the category lists

5.92 Minutes
67

Lets now store new category to our database

5.43 Minutes
68

Let's show all categories to the user

5.57 Minutes
69

Remove category from the database

3.98 Minutes
70

Lets now update category to our database

7.00 Minutes
71

Categories can only be accessed by admin user

2.30 Minutes
72

Every question has many replies, so let's fetch all

3.13 Minutes
73

Properly show all the replies under the question

7.20 Minutes
74

Reply can be edited or deleted by reply owner

4.72 Minutes
75

creating a reply for a specific question

14.02 Minutes
76

Remove reply from the database

6.25 Minutes
77

Give the ability to update reply

8.10 Minutes
78

Continue on updating reply

5.10 Minutes
79

Start working on like and unlike system

4.87 Minutes
80

Let's create a system to like a reply

5.62 Minutes
81

Store like information to our database using laravel

4.35 Minutes
82

Let's work on the notification system for the user

3.05 Minutes
83

Let's send the notification to the connected user

4.93 Minutes
84

Show notification with an icon to the user

8.52 Minutes
85

Mark notification as read

14.27 Minutes
86

Start to work on a real-time system using the pusher. Later we will use laravel WebSocket which provide free real-time system

4.90 Minutes
87

Whenever someone like any reply, this must reflect every user who is online in real-time

7.85 Minutes
88

Increment like numbers in real time

3.80 Minutes
89

Broadcasting notification for the real time system

5.58 Minutes
90

Send JWT token to pusher for authentication on real time system

4.93 Minutes
91

Create facebook type notification which notifies in real time.

8.70 Minutes
92

Checking if the token is expired or not and then log out the user if the token is expired.

7.97 Minutes
93

What if the user has created a random string in local storage.

9.45 Minutes
94

Now handle invalid token passed

3.13 Minutes
95

If the user is not logged in the there is no sense of showing new reply button to them

4.58 Minutes
96

Let's show reply count on own forum for each question.

6.00 Minutes
97

Make Home page look good by adding an image with the parallex system

6.03 Minutes
98

Validate data for questions and category store part by using laravel form request

8.17 Minutes
99

If data passed is not correct then we need to show validation error on the user end

6.23 Minutes
100

Play sound whenever a new notification is triggered

6.53 Minutes
101

Pusher is a paid service but laravel websocket package is free to use. So now let's convert our application into laravel websocket package from the pusher

3.87 Minutes
102

Setting up laravel webocket package

7.55 Minutes
103

Finalizing laravel WebSocket package

7.10 Minutes