I built a pizza tracker with Laravel, React, and Inertia

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

Рет қаралды 34,051

Күн бұрын

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

Пікірлер: 99

@aschmelyun 11 ай бұрын

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

@antomac1511 6 ай бұрын

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

@dannydelgado9820 11 ай бұрын

Awesome Andrew! Thanks for sharing this

@Icodestuff 11 ай бұрын

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 11 ай бұрын

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!

@RTCDigitalS 10 ай бұрын

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 7 ай бұрын

true hahaha

@pjr 11 ай бұрын

So clear and easy to understand. Thanks!

@xThree65x 4 ай бұрын

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!

@carlosmontiel7078 3 ай бұрын

Feeling good watching new videos!! Nice.

@ronanjwhelan2703 10 ай бұрын

Thanks Andrew - love your work!

@kwasiezor1630 5 ай бұрын

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

@tmanley1985 3 ай бұрын

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

@tazme4914 3 ай бұрын

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

@jkbullitt8986 6 ай бұрын

Kudos!!! Great tutorial here! Thankyou👍

@literallyshane4306 4 ай бұрын

great video, really well explained. thank you

@Somcoders 11 ай бұрын

That was smooth and insightful! Thank you Andrew.

@rcr786 6 ай бұрын

Great tutorial and easy to follow!!. Thanks!

@xclampazzo 5 ай бұрын

Awesome tutorial!

@oyewalekayode2725 11 ай бұрын

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 11 ай бұрын

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 11 ай бұрын

@@aschmelyuninertiajs vue

@oyewalekayode2725 11 ай бұрын

laravel and vue

@devtube734 11 ай бұрын

just amazing

@B3DFire 11 ай бұрын

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

@aschmelyun 10 ай бұрын

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

@ergouwang3849 2 ай бұрын

Awesome,many thx!

@mkyg8871 11 ай бұрын

Thank you so much for this.

@aschmelyun 11 ай бұрын

No problem, I'm glad you liked it!

@chandanm3308 11 ай бұрын

Really Nice👍👌

@thethmuucodes 7 ай бұрын

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"); }

@aigars2225 6 ай бұрын

Good stuff, thanks

@ConstAxer 3 ай бұрын

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

@eryas1 7 ай бұрын

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?

10 ай бұрын

This is amazing

@aschmelyun 10 ай бұрын

Thanks man, I'm glad you liked it!

@RazvanTSibiu 8 ай бұрын

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

@fuadagil 8 ай бұрын

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

@carlosmontiel7078 3 ай бұрын

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

@neon-gi5tb 10 ай бұрын

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

@GianGamingMLBB 3 ай бұрын

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

@user-fl5yo6yx5v 3 ай бұрын

great tutoriel u gonna be famous one day ;)

@sakmaestro3852 10 ай бұрын

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

@jusiprogramusi8826 7 ай бұрын

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?

@gouravjoshi953 2 ай бұрын

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

@dApoTB Ай бұрын

Change the app name in config or env file.

@oluwasegunibidokun3910 3 ай бұрын

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

@user-yk3ho4py9d 18 күн бұрын

but what source-code editor you are using in this tutorial ?

@robchal7230 6 ай бұрын

your video is awesome

@bye835 4 ай бұрын

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"}

@xThree65x 4 ай бұрын

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?

@abhishekgupta5544 Ай бұрын

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

@ka24det 11 ай бұрын

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 10 ай бұрын

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

@GunniBusch1 4 ай бұрын

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

@celebritydev1 11 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

@@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.

@cyberninja80 4 ай бұрын

what text editor do you use ? very cool

@aem.. Ай бұрын

What vscode theme is it?

@pkiorpes 7 ай бұрын

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

@aschmelyun 7 ай бұрын

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

@neverforget1575 9 ай бұрын

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 9 ай бұрын

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 9 ай бұрын

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

@redouanebenbiga9148 11 ай бұрын

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 11 ай бұрын

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.

@justazizz Ай бұрын

Im just curious, which IDE is this 🙃

@ahmadabeer3523 9 ай бұрын

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

@aschmelyun 9 ай бұрын

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

@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

@rannieperalta2192 6 ай бұрын

awesome

@gamertv1261 11 ай бұрын

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

@aschmelyun 11 ай бұрын

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

@nihongo_ 7 ай бұрын

thank u

@abdulsiyadnp 10 ай бұрын

Supeeeeeeerb ❤❤❤

@alejandrogarcia.. 9 ай бұрын

What code editor do you use?

@aschmelyun 9 ай бұрын

PHPStorm with the MaterialUI Theme plugin

@cmp-tata6484 4 ай бұрын

Name of your editor

@azad01_ 6 ай бұрын

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

@meaningmean 4 ай бұрын

Does it works with Svelte?

@meaningmean 4 ай бұрын

I forgot to say thanks!

@BBB888BBB 2 ай бұрын

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 .

@javascriptforhumans Ай бұрын

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

@kullbetdah 11 ай бұрын

24:31

@iUmerFarooq 10 ай бұрын

Vue + Laravel

@aschmelyun 10 ай бұрын

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

@iUmerFarooq 10 ай бұрын

@@aschmelyun Sound great

@iUmerFarooq 10 ай бұрын

Nuxt + Laravel projects

@CoderSineNomine 12 күн бұрын

if anybody thinks that i am mean well go ahead.. this is waste of time.. if you know laravel you don't need this, if you don't know you will not learn anything from it. because he passes everything without explaining. so why?

@muhammad_abir 5 ай бұрын

finally I found what I was looking for

@9uifranco 5 ай бұрын

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 3 ай бұрын

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