Vue 3 and Laravel: Breaking a Monolith to Microservices

Install Laravel and Composer, then paste the installation line in the terminal after updating the app name to Laravel Admin. Start the dev server with artisan serve on port 8000.

Learn to containerize a Vue 3 and Laravel monolith by installing Docker, configuring Dockerfile and docker-compose, linking frontend, backend, and database containers, and mapping ports and volumes.

Define the first route in the Laravel API using a get method and a root name. Create a user controller with an index method returning hello, then test with Postman.

Set up and migrate the user table by adding first name and last name columns. Seed 20 users with a factory and update the API to return all users.

Explore building RESTful user management in Laravel: list, show, create, update, and delete operations with proper status codes, input handling, and API resource routing.

Create a user create request with required first name, last name, and valid email, omitting password for admins who create users and enabling partial updates by merging rules.

Implement pagination for the user index in a Laravel API using paginate to avoid slow queries and return current page, last page, and total.

Implement user authentication using Laravel Passport to protect private routes, configure API tokens, install and migrate passport tables, and enable passport routes and guards.

Leverage Laravel Passport to implement a login flow with an OAuth controller, authenticate users by email and password, and return an admin access token for private routes.

Protect a user resource with a middleware, require the authorization header and token to access the users endpoint, ensuring only authenticated users can view data.

Implement a register endpoint that creates a user via a post request, validates first name, last name, email, and password with confirmation, hashes the password, and enables login.

Define three user routes in the profile feature: fetch the current logged in user, update user info, and change the password using the user controller.

Create a rules table via migration, define a role model, and build a controller with index, store, show, update, and destroy for role management, timestamps false, and test with Postman.

Set up a foreign key from users to roles in Laravel, apply a fresh migration, seed roles (admin and viewer among three) and assign random roles to users.

Learn how to expose user data via Laravel API resources by linking users to roles, formatting responses for single and collection results, and validating relations with Postman tests.

Create and seed a products table with title, description, image, and price fields using migrations, model, controller, factory, and seeder, populating 30 products.

Implement the product routes in Laravel, create a product resource with title, description, image, and price, and return resource collections for index and show, with pagination verified via Postman.

Implement store and update methods to upload an image from the request, save it in public storage with a random filename, and link the URL to the product.

Learn how to decouple image handling by introducing an image controller with a dedicated upload route that returns an image url, simplifying product create and update.

Create and migrate orders and order items models, add product title, price, and quantity fields, set up foreign keys, and seed data with factories to demonstrate the one-to-many relationship.

Design and expose order data via api resources for orders and order items; implement index and show routes, and ensure each order includes its items.

Implement getTotalAttribute to compute the total by summing price times quantity across order items, and expose it through the order resource API.

Define an export function to generate and download a csv of orders and order items in laravel, setting headers, writing header and data rows, and returning a 200 response.

Define a permissions table and a role-permission pivot to implement a many-to-many relationship, seed multiple permissions, assign admin full access and viewer restricted rights in Laravel.

Learn to connect roles and permissions with a many-to-many pivot in Laravel, create and update permissions with JSON payloads, and test via API endpoints.

Expose the current authenticated user's permissions to the frontend by adding a dedicated permissions field on the user resource, via a user model function and a resource additional field.

Create a permissions controller and permission resource, then add an index method that returns a permission resource collection for the api, exposing all permissions.

Apply Laravel gates to restrict routes by user permissions, defining view and edit abilities in a service provider, and enforcing authorization.

Explore adding authorization gates to controllers and requests to authorize user edits, using a gate that allows edits on users, and choosing the approach that fits your project.

Create a dashboard chart by joining orders and order items, grouping by created_at date, and summing quantity times price for daily totals, exposed via the dashboard controller api.

Learn to replace insecure login with an HttpOnly cookie that stores a JWT for authentication. Implement cookie creation, logout, and middleware to read the cookie and set the bearer token.

