React and Laravel: Breaking a Monolith to Microservices

Install composer and Laravel, name the application, and run artisan serve to start the local server on port 8000.

Install docker and docker compose, create a Dockerfile and docker-compose.yaml, pull images from Docker Hub, configure MySQL with volumes and ports, and run a multi-container Laravel frontend and backend locally.

Create a Laravel get route returning hello, test with postman at localhost/api/hello, then map to UserController@index to display hello and later return users.

Set up and migrate the user table, adjust fields for first name and last name, seed 20 users, then update the API to return all users.

Implement a restful user api in Laravel with index, show, store, update, and destroy endpoints. Handle appropriate status codes, secure passwords, and expose resources via api resources.

Create a Laravel user creation request with custom validation for first name, last name, and a valid email, omitting the password due to default admin-created credentials.

Learn how to implement pagination for rest APIs using Laravel’s built-in paginate function, install a helper package, and test paginated results with page queries.

Implement login and protect routes with Laravel Passport by installing the package, running migrations, updating the user model for API tokens, and configuring Passport routes and guards.

Implement Laravel Passport authentication with an OAuth login controller, validate email and password, return an admin access token for private routes, and respond with unauthorized on invalid credentials.

protect resources with a middleware group, add authorization checks, pass the login token in the authorization header, and ensure endpoints like users are accessible only to authenticated users.

Learn to implement register functionality via a post request, create a user with a hashed password, and validate first name, last name, email, and password confirmation.

Explore implementing three user routes in the front end connected to the logged-in user: get current user data, update user info, and update password, via the user controller.

Learn to implement roles in a Laravel api by creating a roles table and model, building an api resource and controller with CRUD endpoints, and testing with Postman.

learn to add a foreign key in laravel by creating an unsigned big integer on users, run migrations and rollbacks, seed roles admin and viewer, and randomly assign roles.

Define and expose user data with API resources in Laravel, linking users to roles, formatting fields like id, first name, last name, email, and role, and returning collections with pagination.

Create the products table with title, description, image, and price columns; generate the model, controller, factory, and seeder, then populate and verify 30 seeded product records.

Implement product routes by creating a product resource with title, description, image, and price, and wiring index, show, and destroy methods in the product controller.

Learn to implement product store and update with image uploads by moving files to the public folder, generating a random filename, storing the url, and creating the product.

Create an image controller with an upload method that returns the image URL via a separate route, and refactor product create and update requests to use that URL.

Create orders and order items tables with migrations, define models and factories, and seed 30 orders with 1–5 items each, including first name, last name, and email.

Create an order resource and order item resource, define has many and belongs to relationships, expose index and show API routes, and verify orders and items via requests.

Calculate the order total by summing each item price times quantity using Laravel's getTotalAttribute accessor, exposing it as a property in API responses.

Learn to export orders to a csv file by building an export function. Set headers for a text/csv attachment and stream header and body rows from orders and order items.

Define and seed a permissions table and a role_permission pivot to map permissions to roles, enabling admin to have all permissions, editor partial, and viewer limited access.

Create and manage permissions alongside roles by implementing a belongs-to-many relationship with a pivot table, attaching and updating permissions via an array, and testing via Postman.

Learn to expose per-user permissions in Laravel by adding a dedicated resource field and a permissions function on the user model, preventing leakage into other requests.

Create a permission controller and a permission resource, then implement an index function that returns a permission resource collection for the API and expose it via the permission controller.

Learn to implement Laravel gates to restrict route access based on view and edit permissions, define gates in the service provider, and enforce authorization with has access checks.

Add gates to controllers and authorize requests, including a gate that allows edit on users, and choose whether to implement the gate in the request.

Build a dashboard chart in Laravel by joining orders with order_items, grouping by created date, and calculating the daily total from quantity times price, exposed via an API route.

Use an httpOnly cookie to store the JWT, keeping the front end from accessing it. Backend reads the cookie to authenticate requests and handles login and logout with cookie management.

Install react by downloading and installing, open the terminal to create the app, name it React Admin, add the typescript template, and run start to launch the project.

Explore integrating a bootstrap dashboard template into a React and Laravel project, converting HTML to React with className, ensuring proper div structure, and updating index for a polished UI component.

Split the e-mail into reusable react components by creating a navigation component, a menu, and a dashboard in tsx. Import, export, and integrate these components to build a modular app.

Learn to structure authenticated routes in a React and Laravel monolith by creating a secure directory, adding dashboard and users components, and wiring navigation with react-router-dom to switch between pages.

Explore handling child props in React within a Laravel-backed monolith migration, by building a login form, structuring public and secure routes, and wrapping dashboards with a reusable wrapper.

