React and Laravel: A Practical Guide with Docker

Install Laravel by installing Composer and running four terminal commands, create a project named Laravel Admin from Laravel 8, then run php artisan serve and verify in the browser.

Connect Laravel with my school through Docker by creating a Dockerfile and docker-compose, install PHP extensions and Composer, run Artisan serve, and configure MySQL with volumes and port mappings.

Test database connections and apply migrations in a dockerized Laravel setup by creating a user table with first name, last name, email, password, and timestamps.

Join routes in a Laravel API by creating a hello function in an OAuth controller, wire it to an API route, and test with Postman in a Docker Compose setup.

Register a user by posting first name, last name, email, and password, returning the user with a 201 status, while configuring the user model with fillable properties and password hashing.

Create a custom request in Laravel to validate registration data, authorize access, define rules, require first name, last name, email, password, and password confirm, and apply it in the controller.

Install Laravel Sanctum to manage API tokens, run migrations to create the personal access tokens table, and update the user model to enable API token-based login.

Explore login in a Laravel app using email and password, handle invalid credentials with an unauthorized response, and issue a jwt token to authenticate the user.

Learn to fetch the authenticated user by validating a JWT with Laravel Sanctum middleware, which returns unauthorized on invalid tokens, while sending a Bearer token in the authorization header.

Implement HttpOnly cookies to store a JWT, preventing front-end access, and configure middleware to read the token from the cookie and set the authorization header.

Implement a logout function that expires the authentication cookie to invalidate the session, return a success message, and expose a logout api endpoint to post and verify logout.

Install the Laravel IDE Helper to fix 'class does not exist' errors, generate helper files with artisan, and enable IDE highlighting and function reminders for models and cookies.

Create a Laravel user controller with artisan, implement index, store, show, update, and destroy, and map these methods with apiResource routes to expose a complete API.

List, create, update, and delete users in a dockerized react and laravel setup, using first name, last name, email, and password parameters.

Learn how Laravel paginates users to 15 per page and adjust per page and page parameters, then seed the database using a user factory and Faker data in Docker.

Create and authorize user form requests in a laravel api, add validation for create and update actions, and implement endpoints for updating user info and password in a docker-based stack.

Build and manage roles and permissions with Laravel by creating migrations, models, and controllers, and expose api routes to connect users to roles and roles to permissions.

Create a Laravel migration to link users and roles with a foreign key, add url_id, handle up and down constraints, and fix foreign key errors by refreshing the database.

Explore one-to-many relations in Laravel by linking users to roles with belongsTo and hasMany, seeding data with factories, and exposing role data in the API.

Master loading related data in resources by using with or load to conditionally display a user's role, tailoring responses for user lists versus single user views.

Connect roles and permissions with a many-to-many table, using role_id and permission_id with cascade delete, and expose permissions on roles via a resource collection.

Learn how to manage permissions in Laravel using attach, detach, and sync for many-to-many roles. The lecture demonstrates seeding roles like admin, editor, and viewer, and updating permissions with sync.

Create a Laravel product model with migrations, a controller and resource, and a factory to power an API with title, description, image, price, CRUD, and seeding.

Build a Laravel image upload feature. An image controller handles a file from the request, stores it in public/images with a random name, returns its URL, and validates mime types.

Design a Laravel orders system by creating orders and order items models, migrations, and API resources, establishing a has-many relationship and eager loading for index and show endpoints.

Create and seed nested factories for orders and order items, generate 30 orders, attach 1–5 items per order, populate fields with faker data, and seed created timestamps for charting.

Explore using Laravel attributes to expose computed properties: a name attribute combining first and last name, and a total attribute summing order item price times quantity.

Export orders to a csv file by building an export function, setting headers for content type and attachment, and iterating orders and items for title, price, and quantity.

Learn to display chart data by building a daily aggregate query in Laravel, joining orders to order items, casting dates, and summing price times quantity to group by date.

Learn how to implement gate-based access control in a Laravel app by defining gates, checking user permissions, and protecting routes for view and edit actions.

Install the tools, then run npx create-react-app react-admin --template typescript to create the app and start it with npm start on port 3000.