Install vue and dependencies, create a vue 3 project named view admin with manual features (typescript), then run npm run server to start app and verify it runs in browser.

Refine a Vue 3 and Laravel dashboard by removing unused views and assets, scaffold a menu component, integrate bootstrap template markup, and wire routes and navigation for a microservices-oriented UI.

Set up a login and register flow in a Vue 3 and Laravel app by organizing public and secure folders, importing the register component, and routing to /register.

build a reactive form in Vue 3 using setup and ref, bind first name, last name, email, password, password confirm with v-model, prevent default on submit to send data.

Send registration data to a Vue 3 and Laravel API using Axios, explore two methods: direct actions and a single async function, and navigate to the login screen on success.

Explore building a login flow with Vue 3 and Laravel, posting credentials to login, storing the token, and securing private routes with Axios defaults and an authorization header.

Implement a secure component with child routes by adding a dashboard route and dashboard component, then verify user authentication on mounted via a backend call.

Implement a client-side logout by wiring a sign-out button to a logout function, clearing local storage, and redirecting to the login page, handling errors to ensure proper navigation.

Fetch the user from the API response, pass it as a user prop to the navigation, and render the first and last name with optional chaining to avoid errors.

Create a vue users component in a secure folder, fetch users on mount, and display them in a table with name, email, role, and actions; route to /users.

Fix the menu in a Vue 3 app by applying the active class to router links, correcting paths, and redirecting the root to the dashboard for consistent highlighting.

Implement pagination by adding next and previous buttons and a load function that uses a page parameter; prevent navigating beyond the first and last pages.

Delete users by implementing a delete function in Vue, confirming before removal, calling the endpoint users/{id}, and updating the frontend by filtering out the removed user.

Explore building a TypeScript user model by creating permission and role classes, initializing properties with constructors, and using a shared entity interface to enforce an id across classes.

Create a users component in a Vue 3 app, build a form for first name, last name, email, and role, fetch roles, and submit to create a user.

Prefill the edit user form by reading the user id from the URL, fetch current data, and submit a PUT request to update first name, last name, email, and role.

Create a Vue 3 view component for roles and fetch roles with axios. Display role id, name, and actions in a table with a delete option and confirmation.

Develop a Vue 3 and Laravel role creation UI that names a role, selects permissions with checkboxes, fetches permissions, uses TypeScript, and submits to a server route.

Update roles by preloading the role data, setting the name and selected permissions in a form. Submit the updated values to the server via the roles endpoint.

Create a Vue 3 product component, fetch and display products with image, title, description, and price, add and delete actions, and wire up a TypeScript-ready products view.

Build a reusable paginator component in Vue 3 by sharing a load function, using a last page prop, and emitting page changes to unify pagination across products and users.

Create a product form in Vue 3, capturing title, description, image, and price, then submit via axios to the products endpoint and navigate to the products list.

Learn to upload images in a Vue 3 and Laravel app by handling a hidden file input, using form data, posting the image, and updating UI with the returned URL.

Develop a reusable image upload component in Vue 3 with TypeScript, enabling upload, edit, and display of images for a product, using a template and a function handling the event.

Update products by creating a product model with id, title, description, image, and price; fetch and populate product data, edit fields, and submit updates in the app.

Develop the orders component by fetching orders via an API, display order id, customer name, email, and total, add an export button, and implement pagination with page and last page.

Create a view component for order items, reuse the orders table, remove actions, and display product title, price, and quantity; fetch order items from the api and render under orders.

Implement export csv by wiring a click listener to call an export file function, build a blob from the server response as text/csv, and programmatically download orders.csv.

Install and configure a chart library, render a daily sales bar chart in the Vue 3 dashboard, fetch data from the backend, and update the chart dynamically.

Create a profile page in Vue 3 and Laravel app, with a profile component wired to the router and two forms—personal details and password—prefilled from the current user via axios.

