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

Set up a Node.js project by installing Node.js, selecting an IDE, creating a folder, running npm init -y, installing Express and TypeScript, adding tsconfig, and using nodemon for TypeScript execution.

Learn to set up express with TypeScript, import express, create an app, enable CORS, use express.json, define a hello world route, and listen on port 8000.

Install and configure docker for node-based projects. Create a docker file and docker compose to run, test port 8000 on localhost.

Set up a two-container docker database using the MySchool image (latest), map data volumes, configure ambassador database with root credentials, and expose port 3066; test connection.

connect with the database using typeorm by installing dependencies, creating a connection, and configuring ormconfig.json; ensure the db container starts first with docker compose.

Define a user entity mapped to database table with id, first name, last name, email, password, is ambassador. Configure decorators and a unique email index to support admin and ambassador.

Develop admin authentication endpoints for register, login, get authenticated user, logout, and update information with a consistent API prefix; reuse these endpoints later for ambassador authentication.

Implement an admin register endpoint in Express with TypeScript, wiring routes and controller to hash passwords, save the user via a repository, and return user data without the password.

Implement a login function that posts email and password to the api admin login endpoint, validates the user, compares the password with stored hash, and prepares for a jwt token.

Export an authenticated user function that reads a JWT from cookies with cookie-parser, verifies it using a secret key, and returns the user from the repository without the password.

Logout expires the jwt cookie by setting an empty value and max-age zero to end the session, returning unauthenticated when the token is missing.

Implement oath middleware to authenticate users by verifying a JWT and using next in flow. The middleware adds the authenticated user to the request for downstream routes.

update user profile info and password via admin and user routes, using put requests to admin/users/info and users/password, encrypt passwords, verify confirmation, and return updated user data after changes.

Add admin-only endpoints for products, links, and orders, with create, update, and delete operations; retrieve ambassadors and all users, completing the admin endpoints.

Create an admin-driven ambassadors endpoint and a dedicated user controller, then seed 30 ambassador users with a TypeScript seeder using faker, run via docker to populate the database.

Define a product entity with title, description, image, and price, and implement a product controller with CRUD routes, including admin seeding of 30 products.

This lecture shows building a link entity with a unique code, linking to a user via many-to-one and to products via join table, and exposing a user links endpoint.

Learn to seed orders for a Vue 3, Nuxt.js and NodeJS admin panel by building an order controller, retrieving completed orders with items, and calculating totals.

Configure relations between orders, order items, and links without foreign keys by setting create foreign key constraint to false and adjusting join columns.

Configure ambassador authentication endpoints by mirroring the admin endpoints, changing the prefix from admin to ambassador and integrating scopes for refined access control.

Reuse the same authentication routes for ambassador and admin roles, distinguishing paths like api/ambassador, enforcing role-based access with 401 checks and login scope.

Add scopes admin and ambassador to the token payload and enforce them in the oath middleware by matching the request path to the user’s scope.

Calculate ambassador revenue by summing completed orders and their items using reducers, exposing a revenue property on the user; verify with ambassador login and data tweaks.

Explore ambassador endpoints by comparing frontend and backend product filtering, implement caching with Redis, create link endpoints, fetch stats for links, and rank ambassadors by revenue.

Install and configure Redis as an in-memory cache with Docker Compose, connect a Redis client in Node to port 6379, and export the client for controller use.

Cache the ambassador frontend products with Redis: set key 'products frontend', stringify results, TTL 1800 seconds, and serve from cache or query and refresh when missing.

Add a second backend endpoint for products with a case-insensitive search by title and description via a query parameter, while the frontend handles filtering.

Learn to implement backend sorting of products by price, with ascending and descending options, using a compare function returning -1, 0, or 1, and a sign-based approach, introducing pagination.

Create authenticated ambassador links by posting to the ambassadors/links endpoint, generating a random code, and saving user-associated product ideas.

Develop an endpoint to compute per-link revenue and buyer count for ambassadors by fetching the authenticated user, loading their links with orders, filtering completed orders, and totaling revenue.

Learn to build ambassador rankings by revenue, retrieving names and revenue from orders and order items, and compare slow per-ambassador queries with Redis sorted sets for performance.

Use redis sorted sets to rank ambassadors by revenue, adding with zadd and retrieving descending results with zrevrange by score; prepare keys as ambassador names and values as revenues.

Use a reducer to build a map of ambassador names to revenue. Distinguish names from revenues with isNaN, initialize an object, and update it with keys for a descending result.

Master the three checkout endpoints to retrieve a checkout link, create an order, and confirm it with Stripe, then update the order status from incomplete to complete.

Implement a getLink endpoint to retrieve a single link by code, including related user and products, and demonstrate fetching the latest link for checkout integration.

Create an order via a post request by validating the link, loading the user, and assembling the order with customer details and items, with ambassador 10% and admin 90%.

Learn how database transactions ensure atomic inserts of orders and order items, using a query runner to start, commit, or rollback on errors.

Explore integrating Stripe for payments by setting test mode keys, installing the Stripe package, creating a checkout session, and handling transaction IDs across front-end and back-end.

