Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced

Create a NestJS project with the Nest CLI, name it Nest Ambassador, install dependencies, and run the dev server to see HelloWallet at localhost:3000.

Add docker to your project by creating a dockerfile and docker-compose.yaml, use node:15.4, run npm install and npm run start dev, and map host 1000 to container 3000 with volumes.

Deploy my school service from Docker Hub version 5.7.22, configure restart always, set environment variables and volumes for db data mapping to VAR Lib Maskew, and expose port 3306.

Install TypeORM to connect your app to a database, configure host, port, and credentials, and generate user entity, controller, and service to create a user table.

Design and implement six admin authentication endpoints, including register, login, get authenticated user, log out, update profile with first name, last name, and email, and change password.

Create a NestJS register endpoint with a dto for first name, last name, email, password, and password confirm, using class-validator and a global validation pipe, tested with Postman.

Implement user registration by injecting a user repository, validating password confirmation, hashing the password with bcrypt, and persisting the new user via the user service.

Implement a login workflow with email and password, validate user existence and credentials via post to admin/login, generate a JWT, and secure it as an http-only cookie for front-end use.

Authenticate the user by extracting the JWT from cookies with Kookie Pather, verify it with the JWT service, fetch the user, and exclude the password via the serializer interceptor.

Implement a logout function that clears the JWT cookie via a post request to /admin/logout, guarded by an OAuth guard that verifies the JWT and prevents unauthenticated access.

Update your profile and password through authenticated endpoints: put admin/user/info to change first name, last name, and email, and put admin/user/password to validate and confirm the password.

Master admin endpoints to manage products with create, update, and delete actions, retrieve user links via a new links model, and get orders and ambassadors.

Fetch all ambassadors via the admin/ambassadors endpoint using the user service find, and seed 30 fake ambassadors with the faker library in a standalone docker command, then remove passwords.

Build and manage products by creating a NestJS product module with entity, controller, and service; implement CRUD endpoints for admin/products and seed sample products.

Create order and order item models, controllers, and services; define entities with customer fields and a one-to-many relation linking items to orders.

Seed orders and order items by wiring order and order item services and repositories, expose admin/orders to fetch all orders with faker-generated data.

Expose orders with their items and a joined name field by concatenating first and last names via a serializer interceptor; compute order total and admin revenue by reducing over items.

Create the links feature by building the link model, controller, and service; define a links entity with a unique code, connected to a user and products via a join table.

Connect links and orders through a one-to-many relationship by configuring a join column and a reference column name, and enforce a foreign key constraint.

Create and export a shared JWT model, integrate it into admin endpoints, and enforce authentication across the link, order, product, and user models.

Study ambassador authentication endpoints. Note the rename from admin to ambassador and the functional changes, and how these endpoints differ and align when combined.

Register and route administrator and ambassador paths across two apps by using a request path to distinguish endpoints, and implement a shared registration flow with ambassador scope.

Learn how scopes in JWT control access to admin and ambassador endpoints, how to encode scope in the token, validate with a guard, and enforce role-based routing.

Learn how to calculate ambassador revenue by aggregating completed orders for each user, set up relations with orders and order items, and expose revenue in admin and ambassador views.

Explore ambassador endpoints by returning products on the frontend and via the API, filter results, create links, and compare revenue and rankings across ambassadors.

Configure Redis as a service in Docker Compose, expose port 6379, and integrate a cash manager register with a Redis store. Install Redis and register it to enable caching.

Implement caching for the product controller by adding frontend and backend endpoints, using cache decorators and a cache interceptor with a 30-minute ttl to serve products from cache.

Learn how to keep product data in sync across frontend and backend by using event emitters to clear cache keys on create, update, and delete operations, ensuring immediate UI updates.

Add a backend product search using a case-insensitive query on title and description by filtering with the request query lowered and index checks.

Sort products by price in ascending or descending order based on the request query, using a sign-difference method to determine order, and even combine sorting with search for integrated results.

Default to page one, slice the product list to nine items per page, and compute start and end indices. Calculate total products and last page for navigation, including search behavior.

Ambassadors create links by posting authenticated requests to generate a unique code, link selected products, and save the connection between the user and product IDs using a many-to-many relationship.

Authenticate the user, fetch ambassador links, and map them to return each link's code and completed orders. Compute per-link earnings by reducing completed orders to ambasador revenue for each link.

Build ambassador rankings by revenue using a get request, join users to orders, and calculate revenue, with future plans to sort via a Redis sorted set.

Populate a Redis sorted set with ambassadors and revenue as the score, then retrieve rankings in descending order using rev range by score and return the results.

Reformat the response into a name-to-revenue key-value map by using the reduce function, mapping results, and ensuring numeric scores are parsed for descending order.

Build three checkout endpoints to fetch data via a coded link to create an order, then confirm via a second endpoint, and update the database after Stripe confirms.

Fetch link data via a get request to the checkout endpoint using a code parameter, retrieving the link, user, products, and related data while omitting sensitive fields.

Post to checkout orders with customer details and product ids with quantities. Validate the link, create the order and items, and calculate ambassador revenue before returning the created order.

Wrap multiple queries in a transaction to insert order and order items only if everything succeeds. If an error occurs, roll back; otherwise commit, then release the connection.

Install and configure stripe, use the publishable key on the frontend, inject the stripe client, build line items from products, and create a checkout session with payment methods.

Set up environment variables and a global configuration service to manage constants and stripe keys across the order flow, injecting config data into the order model and checkout URL handling.

Execute order completion by validating the order, updating its status to complete, emitting an order completed event, and emailing the ambassador and admin while updating the ranking.

