I built a pizza tracker with Laravel, React, and Inertia | Full Stack Tutorial

I wanted to see if I could build something that worked like the Domino's pizza tracker, and I think I got pretty close!
Using Laravel, React, Inertia, and Tailwind, we'll put together a full stack application that features a live-updating pizza tracker and dashboard to manage orders. Let's get cooking!
Interested in learning how to build real-world practical apps with Laravel and PHP? Preorder my latest course at selfmadesaas.com for 25% off until launch!
- 0:00 What we're building
- 1:00 Starting the project
- 5:21 How Inertia works
- 8:38 Setting up the data
- 15:10 Creating dashboard screens
- 28:51 Working with forms
- 41:47 Building the tracker frontend
- 57:58 We're finished!
Send me new video ideas and vote on what's coming next: suggest.gg/aschmelyun
Ziggy: github.com/tighten/ziggy
Flowbite table component: flowbite.com/docs/components/...
Follow me on Twitter! / aschmelyun
Join my newsletter, where I send out new information about twice a month in the PHP, JavaScript, and Docker realms: aschmelyun.substack.com

[@aschmelyun]

Here's the repo for anyone interested in the final code: github.com/aschmelyun/dices-pizza

[@antomac1511]

Great tutorial man, learned a lot. Hard to find react/inertia tutorials of this quality, keep them coming!

[@dannydelgado9820]

Awesome Andrew! Thanks for sharing this

[@RTCDigitalS]

Glad you posted this a week ago. It's very difficult to find react inertia tutorials as they are usually made with Vue. I hope I can learn from if. Thanks

[@kennethornieta2375]

true hahaha

[@ronanjwhelan2703]

Thanks Andrew - love your work!

[@xThree65x]

This is top notch content! I feel like using Laravel, Inertia and React gives you the best of both worlds to develop with! More tutorials like this would be welcomed!

[@pjr]

So clear and easy to understand. Thanks!

[@carlosmontiel7078]

Feeling good watching new videos!! Nice.

[@tmanley1985]

This is possibly the most well earned sub this year. Well done.

[@Icodestuff]

Great video as always! Certainly going to take some inspiration from the "I built this" series as I've been wanting to do something similar

[@aschmelyun]

Thanks a ton! These videos are always fun for me because they scratch an itch to try out new things or make weird projects. Definitely try it out!

[@tazme4914]

Its just wow , you just created a CRUD applicaiton using Laravel+react+inertia in an 1 hour , im exited to try this now

[@kwasiezor1630]

Very nice project. Learning good things. Thanks for sharing.

[@jkbullitt8986]

Kudos!!! Great tutorial here! Thankyou👍

[@devtube734]

just amazing

[@xclampazzo]

Awesome tutorial!

[@Somcoders]

That was smooth and insightful! Thank you Andrew.

[@B3DFire]

I'd love to learn how to create a demo like you have with such fluidity

[@aschmelyun]

It's a LOT of editing, trust me haha. The original content for this video was close to 5 hours of recording.

[@mkyg8871]

Thank you so much for this.

[@aschmelyun]

No problem, I'm glad you liked it!

[@ergouwang3849]

Awesome,many thx!

[@literallyshane4306]

great video, really well explained. thank you

[@oyewalekayode2725]

What a nice job from you andrew. No doubt you're a great tutor. I will be waiting for a real estate property listing site from you andrew one of this days.

[@aschmelyun]

Thanks for the complement! I'll add real estate property listing site as one of my backlog items, that sounds like a fun idea for a full-stack app. What would you like to see it built in? React, Vue, Inertia, something else?

[@moazsaid3417]

​@@aschmelyuninertiajs vue

[@oyewalekayode2725]

laravel and vue

[@rcr786]

Great tutorial and easy to folow!!. Thanks!

[@ConstAxer]

Great! thank you! It's fast jump into laravel+react.

[@aigars2225]

Good stuff, thanks

[@chandanm3308]

Really Nice👍👌

[@developedbythet]

My first time learning Interia. Thanks for awesome overview. More of Laravel, React, Interia projects please. for conditional in PizzaStatus,jsx, these Tailwind classes "first:rounded-l-full last:border-r-0 last:rounded-r-full" can replace two conditions below: if (index === 0) { baseClasses += " rounded-l-full"; } if (index === statuses.length - 1) { baseClasses = baseClasses.replace("border-r-2", "rounded-r-full"); }

This is amazing

[@aschmelyun]

Thanks man, I'm glad you liked it!

[@robchal7230]

your video is awesome

[@user-fl5yo6yx5v]

great tutoriel u gonna be famous one day ;)

[@neon-gi5tb]

Great video! The props in the Table component are added by you? I couldn't find it on Flowbite.

[@sakmaestro3852]

Great video... sir is it possible symfony and react combination?

[@nihongo_]

thank u

[@fuadagil]

Great videos. Btw i got no SelectInput components since installation. Can you provide link to the components code? Thankyou

[@BBB888BBB]

a lot of important parts of giving beginners the basic concepts was skipped ... we hope we can make use of your knowledge going forward ..thanks .

[@GianGamingMLBB]

I saw little issue, when you make it small screen, the pizza menu will not shown in the ResponsiveNavLink

[@RazvanTSibiu]

I used NextJS + API made in Laravel and it's pretty slow in development mode. Does Laravel + Inertia + React works much better?

[@eryas1]

I have form which has many dropdownList for cities and districts, user must select cities to fill the districts list. When I use route.visit(city/{cityId}/districts). Url page is changed after change the city while I render same page of the form. Why? What is the best way to do it?

[@carlosmontiel7078]

what extension is installed to see all the cool icons and models for react?

[@pkiorpes]

great job it would be nice to have a dark/light switch and language/locale selector as well