Build a React register form with first name, last name, email, password, and password confirmation, wiring state and handlers, and prevent default on submit to register a user.

Send data to the server using axios, first with a post request to local register endpoint, then with an asynchronous await approach for cleaner code.

Learn how to redirect from the registration form to the login page in a React app by importing the redirect component, using state to trigger navigation after successful registration.

Implement a login flow by capturing email and password, posting to the login API, storing the returned token in local storage, and redirecting to the dashboard after authentication.

Demonstrates implementing logout in a React component by clearing local storage, redirecting to the login page, and updating authorization headers after login to fix the old one.

Build a users dashboard in a React and Laravel microservices migration by fetching user data with axios, defining a TypeScript user class, and rendering a name, email, and role table.

Introduce a role and permission model in a React and Laravel app, with role and permission classes, user-role linking, and UI actions to create, edit, or delete users.

Implement Link and NavLink in a React app to navigate to dashboard and users. Fix active highlighting, adjust routing, and redirect the main page to the dashboard.

Add pagination to load more users by updating a page variable and fetching users per page, with next and previous controls that respect first and last pages.

Confirm before deleting a user, then call axios delete with the user id and refresh the table by filtering out the removed user.

Create a user form in the users component, fetch and display roles in a dropdown, handle input changes, submit to create a user, and redirect to the users list.

Prefill user data in an edit form by fetching by id, reusing the create form, and syncing first name, last name, email, and role with component state for editing.

Update users by handling the submit and redirecting after save, preserving unchanged fields with default input values bound to state to ensure correct first name, last name, email, and role.

Create a roles page in the secure folder, fetch and display roles in a table with id and name, and implement create and delete actions with confirmation.

Create roles by fetching permissions from the server, render them as checkboxes, and submit with a name and selected permissions, then redirect to the roles page.

Update the roles interface by building a role added component that mirrors the create flow, prefill data, and update the role with selected permissions via put requests.

Create the products component and folder, fetch products with axios, map them into a table showing title, description, image, price, and actions, and implement a delete function to remove items.

Learn to implement a reusable paginator component to enable product listing pagination, manage page state and last page via props, and refactor page change handling for user and product lists.

Create a reusable deleter component for delete actions by extracting id and endpoint props and wiring a shared delete function. Apply it across products, users, and roles, updating state.

Create a product form in a React and Laravel setup, handling title, description, price, and image uploads, submitting to a products endpoint and redirecting on success.

Upload images by handling file input, creating form data, and posting with axios to the server. Use the response url to update and display the image, then save the product.

Build a reusable image upload component in React, wiring a string value prop and an on-change callback to propagate image updates to the parent component.

Update the product via the added component and product edit page in TSX, fetching data with axios and preloading title, description, image, and price into state.

Create an orders component in the secure folder, fetch orders, and render them in a table with pagination. Add navigation to orders, enable viewing order items, and adjust headers.

Create an order items component and an order item class with product title, price, and quantity; get order items using the order’s id and render them in a table.

Implement a client-side csv export by calling the export API with axios and handling a blob response. Create and click a temporary download link to save orders.csv.

Install and configure the C3 chart library in the React dashboard, render a time-series bar chart of daily sales using axios-fetched data, and map records to date and sales values.

Display the current user's first name and last name in the navigation and link to a new profile component for updating personal data.

Update profile information and password using two forms, including first name, last name, email, password, and password confirm, with axios put requests and redux to prevent repeated calls.

Learn to set up Redux in a React app by creating actions and reducers, configuring the store, and dispatching a setUser action to immutably update state with a provider.

Connect a component to redux using mapStateToProps and mapDispatchToProps, dispatch the set user action, and share the user data across components such as the nav and profile to reflect updates.

Implement a TypeScript getter for the user’s full name that behaves like a property and updates in profile navigation by properly instantiating the user.

Enable permission based access control in React and Laravel by checking view_page permissions and using can edit to reveal add, edit, and delete actions for users and products.

Learn to login with httpOnly cookies in a React and Laravel monolith to microservices transition by removing local storage, enabling credentials in requests, and implementing logout that clears cookies.

Rename the container and database to influencer, create the influencer schema, run php artisan migrate to seed the database, and enable functionality in the Laravel project inside the Docker container.

Add an admin prefix to API routes to isolate admin APIs, while login and register remain unprefixed, with admin and influencer separated by scopes later.

Organize the codebase by moving controllers into an admin namespace folder, removing redundant controllers, and aligning namespaces so endpoints work, paving the way to add influencer controllers and APIs.

Create an influencer product controller within the influencer folder, add an index function to return all products, update API routes with influencer prefix and namespace, and verify results in Postman.

