React, NextJS and NestJS: A Rapid Guide - Advanced

Create a NestJS project with the nest cli, name it nest ambassador, and run it locally to view HelloWallet at localhost:3000.

Containerize a Next.js app with docker by creating a dockerfile and docker-compose.yaml, using node 15.4, npm install, and run docker-compose up to map host port 1000 to container 3000.

Connect to a dockerized my school database by creating a db service, configuring environment variables, volumes, and port 3306, and connect to an empty ambassador database with MySQL Workbench.

Install and configure TypeORM, connect to a local database, and generate user entity, model, controller, and service to create a users table with a unique email and ambassador default.

Explore admin authentication endpoints by implementing six endpoints: register, login, get authenticated user, logout, update own information, and change password.

Create a NestJS register endpoint using a data transfer object, controller, and service, and enforce field validation with class-validator and a global validation pipe.

Inject the user repository and service, validate password confirmation, hash the password with bcrypt using 12 rounds, and save the new user with isAmbassador false.

Describe a login flow that authenticates a user by email and password, issues a JWT, and stores it as an HttpOnly cookie, with cors and credentials enabled for front-end ports.

Learn to fetch the authenticated user by reading the jwt cookie, verify with a jwt service, and return the user without the password using a serializer interceptor.

Implement logout by sending a post request that clears the jwt cookie and returns a success message, guarded by an oauth guard to ensure only authenticated users can log out.

Update your own profile via admin/user/info to change first name, last name, and email using cookie and JWT authentication. Also update password via admin/user/password, validating and hashing the new password.

Build admin endpoints to manage products with get all, create, update, and delete operations; add a links model retrievable by user ID and fetch orders and ambassador users.

Fetch all ambassadors from admin/ambassadors using the user service find with ambassador true. Seed 30 ambassadors via a Faker-based standalone command run in Docker, then remove passwords.

Implement a full product management module by adding product entity, repository, and admin endpoints. Create, read, update, delete, and seed products via controller and service.

Model orders and order items as entities with fields for customer data, a default incomplete status, and a 90/10 revenue split, establishing one-to-many and many-to-one relations for an api endpoint.

Wires the order and order-item services and repositories to seed 30 orders with 1-5 items each, and exposes an admin/orders endpoint to retrieve all seeded data.

Expose order fields by returning order items, concatenate first and last name into name, exclude complete columns, and compute the order total with reduce for admin revenue via serializer interceptor.

Define a link entity with relationships to user and products, implement a join table link products for a many-to-many relation, and expose a get endpoint to fetch an ambassador's links.

Explore a one-to-many relation between links and orders without a database foreign key, using a join column and a reference column name, and disable foreign key constraints in NestJS.

Create and export a shared JWT model in the shared folder, then integrate it across admin endpoints like link, product, and user models to ensure authenticated access.

Explore ambassador authentication endpoints, mirroring admin endpoints while renaming them and adjusting functionalities, and then analyze how these changes affect integration when combining endpoints.

Implement multiple routes by introducing ambassador and admin endpoints, updating register logic to distinguish user types via request path and scope, enabling two login flows.

Implement scope-based access with JWTs: embed user id and scope (admin or ambassador), guard endpoints, and return forbidden or unauthorized when roles mismatch.

Implement revenue calculation for ambassadors by aggregating completed orders, return ambassador revenue in user data, manage relations and orders with order items, and support admin and ambassador views.

Explore ambassador endpoints by returning products on the front end with client-side filtering and via the API, then create and manage links to compare revenue by ambassador rankings.

Add a Redis service to the docker compose setup, install Redis, configure cash manager and register, and connect the shared model to Redis.

Implement product caching in the NestJS app by adding front-end and back-end endpoints, applying cache decorators, cache interceptor, and the cache module, using a 30-minute TTL with a cache manager.

Learn how to use event emitters to invalidate caches and propagate product updates in NestJS, creating listeners for updated, created, and deleted events to keep frontend and backend in sync.

Learn to implement a case-insensitive product search in the back end by filtering products with a request query, matching both the title and description.

Sorts products by price in ascending or descending order based on a query parameter, using a comparator that returns -1, 0, or 1 and a sign calculation.

Paginate products by slicing the product list according to page and per page, with a default page of one and nine items, and calculate the last page from total.

Create authenticated ambassador links by posting to a links endpoint, generating a unique code, and associating the authenticated user with a list of product ids.

Fetch authenticated user links from ambassador and map them to include completed orders, then compute total ambassador revenue using a reduce function to generate stats.

Create ambassador rankings by revenue via the ambassador rankings endpoint, map ambassadors to their revenue, and discuss joining users and sorting, including Redis sorted sets for future use.

Learn to use redis sorted sets to rank ambassadors by revenue scores. Populate the set and retrieve descending rankings using rev range by score in a TypeScript service.

Format ranking data by mapping results to a name-revenue object, using reduce to accumulate, and output users sorted by revenue in descending order.

Create three checkout endpoints: retrieve data with a coded link to create the order, implement the second endpoint for creation, and update the database after Stripe confirms.

Fetch the link data by sending a get request to the checkout endpoint with the code parameter, returning the link, related user, products, and the password removed from the response.

Create an order through the order controller by posting a body with user details and product items, validate the link, then assemble order items and compute ambassador revenue.

