Realtime Pizza Order Tracker - Laravel, Vue & Pusher

A look at how to build a realtime application using Laravel, VueJS and Pusher. We re-create the functionality of the Domino's Pizza order status tracker. We make use of Laravel Echo, which makes the communication between Pusher and our front end very easy.
GitHub repo (Upgraded to Laravel 5.8): github.com/dre...
LINKS
My courses: codewithdre.com
Sign up for my newsletter: andremadarang.c...
My website: andremadarang.com
Twitter: / drehimself
GitHub: github.com/dreh...
CodePen: codepen.io/dreh...

[@omarmaya1263]

I've watched this video multiple times lol, finally got my chat app working with Pusher

[@RakhaViantoniPrastya]

OMG you're AMAZING BRO! Great tutorial!

[@drehimself]

Thanks for watching!

[@guillermocelestino1131]

Wow i just break through from beginner to intermediate in laravel haha, thanks a lot bro. I learn so much on your videos and its been added to my arsenal:)

[@drehimself]

Thank you for the nice comments!

[@brunoluan2149]

Thank you, Andre! This video is very useful for me and many other people!

[@drehimself]

Thanks for watching!

[@codewithsub5083]

Really great video.
Clear all my doubts related to laravel pusher
Thanks. 😃

[@drehimself]

No problem! Thanks for watching.

[@camilogonzalez9137]

Thank you but i am stuck getting this error when i try to browse laravel-realtime-example.dev/fire
"Too few arguments to function App\Events\OrderStatusChanged::__construct(), 0 passed in C:\laragon\www\app
outes\web.php on line 10 and exactly 1 expected"

[@camilogonzalez9137]

PLEASE ANY HELP WILL BE APRECIATE

[@camilogonzalez9137]

auto solved xD

[@agustinminnig7451]

Hola! Como lo resolviste?

[@heyyy4987]

Would like to know about that. Do it more! Tutorial series will be boom.😀😀😀

[@drehimself]

Thanks for watching!

[@electrodecathode]

Thank you for creating this video!

[@drehimself]

Thanks for watching!

[@ayahayder677]

thank you, my progressbar doesn't change type nor gets animated.. any ideas?

[@tommybaloukas5131]

Great tutorial!! Thanks

[@drehimself]

Thanks for watching!

[@andrewhansenn8100]

Hi mr andre are you still active i need your help regarding to the orderprogress when i tried to console log the order and fired up it doesnt show up in the client side i wonder whats wrong but when i firedup the object in app.js it will show realtime

[@luiseperez2751]

Migration table created successfully.
[Illuminate\Database\QueryException]
SQLSTATE[HY000]: General error: 1215 Cannot add foreign key constraint (SQL: alter table `orders` add constraint `o
rders_status_id_foreign` foreign key (`status_id`) references `statuses` (`id`) on delete cascade)
[PDOException]
SQLSTATE[HY000]: General error: 1215 Cannot add foreign key constraint ?

[@adiyadav7501]

same project how I can implement in nodejs

[@arjaykurtdelarosa6286]

Sir i had an error, it seems that Echo is not recognized. I installed everything. “Echo is not defined” in vue mount

[@drehimself]

Make sure you uncomment the Echo code in bootstrap.js

[@alexyap4686]

Are you part Filipino? I had a classmate in college whose last name was Madarang too. BTW great tutorial.

[@drehimself]

I'm full Filipino! It's a common last name in the Philippines. Thanks for watching!

[@saurabhjain2161]

One question, I want to search all people around me using my app, like Uber or any dating app does, how it is possible without Laravel?

[@r3n736]

You need a geospatial data search.

[@kleidjjf954]

Nice tutorial friend

[@drehimself]

Thanks for watching!

[@Rs3Audi]

great. thumb up for the effort.

[@drehimself]

Thanks for watching!

[@j4878]

awesomeeeeee!

[@choroguarda]

oe un wn te robo el video manito :c gracias por enseñar

[@unknownthree7178]

sir why it can't listen please help particular to this line "Echo.channel('notify-tracker.' + this. id)". I doubt "this.id" is undefined please help

[@asifanamkhan2463]

Would you make you a tutorial without pushar like socket.io with laravel and vue.

[@julianmunoz2722]

Parce muchas gracias.... esta genial la funcionalidad y ese GIF jajajaja

[@drehimself]

¡Gracias por ver!

[@atefrihane]

I see " fired" on the screen but the even won't be fired in pusher ://

[@yazeedalsultan8859]

Currently Im having the same issue.
Did you solve the issue yet Atef?

[@xunit00]

sup mate, i have a problem, the progress bar didnt change on realtime, but i get notifications, u know how to solve that (sry for the bad english) and the "timeago" didnt show, just "NaN years ago"

[@josuebarros-desenvolvedorw2490]

Why aren't you creating this blazing awesomely tutorials in 2021??? :(

[@elinardosilva3812]

Thanks André for your vídeo. Your channel is favorite for me. But if i'd like to implant ACL with @can in templete of vue for hidden a botton for ex? How can do this please?( sorry for my english. I'm from brazil, but i love this channel)

