Angular and NodeJS: A Rapid Guide - Advanced

Set up a Node.js project with npm init, install express and TypeScript types, configure nodemon, create index.ts that logs hello, and run with npm start in watch mode.

Set up express with TypeScript, import express, configure tsconfig, enable CORS, use express.json, and create a first route that returns hello world on port 8000.

Learn how to install and configure Docker for a Node.js project, create a Dockerfile and dockerignore, and use Docker Compose to run and test containers with live code updates.

Create a database service with the MySchool image and map data to a local folder. Enable restart always; connect locally on port 3306 (or 3366) with ambassador and root.

Install TypeORM and connect to the database, configuring credentials in a config json file. Use docker-compose with depends_on db to ensure the database starts first, then add the user entity.

Create a user entity that maps to a database table, with id, firstName, lastName, email, password, and isAmbassador, using entity and column decorators and a unique email index.

Explore creating admin authentication endpoints to register, login, fetch the authenticated user, logout, and update admin information, with a plan to reuse these endpoints later for ambassador authentication.

Create an admin register endpoint in Express using a TypeORM user repository, with password hashing via bcrypt and validation. Test the endpoint with Postman to verify proper responses.

Implement login by posting email and password to the API, validate user existence and password, return a uniform invalid credentials message, and prepare for JWT token.

Generate a jwt by signing a payload with user id, install json web token, store token in an http-only cookie for one day, and move secret to an env file.

Implement an authenticated user endpoint that reads a JWT from cookies, verifies it, fetches the user by id, and returns the user without the password.

Implement logout by deleting the JWT cookie with an empty value and zero max-age, handle unauthenticated responses, and manage password fields by default exclusion with selective inclusion during login.

Implement reusable authentication middleware in TypeScript to verify JWTs, attach the authenticated user to the request, and pass control with next to protected routes.

Update your profile by sending a put to admin/users/info to change first name, last name, and email, then encrypt the new password 10 rounds and return the updated user.

Develop and manage admin endpoints by creating a products entity with create, update, and delete operations, adding links and orders endpoints, and retrieving ambassador users.

Create a seeders ambassador seeder to populate the user repository with 30 fake ambassadors, using Faker and hashed passwords, via a separate seed command inside Docker.

Create and manage products by building a product entity with title, description, image, and price, exposing admin routes for crud operations and seed data.

Define a link entity with a six-character code tied to a user and multiple products via a link_products join table, and expose routes to fetch by user and create links.

Define two entities, order and order item, with a many-to-one relation and a full column set for transaction id, user and ambassador details, address, and stripe-based completion status.

Create an order controller that returns completed orders with items, computes totals with reduce, and seeds orders and items via repositories in an Angular and NodeJS admin workflow.

Explore configuring relations without foreign keys by setting create foreign key constraint to false, linking orders and order items via join columns, and retrieving related data without enforced constraints.

Implement ambassador authentication endpoints by adapting admin endpoints with the ambassador prefix, adjusting functions and introducing scopes for added security. Explore how the scopes add a layer of complexity.

Reuse the same route logic for ambassador and admin paths by checking the request path, restrict ambassador login to ambassador routes, and plan token scopes for authorization.

Add scopes to the token payload (admin or ambassador) and enforce them in the oath middleware through path checks and payload scope verification.

Learn to compute ambassador revenue by fetching user data for admin and ambassador paths, aggregating completed orders and order items with reducers, and testing revenue updates.

Explore ambassador endpoints in this advanced module, comparing frontend and backend product filtering, and implement caching with Redis for ranking and link analytics via dedicated endpoints.

Install Redis as an in-memory database with Docker Compose, expose port 6379, and connect a Redis client in Node using createClient, await client.connect, and export the client for controllers.

Learn how to cache the ambassador's products frontend endpoint with Redis by creating a cache key, setting a 30-minute expiration, and returning cached results or querying the database when needed.

Implement backend search endpoints for products that filter by title or description, using case-insensitive queries and a query parameter, while the frontend handles filtering.

Learn to implement search with price-based sorting in ascending and descending orders using a comparator that returns -1, 0, or 1, and add pagination.

Discover backend pagination with a search bar by limiting results to nine products per page, calculating total and last page, and using slice to return the current page data.

Create authenticated ambassador links by posting to the api ambassadors/links, generating a random six-character code, and associating the authenticated user with selected product ideas.

Compute per-link revenue by fetching authenticated ambassador's links, joining related orders and order items, filtering for completed orders, and summing revenue for each link via a stats endpoint.

Learn how to implement an ambassador rankings endpoint that returns each ambassador's name and revenue, and explore performance considerations and Redis sorted sets for efficient ranking.

Use Redis sorted sets to rank ambassadors by revenue, storing ambassador names as members with revenue as scores and retrieving them in descending order.

Use a reducer to build an object mapping ambassador names to revenues, starting from an empty object, detecting names versus revenues, and sorting the results in descending order.

Explore the final checkout endpoints: fetch the checkout link, create an order (initially incomplete), and update the status to complete after Stripe confirms the payment.

Learn to fetch a link by code via a get link endpoint and include related user and product data for checkout, setting up order creation in the next tutorial.

Create order via a post request, validate the link, assemble an order with user details and address, then build order items with product data and ambassador revenue and admin revenue.

Master database transactions to ensure all-or-nothing inserts of orders and order items, handling errors with commit and rollback to prevent partial data.