Learn to set up a React component within a Laravel project, integrate bootstrap styles from a dashboard template, and clean up markup by adjusting className and removing unused elements.

Explore building React components by implementing a navigation component and a menu filter using both class-based and hook-based approaches, with imports, exports, and prop rendering.

Learn to set up a react router in a Laravel and React project by creating dashboard and users components and wiring routes for /dashboard and /users with browser router.

Create a dedicated wrapper component to render the register page with its own template, import and use the wrapper in user and dashboard components, and render children via props.

Build and refine a registration form in a React and Laravel app, wiring inputs to state, handling onChange, and preventing default submit to send user data to the backend.

Install axios and its types, then send a post request to localhost:8000/api/register with user data. Compare promise chaining with then and async/await to access response.data and register users.

Explore implementing a login flow in a React and Laravel app by redirecting to the login page after registration, using a state-driven redirect and a login component.

Explore managing state with react hooks by using useState in a count example: initialize count to zero, wire an input with onChange to setCount, and reflect updates in the UI.

Create a React login flow using useState to track email and password, post to the login API with credentials, receive an http only cookie, and redirect to the main page.

Learn how to use useEffect to fetch the authenticated user with axios, display the user's first name in the navigation, and handle sign out in a React functional component.

Configure axios defaults to standardize API requests in a React and Laravel app, using a global base prefix for endpoints and enabling with credentials for all requests.

Learn how to implement logout in a React and Laravel app with JWT, posting to logout, clearing tokens, and redirecting to login to protect the dashboard.

Create a TypeScript user model in a models folder, define id, first name, last name, and email with a constructor, and implement a name getter for the full name.

Show how NavLink updates the active route by applying an active class, compare it with Link, and use the exact property to ensure only the current path highlights.

Create a reusable users component in Laravel and React project with Docker, fetch users with axios in useEffect, manage with useState, and render a table with name, email, and role.

Implement pagination to fetch and display users across pages using a page state and next/prev handlers, reloading with useEffect on page changes and respecting the last page.

Learn how to safely delete a user in a React and Laravel app using axios, with a confirmation prompt, a delete request to users/:id, and updating the frontend user list.

Create a user form in a React component, managing first name, last name, email, and role with state. Fetch roles via axios in useEffect and submit to create the user.

Reuse the user create form to build a user edit flow: fetch the user by id via axios, prefill fields, and submit updates to the users endpoint.

Create a roles management page in the React and Laravel project, add a roles component and menu entry, fetch roles, render a table with id and name, and enable delete.

Edit a role by updating its name and permissions on the roles edit page, prefill the role data via get roles, and submit a put request to save changes.

Create a products page in a React and Laravel app by building a products component, rendering a table with image, title, description, and price, and adding delete actions and pagination.

Create a reusable paginator component by extracting the pagination logic for products and users. Use props for last page and a page-changed callback, and wire events to update page.

Create a product flow in a React and Laravel app by implementing a product component with a form for title, description, image, and price, handling input changes, submission, and redirect.

learn to add an image upload feature to a product form by creating an image component, handling file selection on change, constructing form data, and posting to the server.

Learn to edit a product form in React using useRef and useEffect to prefill data from an API, update the image via refs, and perform a put request.

Create the orders component, define order and order item models, fetch orders with axios, and render a table with pagination showing orders and their items.

Demonstrates turning clicks into smooth animations by toggling item visibility with height transitions, overflow handling, and Bootstrap styles using React state and a simple select function.

Demonstrates implementing a csv export button that calls the backend to generate a csv file, handles a blob response, and downloads the file named orders.csv via a programmatic link.

Install c3 and type definitions, generate the chart with c3, bind it to the element, and fetch data via axios to map dates to x and sales to y.

Create a profile page with two forms to update account information and password, prefill fields from user data, and submit changes via redux actions, addressing duplicate calls and automatic updates.

Install redux, react-redux, and typescript version, then build actions and reducers, configure the store, and implement a set user action with an immutable user state.

Leverage Redux to manage user data across components by connecting with React-Redux, mapping state to props, and dispatching a set user action to sync user details throughout the app.