Configure a vuex store for the user with a default not logged in state and a set user mutation, dispatch the user action, and render once the data is available.

Dispatch a user update from view X by triggering a Vuex action, then synchronize the Vuex store to reflect changes across the app automatically.

Organize a large Vue app's state with Vuex modules by creating a user model to group user-specific actions and mutations. Implement namespaces and TypeScript typing for clean, scalable store management.

Leverage TypeScript getters to expose the user's full name, updating navigation by returning first name plus last name and handling null user state.

Enable a can view and can edit permission system to control page access, menu visibility, and table actions for users, products, and orders across roles.

Learn to log in with HttpOnly cookies in a Vue 3 and Laravel microservices setup, removing the authorization header, exchanging cookies between frontend and backend, and using a JWT cookie.

Upgrade the influencer api by renaming the database to influencer, creating the influencer schema, and running php artisan migrate to seed new functionality in the Laravel project.

Add a prefix to the user API to expose admin routes only, creating /api/admin/users; plan to separate admin and influencer with scopes learned later, while login and register stay unprefixed.

Group the admin controllers into a dedicated admin folder and set their namespace to admin, ensuring endpoints work correctly. Prepare to add influencer controllers and influencer APIs.

Create an influencer product controller in Laravel, add an index method to return all products, and expose it via a public influencer api route accessible at influencer/products.

Filter products using a query string search variable retrieved from request input, applying where like on title or description to return matching results and align with the product resource.

Organize routes for admin and influencer users by extracting common routes into a shared area, enforce login via API middleware, and refactor the user controller to an OAuth controller.

Add is_influencer to the users table and adjust the register API to support influencer accounts, then update the user resource to conditionally expose admin roles and permissions.

Replace the role id with a user_roles table in a Vue 3 and Laravel monolith-to-microservices migration, using artisan migrations, seeds, and a has one through relationship.

Learn how to enforce access control with Laravel Passport scopes to distinguish admin and influencer privileges, configure middleware, and secure routes with token scopes.

Build a links feature with a unique code linked to users and a link products pivot to connect links with products, enabling influencers to generate checkout links.

Create and expose checkout links using a dedicated checkout link controller, fetch links by code, and return enriched resources including the associated user and products through a link product relationship.

Extend the orders table with shipping fields, influencer link and email, and a complete flag; create orders and items via the store method and allocate revenue at 10% and 90%.

Implement a database transaction to insert the order and order items, so both succeed or neither, using begin transaction and commit.

Learn to implement Stripe checkout in a Laravel app by configuring test keys, installing the Stripe package, creating a checkout session with line items, and handling redirects.

Demonstrates confirming an order in Laravel by validating the source, locating the order by the source id, handling not-found errors, and setting the order to complete via post /orders/confirm.

Learn to send emails to admin and influencer after an order is completed with templates wired to checkout, and test locally using a mail catcher.

Explore events and listeners to cleanly trigger emails after an order completes. Fire an order completed event with the order data to notify admin and influencer listeners.

Add a revenue attribute to the influencer user model, compute revenue from complete orders by user_id, and expose it via an authorized endpoint.

Create a Laravel stats endpoint that fetches the current user’s links, maps each link to its order count and revenue, and returns per-link aggregations for the influencer API.

Learn to compute and display a ranking of influencers by revenue using a Laravel collection map, summing completed orders, and sorting descending to deliver a clear influencer leaderboard.

Learn how redis speeds up revenue-based user queries by replacing file cache with redis, installing and configuring the cache driver, updating service readiness, and restarting docker compose to boost performance.

Cache the products with Redis to reduce API delay, using a five-second TTL; first fetch stores data. Subsequent calls return cached data via a Laravel cache closure.

Learn how to invalidate the cache in a Laravel app when a product updates by emitting a product updated event and flushing the cache, avoiding 30-minute delays.

