Build a Real-Time Parking App with Laravel 12+ & React 19

Define and migrate sectors, places, reservations, and stripe sessions for a parking app in Laravel. Seed three sectors, ten places per sector, and set default statuses and relationships for payments.

Model relationships define how places, sectors, reservations, and users interact: place belongs to sector, sector has many places, reservation belongs to user and place, start_time and end_time cast to DateTime.

Create a Laravel api with place, sector, and reservation resources and an index route returning places with sector and reservations, then connect a React frontend to fetch and display them.

Display a places list using bootstrap styling, fetch places with axios, and render place cards with sector, description, price per hour, status icons, and actions to reserve, cancel, and park.

Add routes with browser router and routes to the home page, showing reserve, park here, cancel, and end parking buttons according to status.

Build a reservation API for parking app by creating a reservation controller, resource, and route, validating reservations and place availability, using a transaction, and returning the updated place as JSON.

Reserve a place by posting to the API and update the place list item to reflect the new status, showing park and cancel buttons for the reserved place.

learn to cancel a reservation in a real-time parking app with Laravel 12 and React 19, validate ownership, cancel the reservation, and free the place with toast feedback.

Start parking by verifying ownership, updating the reservation to parked, recording the start time with carbon, and marking the place as occupied, with frontend calls and error handling.

In the real-time parking reservation app built with laravel 12 and react 19, end parking by calculating hours, applying sector price, and marking the reservation as finished and the place as available.

Learn how to optimize the real-time parking reservation app by refactoring the back end, introducing private helpers, and eliminating duplicate responses before optimizing the front end.

Optimize the frontend by extracting place request logic to api.js and defining the api base URL. Implement reserve, cancel, and start/end parking actions with centralized error handling.

Develop the user api by creating a Laravel 12 controller with store, login, and logout actions, validating requests, returning user resources, and defining guest routes for register and login.

Build a front-end registration for the real-time parking app with name, email, and password, handling loading, validation errors, and redirecting to login after posting to user/register via Axios.

Display validation errors on login and registration with a custom use validation component that renders field-by-field messages from an errors object, and add a loading spinner during submission.

learn to wire a redux store with redux-persist for login in a real-time parking app, and fix vite 8 storage issues by using storage.default.

Learn to implement user login in a real-time parking app by converting registration to login, handling validation, dispatching credentials with Redux Toolkit, and persisting user state with Redux Persist.

Display the currently logged-in user in the navbar, provide a logout button wired to an API route with token-based authentication, and update app state on logout.

Manage authentication by validating the current token, logging out on 401, and fetching the logged-in user. Protect routes with a private route component that redirects unauthenticated users to login.