Configure a mailer in a NestJS app, send admin and ambassador emails about completed orders with an order total, and troubleshoot Docker localhost access using host, port, and no-reply settings.

Create a new Vue 3 admin project, selecting TypeScript and features, then install and apply the beautify plugin. Open the project in WebStorm and run the dev server at localhost:880.

Create a dashboard template by integrating bootstrap, refactoring assets, and building nav and menu components in a Vue 3, Nuxt.js and NestJS project.

Configure routes by adding a layout wrapper and router-view, import login and register views, and define paths for these components with simple forms.

Build a register form by wiring inputs (first name, last name, email, password, password confirm), posting to the admin register API with axios, then redirecting to login.

Implement a login flow that submits email and password to the login endpoint, uses axios with a base URL and withCredentials to obtain cookies, then redirects to the main page.

Retrieve the authenticated user after obtaining the back-end cookie, handle success or redirect to login on failure, and pass user data to navigation via props with a TypeScript user model.

Implement a logout flow with a synchronous method and await post-logout actions, then redirect to the login page and update the router to a profile page for authenticated access.

Create a users table for ambassadors in a Vue 3, Nuxt.js and NestJS app by wiring the layout and router, fetching ambassadors on mount, and displaying name, email, and actions.

Use Vuetify to build a simple table, duplicate data, style actions with the primary color, and add a view link routing to a user page by ID.

Implement pagination by wrapping items and slicing with per page values (default 10) while calculating start and end indices, and compute the last page to enable seven visible items.

Create a links component to display each user's links and their order counts, fetch data from the backend, and compute per-link revenue by summing order totals.

Create a product management view in a Vue 3/Nuxt.js app, wiring routes and rendering products with images, titles, descriptions, and prices. Implement delete with confirmation and axios backend calls.

Create a product using a dedicated form component, including title, description, image, and price fields, submit via post to the products endpoint, and redirect to the product list upon success.

Update products by reusing one form component for create and edit, prefill data on edit, and switch between post and put requests based on the presence of a product id.

Create an orders component that fetches orders, displays a header with name and total, and uses an expansion panel to reveal a table of order items.

Create a profile page with a profile component, providing account information and password forms, prefilled from the user data and updated via axios put requests to the backend.

Configure a Vuex store with initial user state, mutations, and a set user action. Dispatch updates and use computed properties to display the user in layout and profile.

Set up a vue 3 ambassador app with the composition API, select TypeScript or VueX, disable lint, and run on port 4000 using npm run serve.

Explore building a template-driven admin interface with a layout, navigation, and header, and implement ambassador-specific API integration using Axios, with login and register flows.

Display the authenticated user in the navigation bar by fetching data with Axios, wiring it to a Vuex store via the composition API, and conditionally showing login or user's name.

Master building a reactive header in Vue 3 with ref for title and description, updating automatically when values change and reflecting user login and revenue.

Watch user changes with Vue 3 to fix undefined values, implement a logout flow with async calls, and update navigation using router links and store dispatch.

Add a profile view and a products component, wire them to the router, and implement a computed show header flag to display the header only on the main page.

Master reactive form handling in Vue 3 by using reactive input data for two forms, prefill with authenticated user data via store, and submit to the backend with axios.

Create and display stats as a table of links by fetching links from an API and rendering them with a typed Link model. Configure env files for development and production.

Create a rankings view in the app by duplicating the stats component, fetch ambassador rankings, define a TypeScript ranking model, and display a name-revenue table with a one-based ranking index.

Build a unified products module with front-end and back-end views, sharing the same products component, highlighting active links, and fetching data from the API to render image, title, and price.

Develop a product search workflow by wiring a reactive filters object, emitting set filters on input, and reloading backend data with axios based on the search parameters.

Filter frontend products by title and description in real time, using two variables (all products and filtered products) to compute results and update the list on filter changes.

Learn backend sorting by implementing price sort order (ascending or descending) and preserving search and filter state in the products component, with props, events, and backend integration.

Develop frontend sorting logic by linking filters to sort direction, implement a price sort using a compare function returning -1, 0, or 1, and validate ascending and descending orders.

Implement backend lazy loading by adding a load more button, incrementing the page param, and merging new results with existing items, while resetting on new searches to maintain correct filtering.

Implement frontend lazy loading with nine products per page, using slice from zero to filters page and a more button; the backend last page informs when to hide the button.

Implement product selection in Vue 3 with a front-end and back-end approach. Toggle product selection to display a selected border using a selected array, a select function, and array methods.

Select products to generate a checkout link by posting to the backend, display the link or a login error, and auto-hide messages after five seconds.

Set up a checkout using a view framework with automatic routing and server-side rendering, then scaffold a Next.js TypeScript project, install Bootstrap and Axios, and run on 3000 and 5000.

Develop a checkout template by integrating the bootstrap-based view, update bootstrap to the correct version, and remove or adjust form fields and inputs.

Learn routing by rendering named success and error pages and navigating to /success or /error without extra config; rename the index file to capture and console log the URL code.

Fetch data with axios from a base URL to render the user name on the server. Server-side rendering improves Google indexing by think data via context.

Display and manage a list of products by looping through data, rendering each product's title, description, and price in a template, while tracking per-product quantities and a computed total.

The lecture demonstrates binding form fields with v-model, implementing a submit function, and sending a backend request with user data and a products array of product id and quantity.

Implement stripe payments by installing the Stripe module, setting the publishable key, and configuring a checkout session to redirect users to Stripe and confirm orders.