Angular and Laravel: A Rapid Guide - Advanced

Begin by running the command to install Laravel and create a project named Laravel Ambassador. Start the local server to verify the project is installed in the specified folder.

Set up a Laravel development stack with docker and docker-compose, including a php 7.4 alpine container, composer install, and a mysql service with volumes and port mappings.

Connect to the database via docker, configure the port, test the connection, and run migrations to create the user table in the ambassador database.

Build four authentication endpoints under the api slash admin prefix—register user, a second endpoint, get the authenticated user, and logout—and begin implementing them.

Set up the user table and register endpoint, implement an OAuth controller function, map admin routes with the API prefix for admin, ambassador, and checkout roles, and test via Postman.

Register users by building a custom register request to validate first name, last name, email, and password confirmation, then create and hash the user, returning the new resource.

Implement a login function that validates credentials, returns unauthorized on failure, generates a JWT with Laravel Sanctum, and sends it in an http-only cookie for frontend use.

Learn to retrieve the authenticated user via a get request protected by sanctum middleware, extracting the jwt from cookies and setting the authorization header to return the logged-in user.

Implement a logout function by deleting the authentication cookie with cookie forget JWT, return the response cookie, and call a post logout endpoint to verify the user becomes unauthenticated.

Create an admin scope and a custom middleware. Check the scope in requests and abort with unauthorized if missing, update route middleware, and re-login to test changes.

Learn to manage user profiles by updating info and passwords with authorization, updating email, first name, last name, and validating password confirmation.

Learn how to use Laravel local scopes to fetch ambassadors by is_admin = 0, distinguishing ambassadors from admins and simplifying queries in the ambassador controller.

Explore designing a Laravel database diagram that models users, products, links (many-to-many), orders, and order items, and implement endpoints for CRUD operations and data retrieval by user ID.

Create a products api step by step with Laravel: migrate a products table, define a model and api resource controller, implement create, read, update, delete, and seed with a factory.

Build a link model and related many-to-many links with products in Laravel, including migrations, models, a link_product pivot, a link controller, and API routes for user-specific links.

Create and relate orders and order items in a docker container running Laravel, apply migrations with foreign keys, seed data, and implement Stripe transaction verification with admin and ambassador revenue.

Learn to build json resources in Laravel by creating an order resource that returns a concatenated name, a computed admin revenue total from order items, and optional order items.

Explore building ambassador authentication endpoints for the ambassador site, reusing existing functions with minor changes and detailing how to implement them.

Refactor common routes for admin and ambassador by creating a shared function, dynamically setting scope and access control, preventing cross-login, and updating endpoints and middleware for cleaner code.

Compute user revenue by aggregating orders and ambassador revenue, expose it via a user resource, and conditionally merge revenue for ambassador API routes.

Analyze ambassador endpoints, differentiate front-end versus back-end product endpoints, and learn to create links, retrieve link statistics, and rank ambassadors by earnings.

Add front-end and back-end endpoints to retrieve all products, implement pagination, test APIs, and prepare for Redis caching to handle concurrent ambassador requests.

Set up redis with docker, configure env and ports, and cache Laravel products with redis for 30 minutes, demonstrating slow first load and fast subsequent reads.

Implement pagination for Laravel using collections, fetch products in pages, set items per page to nine, compute total and last page, and expose page parameters for frontend.

We implement a product search by filtering with the request input s, using Laravel's contains to match titles and descriptions, and verify the filtered results across pages.

Extend the backend to sort products by price, using request input to choose ascending or descending order and a comparator that returns -1, 0, or 1.

Create a stats endpoint that returns, for each of the authenticated user's links, the link code, purchase count, and total revenue by filtering completed orders.

Sort ambassadors by revenue from completed orders, returning each ambassador’s name and revenue. Use Laravel collection sortBy to rank the ambassadors and cache results with Redis for faster retrieval.

Learn to populate a Redis sorted set in Laravel by ranking ambassadors by revenue, using the update rankings command, and retrieve ordered results with rev range.

Learn how to use Laravel events to invalidate cache on product updates, creation, and deletion by wiring an event, a listener, and the event service provider.

Create links for checkout by implementing a store function that generates a random six-character code and links the logged-in user to selected products.

Implement three checkout endpoints to fetch link information for frontend data, create an order, and confirm an order, with redirection to Stripe and a post-approval confirmation page.

Retrieve link data by code, including user and products via a belongs to many relationship, and fetch related orders; expose them via link and order resources for front end use.

Create and store an order by validating the link, assembling order fields from the request, creating order items for each product, calculating ambassador revenue, and returning the order with items.

Learn how to use transactions to ensure atomic saves of orders and order items, wrapping operations with begin transaction, commit, and rollback to prevent partial data on errors.

Install stripe package, configure publishable and secret keys, and build checkout sessions with line items in Laravel, handling success and cancel URLs and storing the transaction id to finalize orders.

Learn to configure Laravel to send emails after order completion using MailHog for testing, bind SMTP settings, create admin and ambassador email templates, and wire events and listeners.