[@aschmelyun]

Those are great additions! Might add them to an extra video later on

[@oluwasegunibidokun3910]

Nice tutorial Andrew. Well done. How do you effect changes in the frontend after deployment to production?

[@rannieperalta2192]

awesome

[@celebritydev1]

Great tutorial. Do you have any idea on how to deploy a laravel inertia react ssr project to a shared hosting? Any suggestion would be appreciated.

[@aschmelyun]

Thanks! Deploying that stack to shared hosting is pretty tricky, as with ssr you'll need access to a terminal or supervisor to run the server rendering node app in the background. My suggestion would be to use something like Laravel Forge, or at the very least a cheap VPS like DigitalOcean or EC2.

[@celebritydev1]

@@aschmelyun Thanks for your reply. My first try was to use cron job but that didn't work as intended. The second step I took was to create a node js app and installed pm2 on the server but to no avail. I haven't tried laravel forge before. I would give it a try to see how it goes. Once again, thanks for the suggestion.

[@ka24det]

Will the getChefAttribute do a query for each pizza? n+1? Or is eloquent smart enough to not do that? I'm mostly back-end and have been avoiding any Inertia stuff but you make it easy to learn.

[@aschmelyun]

That's a great question, I'm like 90% sure that eloquent is smart enough to run a join in the query, but I'll have to make sure

[@gouravjoshi953]

How to remove ' - Laravel' from the title of the page?

[@dApoTB]

Change the app name in config or env file.

[@abhishekgupta5544]

Very nice video sir, can we use different theme in breeze with react.

[@user-bb9hw8gq7g]

Its a brilliant video please create a video for big laraevl inertia and reactr project and also guide use how to use websockets, echo in inertia and react

[@redouanebenbiga9148]

my friend i m a laravel, react, react native developper and i never tought this way its even exist you did well to help us your great and i would like to see more video like a project built with inertia laravel and react , and i have 2 question : how we build the react app with this way , and can inertia work with react native thanks in advance really great video

[@aschmelyun]

You can just build out the React app for production by using `npm run build` and it'll bundle everything up as dist assets. For React Native though, that might be a bit tricky because of how tightly coupled the frontend components and backend is with this setup. For that, you might still have to stick to traditional API access.

[@neverforget1575]

Great vid, what's your thoughts on React Vs Vue in regards to the Laravel learning eco system? And a beginner getting started, thanks

[@aschmelyun]

If you're just getting started with frontend frameworks, Vue is definitely the way to go. Specifically the Options API (old Vue 2 style of writing components). Coming from an older JavaScript/jQuery background it makes more sense than React's JSX. From there, you can move to Vue 3's Composition API which I like better, and that kind of bridges the gap to current modern JS which can make learning React much, much easier.

[@neverforget1575]

Thanks for the reply, I have read on a few reddit posts that people are struggling to get jobs with Laravel and Vue and there are more openings in React. A lot of them said that they wished they used React from the start. Im just worried that React tutorials with Laravel are few and far between so may get stuck. just not sure what to choose, thanks@@aschmelyun

[@cyberninja80]

what text editor do you use ? very cool

[@xThree65x]

Here is an odd question at the top for your tab when switching between pages for example it goes from "Dashboard - Laravel" to say "Order # - Laravel" Where is the "- Laravel" coming from...like how do you remove it or change it?

[@alejandrogarcia..]

What code editor do you use?

[@aschmelyun]

PHPStorm with the MaterialUI Theme plugin

[@jusiprogramusi8826]

Why do i get unable to locate file in Vite manifest whenever i create a new jsx file, Does anyobody have an idea why this is happening?

[@gamertv1261]

Thank you for this video. Can you write something using Native PHP please?

[@aschmelyun]

It's in my backlog! Hopefully I'll have a video out in the next month or two with a Native PHP app.

[@bye835]

how do i handle error when the access data is not valid. $token = VerificationOTP::where('token', $request->isd)->first(); if (!$token) { return response()->json(['error'=> 'Token not found'], 404); } the error i get All Inertia requests must receive a valid Inertia response, however a plain JSON response was received. {"error":"Token not found"}

[@javascriptforhumans]

Instead of the setinterval here i use the pusher it's works great.

[@GunniBusch1]

How „bad“ is it to not use the props for most of the data, to „reduce“ loading time by using tenstack router and skeleton?

[@azad01_]

your solution for real-time is kill the resources of the server, it's much better using socket

[@abdulsiyadnp]

Supeeeeeeerb ❤❤❤

[@ahmadabeer3523]

i installed ziggy with "composer require tightenco/ziggy" but the routes are always redirectionf me to another page

[@aschmelyun]

Huh, that's weird. What page are they redirecting you to?

[@aem..]

What vscode theme is it?

[@justazizz]

Im just curious, which IDE is this 🙃

[@meaningmean]

Does it works with Svelte?

[@meaningmean]

I forgot to say thanks!

[@cmp-tata6484]

Name of your editor

[@kullbetdah]

24:31

[@iUmerFarooq]

Vue + Laravel

[@aschmelyun]

Vue + Laravel is my favorite stack, I have many more ideas using those two in the works!

[@iUmerFarooq]

@@aschmelyun Sound great

[@iUmerFarooq]

Nuxt + Laravel projects

[@muhammad_abir]

finally I found what I was looking for

[@9uifranco]

Great! 26:10 $hidden and $appends works great but you could also do something like: Pizza::with(['user, id, name'])->get() This will append the user name to the pizza data. Note: you need to always put 'id' to make this work Note 2: Maybe it's with([user:id, name'']) - I don't remember exactly

[@carlosmontiel7078]

Help PHP 8.3.4 11.1.1 Unable to locate file in Vite manifest: resources/js/Pages/Pizzas/All.jsx.