Confirm the order via a post request with the transaction id and mark it complete, then update ambassador rankings and revenue and email admin and ambassador via a mail hook.

Apply bootstrap-based templating in a Vue 3 / Nuxt.js project by refactoring the update view, removing unused assets, and creating nav and menu components to assemble a streamlined template.

Set up routes for login and register, create a shared layout, and import components to render a dashboard with a simple login and registration form styled for clarity.

Build a register form in Vue 3, binding first name, last name, email, password, and password confirm with v-model. Submit a post to localhost:8000/api/admin/register and redirect to login on success.

Fetch the authenticated user from the bequant cookie in the layout, handling success or redirecting to login, and pass the user via props to the navigation using TypeScript user model.

Implement a synchronous logout method that awaits logout actions and redirects to the login page after signing out, with a rotor link to profile.

Fetch ambassadors to populate a responsive users table, display admins and ambassadors, join first and last names, show email and actions, and highlight the active route in the layout.

Demonstrates building a simple vuetify data table, duplicating data, and customizing action buttons to navigate to user detail pages while planning pagination.

Implement pagination by setting per page to 10 and slicing data from (page-1) * perPage to page * perPage. Compute last page from data length to show three pages.

Build a products view with pagination, including image, title, description, price, and action. Implement deletion with a confirmation prompt using axios delete and front end state updates.

Build a product creation flow in a Vue 3 Nuxt.js app by creating a product form with title, description, image, and price, then submit with axios and redirect to products.

Reuse a single product form for create and edit, auto-fill fields from the product data, and conditionally post or put to update or create in Vue 3, Nuxt.js, and Node.js.

Build orders component that fetches order data with an async mounted hook, displays order name and total, and expands to show order items in a table with title and price.

Add and wire a profile page in the admin area, with account information and password forms prefilled from the user data, and submit handlers for updating info and password.

Learn how to manage user state with Vuex by defining state, mutations, and actions, wiring dispatch and computed properties in layout and profile to update and reflect the user.

Set up the ambassador view using Vue 3 composition API, select TypeScript, change the port to 4000, run npm run serve, and strip assets for the next tutorial.

Build an ambassador app by applying a template, creating a layout with navigation and header components, and wiring login and register flows using axios defaults and an ambassador API.

Show login and signup when unauthenticated, or the app logo with the user name when authenticated. Fetch the authenticated user on mount with axios and compute the user for rendering.

Observe user changes with a Vue 3 watcher to handle undefined states, update the user data, and synchronize logout, navigation, and header behavior via store dispatches.

Create a profile page and component, wire router links to switch to profile and main pages, and use a computed showHeader to hide the header on non-main routes.

Create a reactive Vue 3 profile form using ref and reactive data, binding first name, last name, email, and password with v-model; watch the user and submit updates via store.

Develop and display generated start links in a vue 3 and nuxt.js app, convert to typescript, fetch links, and manage environment based checkout URLs for development and production.

Create a rankings view in a vue 3 nuxt app by duplicating an existing component, add to navigation, and fetch rankings data; display name and revenue in a 1-based table.

Build a products feature in a Vue and Nuxt app with a shared products component across front and back ends, fetching paginated API results to display image, title, and price.

Implement a Vue 3 backend search by creating a reactive filters object, emitting set filters on input, and loading results with Axios.

Learn to implement client-side product filtering in the front end by filtering the product list by title and description using a search input, with case matching and no backend requests.

Master backend sorting in a Vue 3 and Nuxt.js context by implementing price ascending and descending, plus search and filter controls with event-driven updates that preserve prior values.

Sort front-end products by price with a compare function returning -1, 0, or 1, using a difference and Math.abs approach for ascending but toggled for descending.

Add a load more button to lazy load products. Start with page one and merge new data with existing items using the spread operator; reset to page one on search.

Explore frontend lazy loading with slice-based pagination, showing nine products per page and a load more action that supports filtering and search, with last page handling.

Select and toggle products in a Vue 3, Nuxt.js and NodeJS app by managing a selected array, applying a border when selected, and using scoped styles for clean component styling.

Generate a checkout link from selected products by posting to the backend /links, display the generated link, handle login errors, and auto-hide messages after five seconds.

Create a Next.js checkout app using TypeScript and Bootstrap, configure automatic routing and server-side rendering, and set the dev server to run on port 5000.

Build a checkout template by integrating a glass container layout, update bootstrap via CDN with integrity and cross origin, and adapt the form for city, zip, and billing address.

Explore routing in Nuxt by rendering named pages for success and error, derive code from the URL with mounted hooks, and prepare data to reveal the form.

Explain server-side rendering in a Vue/Nuxt app, showing how to fetch user data with axios and pre-render it via asyncData or syncData with context for SEO-friendly indexing.

Bind inputs with v-model for first name, last name, email, country, city, zip, and a code, plus a products map; submit asynchronously and prepare to send data to Stripe.

Learn to implement Stripe checkout in a Nuxt.js and NodeJS app by installing the Stripe module, configuring the publishable key, creating the checkout session, and confirming orders after payment.