Install Angular, download and install, then run npm install globally, create the project with routing, and run the dev server on port 4200 to view the running app.

Adapt a bootstrap-based template in an Angular project by adding the bootstrap CSS link to index. Create and refactor components from the email section, generate modules, and skip tests.

Create public and secure modules with routes and login and register components, using router outlets to render nested views. Gate secure routes with a login condition and update paths accordingly.

Adapt the register page using the login form, apply public component styles, build a reactive form for first name, last name, email, password, and password confirm, and navigate to login.

Build the login form with a form group and form builder for email and password, submit to the login api, navigate home, and handle credentials and http-only jwt cookies.

Create a dedicated authentication service in a services folder, move the edp client there, and unify registration and login logic by routing requests through the service with credentials.

Retrieve the authenticated user after login by calling the user endpoint with credentials, define a user interface, and subscribe to the observable to display the first and last name.

Implement logout functionality by calling the logout service, clearing credentials, and redirecting to login through the router, with protected routes via a secure component.

Learn how interceptors attach credentials to all requests by cloning a request and setting with credentials to true, register a credential interceptor, and apply it through providers to every component.

Create a secure profile component in an Angular and Laravel app with reactive forms to update first name, last name, email, and password, via PUT requests.

Explore creating static event emitters in a TypeScript class, emit user data on login and profile updates, and subscribe in components to refresh name and email without extra server calls.

Implement navigation to the users page, highlight the active link, and fetch and display users via a service from the environment API, showing names and emails with actions.

Install Angular Material and select a style, then convert the user table to an Angular Material table by importing mat table modules and defining id, name, email, and actions.

Add pagination to a material table using mat paginator, wire it with a view child, and initialize the data source after the view initializes to paginate users.

Create and view user links with a router links page and a secure links component. Retrieve links via a link service, display in a table, and compute revenue from orders.

Create the product component, add it to the menu, and implement a product service to fetch all products with columns for id, title, description, image, price, and action.

Create a products form component with title, description, image, and price fields, use a form group and form builder, submit via the product service, and navigate to the products list.

Use a single product form to create or update products, distinguished by a data flag and route; fetch data via the product service and call create or update endpoints, redirect.

Implement a delete function for products, confirm before removal, and send a delete request to update the data source and UI.

Create an orders component with a service and interfaces to fetch orders and display them in an expansion panel, showing names, emails, totals, and order items with title, price, quantity.

Set up and configure an Angular project for the Angola ambassador template, adjust port to 4300, bootstrap, serve, and view the app in the browser.

Learn to import data and shared files from the Angular admin project, set up interfaces, models, interceptors, and services, and implement a main module with login, register, and authenticated navigation.

Master dynamic navigation in an Angular app by building a navigation component linked to the main model, handling header and email, and toggling login/signup with the JWT-authenticated user.

Explore building a secure profile page in Angular by creating a shared model, wiring the secure module with authentication, reactive forms, and router outlets to manage access.

Modify the header component to display a dynamic title and description based on user authentication, showing revenue when a user is logged in and login/register prompts otherwise.

Build secure stats and rankings features by creating stats and rankings components, connecting to endpoints with services, and rendering links and revenue in a table.

Learn to fetch backend products via an endpoint, use a product service and subscribe to the result, and render a paginated list of product images, titles, and prices.

Master Angular pagination with http params by controlling the last page, button visibility, and page resets on refresh, and align frontend logic with the backend product data interface.

Add a product search feature and synchronize it with pagination by using query parameters, filtering on the backend, and resetting to page one on new searches.

Sorts products by price in an Angular app using a price select; triggers a sort function, updates query parameters, and syncs with search and pagination for dynamic results.

Learn to implement product selection with a visual border and pointer cursor, using a click listener, a selected array, and isSelected logic to toggle items on and off.

Select products to reveal a generate links button, call the backend link service via the environment API, and display the checkout link for use at checkout.

Advance the frontend by reusing backend logic, calling the product service to fetch products from the environment API, and wiring search, page, and filters with observables and pipes.

Implement and combine angular pipes for filtering, pagination, and sorting of products, wiring them in the main module to slice a product array by page and per page.

Set up angular checkout project, run the server on port 5000, and integrate the bootstrap email template. Remove credit card fields and simplify the checkout form by making email mandatory.

Create and connect a form, success, and error components, wire a link service to call the environment API with a code, and retrieve ambassador data to populate the UI.

Learn how to enable Angular Universal to render the app on the server, improving SEO by delivering server-side rendered content that Google can index.

In this advanced module, loop through products returned by a service, render product details (title, description, price), and add a quantity input to update the total later.

Track quantities with a dynamic array and compute the total by summing product price times quantity using reduce, initializing quantities to zero and updating the total automatically.

Submit a reactive form by building a form group and binding fields, then post a structured order payload (including products with quantities) to the API and process the response.

Configure Stripe in the Angular and Laravel app using the publishable key on frontend and the secret key on backend, load Stripe.js, and redirect to checkout with session ID.