Explains implementing a product search filter using query string parameters to filter by title and description with like conditions, returning a Laravel resource for a React and Laravel microservices app.

Group common, admin, and influencer routes (including login and register) and apply authentication middleware for API access; refactor user routes from the user controller to an OAuth controller.

Extend the user model and API by adding an is_influencer field, updating the register flow for influencers, and using conditional user resource attributes to differentiate admin and influencer data.

Create and seed a user_roles table to replace the real role id, wire migrations, models, and controllers to has one through relationships, and drop the old role id.

Explore how Laravel Passport scopes enforce role-based access in a React and Laravel microservices transition, using middleware, token scopes (admin vs influencer), and conditional login.

Explore building an influencer link system in Laravel: create links with unique codes mapped to users, set up a many-to-many link products relation, and return a link resource for checkout.

Create a checkout link controller with a show method that fetches a link by code. Return the associated user and products as resources through the API route for checkout links.

Extend the orders table with shipping address and influencer fields, then create orders and order items via a store method, calculating influencer and admin revenue shares.

Implement database transactions to atomically insert orders and order items, ensuring both are saved or none on error, using begin transaction and commit in the checkout flow.

Install the stripe package, configure test keys, create a checkout session with line items, and store the session id in the order table while redirecting front end to Stripe checkout.

Implement order confirmation by posting to orders/confirm, locate the order by the request source, set order_complete to 1, save, and return success; throw 404 if not found.

Create and send two emails to the admin and the influencer when an order completes, using Blade views, mail catcher, and dynamic order totals in a Laravel setup.

Refactor email sending by using events and listeners: create an order completed event, fire it after saving an order, and notify admin and influencer via separate listeners.

View influencer revenue by adding a revenue attribute to the users model, retrieving complete orders by user id, and exposing revenue via the influencer endpoint.

Explore building a stats endpoint in laravel to calculate per-link revenue by querying user links, orders, and leveraging collection map and count functions, for influencer analytics.

Learn how to generate influencer rankings by revenue in Laravel: fetch influencer users, calculate revenue from completed orders, map to name and revenue, and sort descending for a clean leaderboard.

Learn how Redis reduces latency in revenue computation by replacing file caching with Redis, installing Redis, updating the cache driver, and restarting Docker Compose to enable a ready service.

Accelerate the products API by caching with Redis, first checking the cache and returning results, then using Laravel remember with a five-second TTL.

Update a product triggers a product updated event that flushes the cash, refreshing data immediately instead of waiting for expiry. Implement an event listener to invalidate the product cash.

Replace a database query with collection filtering on products, filter by title or description containing the search term, and clear the cache to reflect updated results.

Learn how to use Redis sorted sets to maintain real-time influencer rankings by revenue, update rankings with a Laravel command and event listener, and query sorted results without cache clears.

Organize nested routes by grouping admin and influencer prefixes under shared common ground, using namespaces and middleware to separate public and authenticated paths, simplifying the front end.

Change the basic URL and the API slash to admin, adjust the TSX logging, and set the scope to admin to enable admin functionality.

Set up the react influencer project with a TypeScript template and run on ports 3000 (admin) and 3001 (app), then update className and the default email.

Create and organize four components, including a navigation header and the main page, in a pages folder using a TypeScript TSX file; import components and define props with children.

Learn how to configure routes in a React and Laravel migration, install react-router-dom, adjust index and components for login and register, and test user flows.

Integrate redux to manage the logged-in user and update the navigation in a React and Laravel project, configuring the store and provider with react-redux.

Learn how to use the useEffect hook to fetch a user with axios, handle async calls inside React components, and wire the result to Redux state for display.

Build and refine the navigation component to show different links for logged in and logged out users, including a logo button, profile link, and logout behavior with local storage handling.

Update the header component to show dynamic title and description based on user login using useState and useEffect, with conditional login or start buttons.

Fetch products via axios, store them in state, and render each product’s image, title, and price in the main component.

Create a rankings feature in React and TypeScript by fetching rankings from an API and rendering a table of name and revenue with a zero-based index, wired into navigation.

Develop and manage environment-specific endpoints by creating a TypeScript constants file, exporting default constants, and toggling between development and production based on the environment.

Selects products by toggling a numbers array of selected IDs and applies a blue border when an ID is in the array, using click handlers and a select function.

Create a Next.js project, convert it to TypeScript by adding tsconfig and ts files, install TypeScript and React types, run the server, and verify a working TypeScript project.

Set up a checkout template with a reusable layout, refining the form to include first name, last name, email, city, state, and zip, while removing extra fields.

Retrieve route query parameters from the url to render dynamic code on the home page, using the pages and router, and demonstrate how updating the url changes the displayed code.

