Full Cinema Ticket APP Build with Laravel Livewire Cloud Code

Tony Xhepa| 00:06:19|Mar 27, 2026

Chapters6

The presenter introduces the cinema app built with Laravel Livewire and cloud code, and demonstrates navigating from the dashboard to movie screenings.

Watch Tony Xhepa build a cinema ticket app with Laravel Livewire Cloud Code, featuring live seat holds, real-time updates, and a working booking flow.

Summary

Tony Xhepa walks through a cinema ticketing prototype built with Laravel Livewire and Cloud Code AI. The app lists movies, shows screenings, and displays seats with color-coded status (available, hold by you, hold by others, and sold). Tony demonstrates selecting seats for a screening, holding, and confirming bookings, then viewing a printed booking receipt. He highlights real-time behavior when the same screening is opened in another browser, showing how holds update across sessions. The video also mentions key components like models (Booking, Screening, Seat, User), Livewire components (Movies, Screenings, Seat Picker), observers (ScreeningObserver), and events (seat held, seat released, seat confirmed). He provides a quick peek at the code structure (web routes, resources/views, and Laravel controllers) and notes the development commands (npm run dev, php artisan serve) used to run the app locally. The practical takeaway is understanding how Livewire can handle synchronized UI states for ticketing in a multi-user scenario. Finally, Tony invites viewers to subscribe for more Laravel project walkthroughs.

Key Takeaways

The app displays screenings with a seat grid where colors indicate status: available (yellow), hold (orange), and sold (red).
Holds and bookings are synchronized between sessions, so another user can see a held seat and update status in real time.
A complete flow is shown: select seat -> hold -> confirm -> view booking details (booking ID, seat alpha-numeric) -> print receipt.
The project uses Laravel Livewire with Cloud Code AI, including models like Booking, Screening, Seat, and events such as seat held and seat released.
Code structure includes resources/views for bookings, movies, screenings, and a Seat Picker Livewire component; observers trigger on-seat actions.
Development steps touched on running locally with npm run dev, composer install, php artisan serve, and reloading to see real-time updates.

Who Is This For?

Essential viewing for Laravel developers exploring real-time UI with Livewire, especially those building ticketing or booking systems. It demonstrates practical patterns for seat selection, holds, and cross-session state updates.

Notable Quotes

"So if the seat has this color is available it means is available with the yellow color is your hold."

—Describes the color-coded seat status system used in the UI.

"Ticket has been sold."

—Shows how a confirmed booking is communicated in the UI.

"If I click again we're remove from your hold."

—Demonstrates the toggling of a seat hold before confirmation.

"This is an example of a cinema ticket application created by Laravel live wire with the cloud code AI."

—Summarizes the project’s tech stack and purpose.

"we can print this."

—Mentions the ability to print a booking receipt.

Questions This Video Answers

How do I implement real-time seat holds in Laravel Livewire?
What are best practices for a multi-user booking flow with Livewire?
How to synchronize UI state across browsers in a ticketing app using Laravel Cloud Code?

Laravel LivewireCloud Code AILaravel 8+ (implied)Seat picker UIReal-time updatesTicket booking flowLivewire observersSeat hold/confirm eventsMVC structure in Laravel

Full Transcript

Hello friends, ton here welcome. In this video I'm going to show you an example I have created with cloud code laravel example and this project is with a live wire start kit. The project is cinematic application. So we can go to application logged in and here I have added on the sidebar I have added a link. We can go to movies and here where to display all the movies we have. Right now we have only two movies but anyway and here we have the time stamps. So for example we can watch this movie in Friday 5:00 p.m. and also 8:30 p.m. Let's choose this one also the inspection. We can watch this movie in the Friday 2:30 p.m. or 700 p.m. Let's choose Dune here 5:00 p.m. If I select we navigate to this page. So movie slash the movie slug screenings and we can see here we have the seats down there I have added. So if the seat has this color is available it means is available with the yellow color is your hold. So if I click here is yellow color uh with the orange color is other hold. So some other user has clicked that uh seat and maybe he want to buy that ticket and if that is red if the color is red is confirmed. So that's it. Ticket has been sold. Okay. So right now I have clicked this one. If I click again we're remove from your hold. We if I click now yeah we can confirm booking here. And if I confirm let's click here. Now we navigate at this page bookings slash and ID. So booking confirmed. So you sit have been reserved successfully and yeah the name the day the time here and hold one for example booking ID seat count one and also the seat which is the alpha 3. Okay, we can book more tickets or we can print this one. Yeah, we can print this. So let's go back. Let's go and choose this one. And you can see now two and three seats are confirmed. Let me just open this project. This one here. I'm going to open in another browser. So I'm going to paste this one here. Let's go and register. I'm going to use also here fake filler. I'm going to zoom it a little bit for you. And we can go to movies. And I'm going to go to this movie Dune in 5:00 p.m. So let's choose that 5 p.m. And we can see we have the sit alpha one which is held by another user and this is the two is sold and also three is sold. If I select four here okay yeah we can uh this is now your hold and we can confirm. But before that I'm going to come here and I want if that is selected but by this user I want also on this user here to update to say that this uh for seat is held by another user what we have here the example here come here I am in the her cinema live wire and I'm going to run mpm rundev also I'm going to run the PSP artisan reo verb start and the PHP design Q listen. Okay. And now yeah you can see now we have this also the four which has this uh orange color which mean is held by another user. If I come here now and I'm going to remove this. I'm going to click again. We are removing and also right now immediately it's going to update to this user that we can remove and we can select to this user now and it's going to be the same thing is going to update also here. Okay. So this is an example of a cinema ticket application created by Laravel live wire with the cloud code AI. Let me just show you a little bit the code. So I'm going to open first let's open the resources the web PHP and here we have the welcome out for the dashboard and we have the settings and cinema. If I go to cinema here we have crowd live wire movies uh movies movie slings and screening here and also the bookings and the booking. Of course, we have also channels because we are working with the reverb. And let's go also. I'm going to go to models. We have booking model view label cast screening user seats and formatted total. We have the whole here. We have the movie and we have the screening here and the set. We have observers. Screening observer. We have the let's go events seat confirmed seat held and released. Also we have actions clean up expired holds uh confirm booking generate seats for screening hold seat and release seat. Okay. Then we have the views. Views we have bookings confirmation what we saw earlier. We have the movies just to display all the movies. And we have also screenings sit picker. So here is all the logic what we have here. So sit picker and yeah this is what I wanted to show you in today's video. And don't forget if you like such a videos please subscribe like the video because it's going to help me to rank on YouTube and motivate me to create more video about Laravel projects. All the best and see you in the next video.