Filter cached product data with a search term by using a Laravel collection, replacing the database query with collection filtering on title and description, and clear the cache.

Learn how to implement Redis sorted sets to maintain live influencer rankings by updating scores with orders, using a Laravel command and event listener to avoid cache clears.

Learn how to break a monolith into microservices by refactoring routes with admin and influencer prefixes, nested groups, and shared authentication to simplify the front-end api.

Update the admin base path to /admin, implement scoped logging, and outline admin changes as the lecture transitions to the influencer section.

Install and initialize a Vue 3 project for a Laravel context, selecting default versions, TypeScript, and the router, then run the app and begin making changes in the browser.

Refactor a Vue 3 and Laravel project by removing unused files, creating a single layout component, and building a simple navigation, header, and hero with Bootstrap.

Learn to implement navigation using router-link to the main page, login, and register. Build the home component with a router-view and adjust the header and layouts accordingly.

Create a user registration form in a Vue 3 and Laravel app, defining inputs for first name, last name, email, and passwords, then submit with axios and redirect to login.

Implement login in a Vue 3 and Laravel app by submitting email and password with axios, authenticating with credentials, and fetching user data after login.

Render authentication controls by checking the user object, pass the user to navigation, implement an asynchronous logout with a router redirect, and show login when no user is set.

configure a Vuex store to manage a user across components with state, actions, and mutations; access with computed properties and conditionally render UI based on authentication.

Fetch the products in the home component, display them with image, title, and price, return them by default, and define a Product class with id, title, description, price, and image.

Explore building a rankings component in a Vue 3 and Laravel app, rendering a simple table, fetching ranking data from the backend, and displaying name and revenue with an index.

Build a stats panel by fetching data from the backend to display users, orders, and revenue, wire links, and manage environment variables for local and production setups.

Learn to search and filter products with a text input in a Vue 3 and Laravel app, calling a search function on input and refactoring to avoid code duplication.

Select products by clicking to toggle borders with a selected class, manage a selected ideas list, and filter items to add or remove products in a Vue 3 component.

Generate a checkout link from selected products by calling the back-end with the product data, display the link when available, and handle errors such as needing to log in.

Create the check-out project with Knux, configure the project name and tooling, install dependencies, and run ampm to build the client and server for server-side rendering.

Modify the template to show a single product email, remove unnecessary fields, and explain how server-side rendering produces pre-rendered content for search engines.

Learn how routing maps cleanly to pages, create dynamic routes with parameters, and fetch data from the backend using mounted to populate pages like success and error.

explore how to fetch data from the backend with asyncData to pre-render user information, ensuring data is available before the page loads in a server-side rendering workflow.

Loop through products to display title, description, and price, add a quantity input, and apply scoped styling to the product list; the next tutorial will calculate the total.

Compute the order total in a Vue 3 app by initializing per-product quantities to zero, binding inputs to quantities, and using a computed total that updates as values change.

Model the inputs for first name, last name, email, country, city, zip, and an items array of product IDs and quantities. Post via axios to orders and redirect to Stripe.

Learn to implement stripe checkout in a Vue 3 and Laravel project by installing the package, configuring the publishable key, and handling the source data for successful payments.

Show a simple success page by copying the imports, exporting from the main file, mounting the component, and inspecting the browser to confirm the message is successful.

Split into microservices by creating an emails microservice in a backend, move angular influencer to micro services and rename it front, install IDE helper, and use RabbitMQ for email sending.

Learn how to integrate RabbitMQ with Laravel using the Rapidan Q service, configure host, port, vhost, and credentials, and resolve common installation and version issues.

Dispatch events in Laravel, fire a command, and process a bound job via rapid mq, sending and handling an admin added event with an email payload.

Move emails to the email microservice by dispatching admin added and order completed events via RabbitMQ, update listeners, and send admin and influencer totals as arrays.