Learn how to use database transactions to atomically insert an order and its items, using a query runner, try-catch, and commit or rollback to ensure none are saved on error.

Install and configure Stripe, inject the Stripe client with the API key, build line items from products, and create checkout sessions with success and cancel URLs.

Create an environment variable file and a global config service to manage constants like the checkout URL and stripe key, then inject it into the order controller and service.

Learn to confirm orders via a post request, update the order to complete, and trigger ranking updates using a redis service and order completion events that email ambassadors and admins.

Configure a mailer with mailhog in a docker app, set host and port 1025, and send admin and ambassador emails for completed orders with totals.

set up a react project with TypeScript, create an admin app, open the project in the IDE, and start the dev server on port 3000.

Learn to integrate a Bootstrap dashboard template into a React project, customize the UI by stripping extraneous elements, and create two reusable components for header and menu in TypeScript.

Develop an e-mail template and a signing form by scaffolding three pages (login, register, users) in a pages folder, and map them with React Router to render routes.

Register a user using a React class component, managing first name, last name, email, password, and password confirmation with state; post via axios to /admin/register and redirect to login on success.

Build a login form with React hooks, using useState for email and password, handling onChange, submitting via axios post to the login URL with credentials, and redirecting after login.

Fetch the authenticated user using a JWT cookie, wrap admin components in a reusable layout with navigation and a user table, and redirect unauthenticated users to log in.

Pass the authenticated user through the layout to navigation using a TypeScript user interface, and implement a logout flow that redirects to the login page.

Fetch ambassador users after authentication, build full names from first and last names, display them with emails in a table, and route the main page to /users.

Install material ui, add the raboteau font, and convert a table to material ui components like table, table head, and table body. Fix headers and keys; prepare for pagination.

implement table pagination in a react app by configuring count, current page, and per-page slices; fix ten items per page and handle page changes with state.

Create a link model and related page and components, wire up state and routing to display links per user, and compute total revenue from orders using reduce.

Create a products page with folder and component, define a product type, and use state to fetch, display, paginate, and delete products in a table with image, title, description, price.

Create a product form for creating or editing products, using material UI fields for title, description, image, and price, handle submit, and redirect after creation.

Add an edit button with a toggle button group and install a UI library. Reuse the product form for both create and update via products/edit, with data fetch and prefill.

Create an orders page using two models, order and order item, display orders in an accordion, and show order items in a table with product title, price, and quantity.

Create a profile page with a profile component, featuring two forms to update user info and password, with prefilled fields and submit handlers.

Set up Redux in a React project by creating actions and reducers to manage user state with immutable updates, then configure the store and wrap app with the React-Redux provider.

Learn how to integrate Redux in a React app, connect the layout and profile components, map state to props and map dispatch to props, and manage user data via actions.

Set up the ambassador project by changing the port to 4000, integrating a bootstrap template, and creating header, layout, and products components; configure react-router-dom to route to the products page.

Explore creating and wiring common Redux files and components for an ambassador-oriented React app, including models, store configuration, login and registration pages, and routing.

Learn to build a dynamic navigation header that shows the authenticated user, links to profile and logout, and uses redux for authentication state and login/signup routing.

Fix the header component by wiring use state for dynamic title and description, linking login and register, and using Redux to show earned revenue when a user is authenticated.

Create and display stats and rankings pages by fetching starts data from the server, rendering tables with starts and revenue, and linking to checkout; use object keys for rankings.

Build a product page in a React, Next.js and NestJS setup by implementing navigations, active states, and a reusable products component that fetches data and renders product listings.

Implement a product search by wiring a search input to a filters state, pass it to front end and back end, and filter products by title and description case-insensitively.

Sort products by price in an application using a dropdown to choose ascending or descending, with a sort string in filters and synchronized back-end and front-end logic.

Implement lazy loading with pagination for product lists by increasing the page on a load more button, concatenating new items with the spread operator, and using slicing and last-page logic.

Learn how to implement product selection in a react app by toggling a selected array with product ids, updating styles to indicate selection, and removing items when deselected.

Select products and generate links with a generate button, handling notifications and alerts for success or error states. Auto-hide the notification after a timeout to keep the user interface clean.

Create a Next.js checkout app, convert pages to tsx, and configure typescript with a tsconfig. Install typescript and typescript react, and set app to run on port 5000 for Stripe.

Integrate Bootstrap into a Next.js project, adjust the template, remove unnecessary inputs such as credit card and address, and finalize a clean checkout form with proper structure.

Learn Next.js routing by creating static and dynamic pages, implementing a shared layout, and extracting a code from the URL to render success or error pages.

Fetch ambassador and product data in a React app with axios and useEffect, then render user details and product list with quantity inputs using defined endpoints.

Learn how to initialize product quantities to zero, update them with a change handler, and compute the total by reducing over products price times quantity.

Learn to submit a form by syncing inputs (first name, last name, email, country, city, zip) to lowercase underscores, handling onChange, and posting orders to the backend with product quantities.

Learn to integrate stripe payments by loading stripe.js, using the publishable key, and redirecting to checkout with a session id.

Learn how to confirm an order by sending a backend request to /orders/confirm with the source from the success page, handling the async response to complete checkout.