Learn to fetch data from an API in a React and Laravel workflow by installing axios, using useEffect, handling user and product data, and rendering product details.

Add a quantity input for each product and automatically compute the total from price and quantity using per-product state managed with use state and a change handler for Stripe payment.

Build a Stripe checkout flow in a React and Laravel app by managing form state for personal details and product quantities, posting to the server, and redirecting to Stripe checkout.

Explore building a success page in a React and Laravel microservices setup, sending a confirm order request via axios to the backend, using routing and source data.

Split into micra micro services by creating a micro services directory, moving angular influencer to front, and creating a Laravel emails microservice with views for event-driven sending via Rabit MQ.

Learn to integrate RabbitMQ with Laravel using the Rapidan Q package, configure host, vhost, credentials, and queue, address memory limit and version compatibility, and fire an event.

Fire events in Laravel by creating a command and dispatching a RabbitMQ job, subscribe to RabbitMQ, and process with a queue worker, passing email data between apps.

Move emails to a dedicated email microservice by dispatching admin added and order completed events, adapting payloads to arrays, and verify with mailhog.

Explore a Docker-based setup for a Laravel microservices workflow, configuring Docker Compose, databases, environments, and migrations to run and test email-related services.

Set up the users microservice in the Laravel backend, install the ID helper package, and create the user table with first name, last name, email, password, and influencer status.

Create and configure docker files and docker compose to run the users service, run artisan migrate to set up the database, and prepare the API.

Install and configure Laravel passport for the user model, define scopes like influencer, and update the service provider, handling docker volume updates and migrations during setup.

Move the auth controller to microservices, refactor login and register flows, remove the user resource, adjust routes and api calls, and update front-end endpoints to align with the new architecture.

Learn how to import user data from a Laravel database into another service to fix admin login credentials, using a seeder and real database connections to seed users.

Demonstrates making authenticated requests across Laravel microservices, handling tokens and authorization headers, troubleshooting unauthenticated responses, and refactoring middleware to access the user API.

Create a user service to encapsulate user-related logic, implement get user, return a user object with roles and permissions, and verify admin authentication across requests.

Implement a scope middleware to enforce admin and influencer access, authenticating users via a user service and gating routes with admin and influencer scopes.

Update the user service with a new allows method, using ability and argument to authorize specific users and replace gate checks with direct service authorization across microservices.

Move the user controller to the user microservice and expose a paginated index using a resource to format meta, links, and data, with a page parameter.

Refactor the user controller into a microservices approach by introducing the get and path user methods, and implement show, store, update, and destroy operations while migrating user data across services.

Remove the user model across the monolith, including the user controller, token command, and user factory, while updating rankings usage and service provider references for the next tutorial.

Filter users by influencer in a laravel app and fetch all users when page equals -1, using a user service and testing update rankings.

Refactor the user model into a normal class and remove Laravel traits and fields. Implement a dedicated function to retrieve the user's role and replace the old controller logic.

Create the checkout microservice in the groceries folder, install the id helper, and complete the setup before applying changes to break the monolith into microservices.

Execute migrations to remove users and password resets, add product, order, order_items, links, and link_products, and convert product IDs to unsigned integer primary keys before running docker migrations.

Import data from the previous project by copying product, order, and item models, cleaning up links, and seeding the database with linked product and order data.

Import and copy controllers from the old monolith, rewire routes and resources, and install stripe via composer to prepare Laravel 8 microservice-ready controllers.

Learn how to upload PHP libraries to Packagist by creating a shared common package for microservices, configuring Composer, publishing to GitHub, and releasing version 0.0.3.

listen to events from other services and dispatch jobs for product created, updated, and deleted, plus link created, using a queue system with rabbit and event service provider.

Add events and listeners and run the queue as a background service. Use artisan queue:work in a dedicated docker service and fix the admin audit job conflict with checkout.

Publish product events to the checkout queue to isolate processing from the default queue, update controllers to dispatch on checkout queue, restart containers, and verify with a fire event command.

Create the influencer microservice within the new project, then navigate to the folder and install the id helper. Begin making changes to the project to prepare for a microservices architecture.

Explore migrations to break a monolith into microservices, keeping only essential fields such as code, user id, and influencer revenue, while linking products and orders.

Run artisan migrate to create influencer tables, adjust seeders and models, import data from the monolith, and verify influencer revenue fields and order items.

Refactor controllers in a Laravel-based migration by removing the old controller and wiring the user service with influencer and user resources. Remove unused resources and align with a microservices approach.

Implement events and listeners in a Laravel setup, dispatch order completed events with order items to the influencer, emails, and admin queues.

Learn how Redis is used for cache invalidation in a breaking monolith into microservices, updating rankings when orders are created, and refining service interactions.