Set up Docker Compose for a Laravel email microservice, adjust versions, configure MySQL databases, queues, and environment variables, and run and troubleshoot containers and Artisan commands.

Set up the users microservice in the Laravel backend, install the id helper package, and create the users table with first name, last name, email, password, id, and is_influencer.

Create and configure Docker files and Docker Compose for the users microservice, map ports, and run artisan migrate to build the users table and enable the API.

Implement the user model by configuring Laravel Passport, adding scopes and roles, updating the service provider, and running Passport migrations within Docker containers.

Move the auth controller and adapt login and register requests across microservices, update imports and routes, remove the user resource, and test the new Laravel and front-end integrations.

Import user data across databases in a Laravel app by creating a user seeder, configuring a secondary connection, and seeding the influencer database to restore admin access.

Learn how to perform internal api calls between microservices using tokens and authorization headers. Troubleshoot token mismatches and refactor requests to pass only the authorization header.

Create and wire a user service to fetch user data, replacing inline requests, and ensure roles, permissions, and user fields are returned consistently for admin authentication.

Create a scope middleware to enforce authentication and role-based access, wiring admin and influencer scopes to routes, and validate the user via a dedicated user service before granting access.

Implement authorization by adding a allows method in the user service, mapping ability and arguments to gate checks, updating controllers, and applying admit scope to fetch users.

Move the user controller to the user microservice and expose paginated users through a resource-rich api, formatting with meta, links, data, and page handling.

Refactor the remaining user controller into the user service, implementing get, show, store, update, and destroy, returning a user object with secure password handling.

Remove the user model across the codebase by locating usages in controllers, services, factories, and commands, then refactor to update rankings and align with a monolith-to-microservices approach.

update the user controller to return all users when the page is minus one, else filter by influencers. convert results to a collection and test the rankings update command.

Refactor the user class into a plain class, removing extends, Laravel traits, and unnecessary fields, and implement a user service to fetch roles and manage attributes like full name.

Initialize the checkout microservice within the monolith migration, complete the setup, install the id helper, and prepare changes to finalize the checkout service.

Migrate by removing users and password resets tables, adding migrations for failed jobs, products, orders, order items, links, and link products; set product IDs as unsigned integers primary keys, migrate.

Run docker-compose to set up the migrated microservices, verify database connections, and perform a fresh migration. The session demonstrates checking out configs, migrating tables, and validating the database state.

Import data from the previous project by copying and adapting the product, order, and order item models, then seed the database with linked records using artisan seeders.

Copy and move controllers from the old checkout line controller, adjust names, link resources, remove unused items, and install stripe via composer while updating routes for Laravel 8.

Package and publish a reusable PHP library to Packagist for a Laravel microservices setup, configure Composer and namespace, push to GitHub, and consume via Composer.

Define and dispatch product created, updated, and deleted events via dedicated jobs and an event service provider, wiring them through a queue system to synchronize checkout data and related links.

Add events and listeners and run the queue worker in a docker setup to listen for events, using a queue service and php artisan queue:work.

Publish events to the checkout queue to isolate processing, dispatch product created and link events to checkout, and validate by rebuilding containers and debugging queue handling.

Create the influencer micro service inside the project and navigate to the folder. Install the ID helper and start making changes to the project.

Update and copy migrations, remove users and password reset data, rename admin revenue to influencer revenue, and prepare orders and linked products for the next tutorial in this migration-focused lecture.

Import data by configuring the influencer database, running artisan migrate, and seeding orders and revenue data, then verify the influencer related tables and models align with the new schema.

Refactor the monolith into microservices by restructuring controllers, importing the user service, and configuring resources and links in a Laravel 8 application.

Explore implementing events and listeners in Laravel, wiring an order completed event to multiple queues (influencer, emails, admin) and transmitting full order and order item data.

Explore how Redis orchestrates event-driven updates during monolith decomposition into microservices, handling product changes, cache invalidation, order events, and dynamic ranking updates.