[@drehimself]

Not sure, sorry. I'd look into some ACL packages for Vue.

[@mrlaughingvines1506]

I want to learn laravel by you

[@javidsalihe]

Thanks, but is the previous lecture available ?

[@mlabdev]

awesome ... thanks

[@AIgencify]

hey how are you? do you have db?

[@FajarBekasiEdittingLineArt]

hello
can you help me
i get the error
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[@drehimself]

Hmm, the error message is pretty clear. Make sure you have a valid OrderProgress component. Check the GitHub repo for code.

[@FajarBekasiEdittingLineArt]

what is the difference with your github repo
I've seen in your repo and all the same as in the video then how do you explain the error I get after following your tutorial

[@alanyukeroo]

need tutorial series :D

[@ricardochitagu6280]

im getting "No application encryption key has been specified." when i try to run the app

[@drehimself]

Try php artisan key:generate. Full instructions on GitHub readme.

[@jakemontgomery9324]

For some reason the Vue component keeps getting 'stuck', like it won't update on the page when I refresh after I a status. I've already tried clearing the cache and views from storage. I've also tried composer dump-autoload. Nothing works consistently. Help!

[@drehimself]

So it works sometimes but not at other times? Are you getting any errors in the devtools console?

[@jakemontgomery9324]

Seems like I occasionally need to restart npm run watch, I guess. Thanks for the video!

[@drehimself]

Glad you figured it out. Thanks for watching!

[@hakangenc1]

Thanks for the video, also can you make it with NodeJS ?

[@drehimself]

Thanks for watching! I'm not very familiar with Node, but may look into it in the near future.

[@developersolution]

can i edit without showing id in browser?

[@drehimself]

Maybe you can use a package like this to hash the id: github.com/jenssegers/optimus

[@anonymousrulz]

Great video. Keep it up (y)

[@drehimself]

Thanks for watching!

[@Abie169]

Good video, but where I can find previous video 2:02?

[@drehimself]

There's no previous video, just the code available on GitHub.

[@Abie169]

@@drehimself make video series for this tutorial, please

[@XilumX1]

Nice tutorial! How do you make your sublime editor look so nice? Do you have a tutorial for it maybe? :)

[@drehimself]

Check out material theme: github.com/equinusocio/material-theme

[@XilumX1]

Andre Madarang Thank you! :)

[@ricardochitagu6280]

im failing to migrate all tables...ive only migrated the users table

[@drehimself]

Not sure what to tell you. All the migrations are there.

[@kaixie4597]

find AppServiceProvider.php , in boot function write Schema::defaultStringLength(191);

[@mithicherbaro9394]

Thank you for the video...Great!

[@drehimself]

Thanks for watching!

[@cevinways1434]

thanks andre, so helpful

[@drehimself]

Thanks for watching!

[@jebbush2964]

How to add User Roles to this beautiful project?

[@drehimself]

I like this package: github.com/spatie/laravel-permission

[@jebbush2964]

Thank you

[@chrismellor7027]

Great video. Really enjoyed it.

[@drehimself]

Thanks for watching!

[@Osteele]

For some reason I do not believe that my events are firing. I see no activity in the Pusher Debug console. Thank you for sharing your time and knowledge with us.

[@drehimself]

I hope you were able to figure it out. Thanks for watching!

[@Osteele]

Hello Andre. Thank you so much for the prompt reply. What I did was delete everything, re-clone the repo, and start from scratch. All seems fine at the moment. Have a great day / evening. Peter

[@Osteele]

Actually, all seemed fine until I tried updating an order then this error appeared: Illuminate \ Broadcasting \ BroadcastException No message.
Line 107 of PusherBroadcaster.php.
throw new BroadcastException(
is_bool($response) ? 'Failed to connect to Pusher.' : $response['body']
);

[@Osteele]

Here is another update for those that may be having the same issue. I am not sure which action fixed the problem but here is what I did. First, I went to my wamp php settings and selected my appropriate time zone. The other was to go into bootstrap.js and set encrypted to false. The other was to modify my php.ini. At line that reads: [curl]
curl.cainfo = "F:\wamp3\bin\php\php5.6.15\extras\ssl\cacert.pem"

[@lahirudilshan8830]

great tutorial (y) keep it up.

[@drehimself]

Thanks for watching!

[@codeology1]

wow ... Amazing

[@drehimself]

Thanks for watching!

[@heyyy4987]

really like to know more about this..

[@drehimself]

about?

[@heyyy4987]

About buiding this kind of system.."Realtime Pizza Order Tracker" .. its great.

[@nabeeltahir6013]

Make video on Laravel Emoticon

[@drehimself]

I'm not sure what you mean

[@nabeeltahir6013]

Use emoji on Comments with laravel

[@nabeeltahir6013]

I want to say how use emojis in Laravel

[@OstapBrehin]

github.com/unicodeveloper/laravel-emoji

[@arsalanshaikh3763]

Thanku

[@drehimself]

Thanks for watching!