React, Next.js and Laravel: A Rapid Guide - Advanced

Run the Laravel install command to create a new project named 'Laravel Ambassador', explore the project folder, and start the local server to verify that the project is installed.

Connect to a database in Docker environment, configure port and host, then test the connection. Run migrations to adjust user table, add is_admin and remove fields in Docker container.

Create authentication endpoints under the api/admin prefix, including register user, get authenticated user, and log out.

Explore routing and admin registration in a Laravel API, defining an OAuth register function, mapping routes, and testing with Postman to register admin users.

Register new users by validating first name, last name, email, and password confirmation with a custom register request, hash the password, and return the user as json.

Register and login users by sending email and password, handle failures with unauthorized responses, generate a jwt via Laravel Sanctum, and store it in an http-only cookie for the frontend.

Set up a cookie-based authenticated user flow by wiring middleware and sanctum, reading the JWT from cookies, and forcing the authorization header to return the authenticated user.

Log out users by deleting the authentication cookie, use a post logout endpoint with cookie forget JWT, and verify unauthenticated state after the request.

Learn how to manage a user profile by updating personal information and passwords, including email, first name, last name, and password confirmation through authorized requests.

Learn to use a Laravel local scope to fetch ambassadors by is_admin = 0 and apply it in the ambassador controller for cleaner, reusable queries.

Create a database diagram for products, links, orders, and order items, illustrating a many-to-many relation via a linking table, and implement Laravel endpoints for products, links by user, and orders.

Create a Laravel link model and a link_product pivot to relate links and products in a many-to-many setup. Implement slug and user_id foreign keys, and expose a users/{id}/links API route.

Create and migrate orders and order items, store Stripe transaction IDs, and normalize fields; build one-to-many relations, seed 30 orders with 1–5 items, and compute admin and ambassador revenue.

Explore ambassador authentication endpoints for the ambassador site, adapt existing functions with minor changes, and implement end-to-end authentication and points flow.

Learn to consolidate admin and ambassador routes using a common function, dynamic scope, and path-based access control for register and login in a Laravel API.

Retrieve user revenue by aggregating revenue from user orders, including ambassador revenues, and expose revenue data via the user resource based on the user type.

Explore ambassador endpoints, build five points, and distinguish front-end versus back-end endpoints by how they handle products; retrieve link stats and rank ambassadors by earnings.

Configure redis via docker and expose port 6379. Enable Laravel caching and store products with a 30-minute cache period, then verify quick cache hits.

Implement Laravel pagination for the products collection by paginating with the requested page and nine items per page, returning total and last page for the front end.

Learn how to implement product search by filtering with a request-based search term, using a Laravel contains function to match titles and descriptions, and observe how results update with pagination.

The lecture adds price-based sorting for products, using a request input to switch between ascending and descending orders and implementing a comparator that compares A.price and B.price.

Create a stats endpoint that retrieves each user’s links, maps them to include code, purchase count, and revenue by aggregating completed orders.

Create and run a Laravel command to add ambassadors to the Redis sorted set for rankings. Sort by revenue as the score and fetch ordered results for display.

Learn how to use Laravel events and listeners to invalidate cache on product updates, creations, or deletions by firing a product updated event and clearing cache keys.

Create checkout links by implementing a store function that uses the logged-in user id, generates a random six-character code, and associates product ids with the link.

Explore checkout endpoints to fetch link information for populating front-end data, create and confirm an order, and redirect to Stripe for payment before returning to a confirmation page.

Retrieve link data by code and return related user, products, and orders; switch products relation from has many to belongs to many; configure checkout route and resource collections for front-end.

Create and store orders in a Laravel-based API, validate the link code, capture user and ambassador data, build order items with products and quantities, and compute ambassador revenue.

Learn to integrate Stripe in a Laravel app using the Strib package: install, configure publishable and secret keys, create a checkout session with line items, and test the flow.

Confirm an order via the order/confirm endpoint by using the confirmation source; if not found, return 404, otherwise set order_complete to 1, save the order, and email admin and ambassador.

Configure and test sending emails in a Laravel app with MailHog, binding SMTP, triggering an order completed event, and dispatching admin and ambassador emails via Blade templates.