Learn to integrate Stripe in a Node.js app, enable test mode, manage secret and publishable keys, install Stripe, and create a checkout session with line items.

Install node.js from nodejs.org, install angular CLI globally, and create a new angular project with routing. Run the server on port 4200 and view the app.

Switch the template to a bootstrap template, copy the bootstrap thesis link, and apply it to the index and email body. Generate Angular components and streamline with schematics.

Split the app into public and secure models and modules, set up routes via a router outlet, and protect secure routes behind login.

Create an Angular reactive register form using bootstrap layout and public component styles, with first name, last name, email, password, and password confirm; post to api/admin/register, then navigate to login.

Build a login form with email and password, submit via the logging API, and navigate home after login while handling a secure HttpOnly JWT cookie.

Create a dedicated services layer for authentication, including register and login calls, then route through a shared health service with credentials to obtain the authenticated user.

Retrieve the authenticated user by sending cookies with credentials and updating the service. Define a user interface and display the first and last name after login.

Implement logout in an Angular and Node.js app, clearing cookies, redirecting to the login page, and protecting routes with a secure component.

Learn how to use interceptors in Angular to automatically attach with credentials to every request by cloning the request and sharing a credentials interceptor across components.

Build a profile page with two reactive forms to update first name, last name, email, and change password, wired to a health service using put requests.

Explore building a users table in an Angular app, configure redirects to the users page, highlight active links, and fetch users via a dedicated user service using environment API/users.

Install Angular Material, pick a style, and implement a material table with columns name, email, and actions, backed by a data source that feeds the user data.

Implement material table pagination in angular by wiring a mat-paginator with a view child, linking it to the data source, and initializing after view init.

Create a secure links feature by adding a links component and table for each user, building a path like /users/{id}/links, and calculating revenue from orders.

Develop a product component, add a products table with image, title, description, price, and auction, and fetch products through a service and endpoint using an observable.

Create a new product component, wire up a products form with title, description, image, and price, and implement a submit function that posts data and navigates to the products page.

Learn to implement a single product form component for create and update, distinguish modes via route data, prefill on edit, call product service, and redirect to the products list.

Execute a delete flow by confirming before removal, sending a delete request to the delete url, and updating the data source to reflect the deleted product.

Create an orders feature by building the order component and service, defining an order interface with customer data and items, and display totals in an expansion panel and table.

Configure defaults, add bootstrap to index.html, and set up the album template for the ambassador project, then change the dev server port from 4200 to 4300 and run localhost:4300.

Import and integrate data from the Angular admin project into the ambassador project, wiring emitters, interceptors, public models, interfaces, login, register, and routing, and set up environment API endpoints.

Enhance navigation by building an Angular navigation that reflects authentication status via a JWT cookie, showing login and signup when unauthenticated and profile and logout with router links when authenticated.

Develop and secure a user profile by building a secure module, shared models, and profile component, wiring the router outlet, reactive forms, and addressing imports for a seamless authenticated experience.

Learn to build a header component with a dynamic title and description that switch between login/register and user revenue display based on authentication, using meters and URL checks.

Wire stats and rankings in the Angular and NodeJS app. Display rankings as a key-value table with a pipe for formatting.

Explore configuring router link options for the front-end and back-end products components in Angular and NodeJS, including router link active behavior and exact matching to control navigation and styling.

Fetch backend Bequant products via the endpoint returning an observable with a data property, map to product cards with image, title, price, and prepare for front end pagination.

Implement lazy loading by adding a load more button that fetches more products using page query parameters and concatenates results to extend the list.

Implement pagination for product listings with a paginated interface, conditionally showing the load more button based on the current and last page, and reset to the first page on refresh.

Add a search input to the Bequant products component, trigger a search on key up, pass the query via query params, and filter or navigate results accordingly.

Learn how to implement client-side price sorting for products using a price select, with ascending and descending orders, and reset the page on navigation to reflect updates.

Learn to implement product selection with a clickable user interface: toggle selection state, highlight selected items with a border, and manage a selected list using an id-based isSelected check.

Learn how to generate checkout links from selected products using a link service and environment API. The lecture covers login validation, error handling, and displaying the generated link for checkout.

Fetch all products via the frontend product service and subscribe to the API, then store results in variables. Add filters and search using pipes for the product view.

Implement Angular pipes for pagination, filtering, and sorting of a product list, using slice for page and per page, and explain pure versus impure pipes to ensure predictable updates.

Set up a checkout project by running a server on port 5000, integrating a bootstrap checkout template, and refining the form to collect essentials while removing unused fields.

Build a checkout flow by creating form, success, and error components, wiring them to a link service that fetches data via the environment API using a code from the URL.

Install angular universal to enable server-side rendering and improve search engine optimization by rendering HTML on the server, making pages visible to Google.

Learn to fetch and render a list of products in an Angular app, display title, description, and price, and add a quantity input to dynamically update the total.

Compute the order total by using reduce to sum product prices times their quantities, initialize each quantity to zero, and update the total as inputs change.

Build and render a reactive form with a form builder, collect user details and product quantities, map to id-quantity, filter zero quantities, and submit via the order service.

Learn to integrate stripe by using the publishable key in the frontend, load stripe.js, create a checkout session, redirect to checkout, and handle success or error pages with order confirmation.