Create a React admin app with a TypeScript template, open the project in the IDE, and start the app on port 3000 to complete the setup.

Add a Bootstrap template to the app, refine the dashboard by removing extras, and create two TypeScript components: header and menu, then import navigation and wire them into the index.

Set up a router-based interface by creating login, register, and users pages and configuring react-router-dom routes. Install and import react-router-dom, then apply the signing form template to the login page.

Create a login form with React hooks to manage email and password via useState, post with axios including withCredentials, and redirect to the users page on success.

Fetch the authenticated user via a jwt cookie by wrapping components in a shared layout, using useeffect for a one-time request, and redirecting unauthenticated users to login.

pass the authenticated user through layout and navigation with a TypeScript interface, manage state with useState, and implement logout via axios post with redirects to profile and login.

Fetch ambassador users via an api, manage them with state, and render a users table showing name and email, with a redirect to the /users page.

Install Material UI and add the Raboteau font, then convert a table to a Material UI table using core components like Table, TableHead, TableBody, and TableCell in a TypeScript setup.

Add pagination to the table by defining count, page, and per page, slice the users from start to end indices based on page and per page.

Develop and manage ambassador links by building a link model and a links page with a table layout and stateful navigation for creating orders.

Build a products page with a products component, fetch and paginate products, display in a table, and implement delete with confirmation syncing to the server.

create a product form component to add new products and reuse for updates, collecting title, description, image, and price, submit to the server, and redirect to the products list.

Reuse a single product form for create and edit, fetch and prefill data on edit, and submit updates; use the lab toggle button group with edit/delete buttons.

Create an orders page with order and order item models, and present orders in an accordion showing a summary (name, total) and a details table of items (title, price, quantity).

Integrate redux into the react project by creating actions and reducers for user state, configuring the store, and wrapping the app with the react-redux provider.

Learn to integrate Redux in a React app by wiring layout and profile components with connect, mapStateToProps, and mapDispatchToProps, manage user state, and dispatch actions to update user data.

Set up a React project on port 4000 and install core packages. Create a layout, header, and products component, and configure react-router-dom routes for the ambassador app.

Copy common components and redux files from other reactors, modify models for orders and order items, and set up redux store with provider, including ambassador login and register pages.

Fix the header component to render dynamic titles and descriptions with useState and useEffect, toggle login and register links, and show earned revenue when the user is authenticated via redux.

Implement a live product search by wiring a search input to a filters state, filtering backend results by a case-insensitive title and description.

Implement a price-based product sort with a dropdown, integrating sort into filters for both front-end and back-end in a React, Next.js and Laravel rapid advanced guide.

Learn how to implement lazy loading and pagination for product lists, manage front-end and back-end filters, and dynamically load and concatenate items with page, search, and last-page logic.

Enable click-to-select for products by maintaining a selected array of product IDs in state and toggling items with a select function. Show selection with a border using conditional class names.

Select products, generate links via a back-end call, and manage user feedback with a notify object (show, error, message), using try/catch and finally to clear alerts after a timeout.

Set up a Next.js checkout project with TypeScript, install TypeScript and React types, convert pages to tsx, and configure port 5000 to enable Stripe integration.

Adapt a template for a Next.js project by cleaning up the form, removing unused inputs and sensitive fields, integrating Bootstrap, and preparing a Stripe-ready checkout layout.

Create success and error pages with a shared layout in a Next.js app. Use a dynamic [code] route and useRouter to capture the code and fetch backend data.

Fetch the ambassador name and product list with useEffect and axios, manage user and products state, and render product details with a quantity input and zero minimum.

Initialize all product quantities to zero, update them with an on change handler, and compute the order total by reducing the product price times quantity across the products in React.

Set up a form collecting first name, last name, email, country, city, and zip, normalize inputs with on change handlers, and submit to /orders with product quantities and stripe data.

Learn to integrate Stripe in a React app using the publishable key and Stripe.js, create a checkout redirect with a session ID, and handle success and error pages during testing.

Confirm the order by sending a backend request to /orders/confirm with the source data. Use an asynchronous function with await on the success page to complete checkout.