Angular & NestJS Full Stack Web Development Bootcamp 2023

Explore NestJS basics built on Node.js and TypeScript, with Express under the hood, emphasizing modules, controllers, providers, and Postgres SQL with TypeORM.

Learn the basics of HTML, CSS, and JavaScript for front-end and back-end development, set up Visual Studio Code with Node.js and Live Server, and scaffold an HTML/CSS workflow using console.log.

Learn how to set up the NestJS environment using the terminal, verify npm and Node.js versions, install the NestJS CLI, and use Postman to test routes with get requests.

Set up the PostgresSQL database environment with Windows or Mac installers, learn about PGAdmin as a visualization tool, and preview NestJS design ideas in the next video.

Learn to build a basic NodeJS server with Express, including project setup, npm commands, creating server.js, handling routes with app.get, and serving an HTML file.

Create a new NestJS project in the terminal with nest new, choose npm, set up the server test folder, and run nest start to view Hello World on port 3000.

Explore the NestJS folder structure, focusing on main.ts, app.module.ts, app.controller.ts, and app.service.ts, and learn how module, controller, and provider interact through dependency injection to implement CRUD operations.

Learn how to set up a PostgreSQL database for a NestJS app with TypeORM, install dependencies, configure app.module.ts, and verify the connection with pgAdmin.

Visualize a NestJS database with LucidChart and generate rest api CRUD scaffolding using nest g resource for a product. Define dto and entity files to describe create and update payloads.

Wraps up section two by reviewing html, css, and javascript basics, and setting up databases with Postman and pgAdmin. It introduces NestJS modular architecture and LucidChart visualizations for database tables.

Explore section three intro by building entity, controller, and the service, and write code in the specified files while updating parts as you go.

Build a NestJS back-end entity with TypeORM for a product, configure the module and app module, and view the resulting Postgres table in pg admin.

Implement a get method in the product controller and service to fetch all products. Add sex, brand, and category fields to the product entity and wire the repository.

Implement the create method by wiring a create product DTO with class-validator, using the product repository to create and save, and test via Postman to verify 201 created responses.

Fetch data with Postman using GET, then implement NestJS delete for products, validate the string UUID id, handle not-found with HTTP exception, and return the deleted id.

Implement the update method in NestJS using a partial update dto and Postman to send id and update fields, then fetch and return the updated product.

Showcases findOne method implementation using postman to fetch a single product, handling 'no product found' errors, returning the found product via the product repository.

Wraps up section three by detailing the NestJS CRUD backend with five methods: create, get single, get all, edit, and delete product, noting a simple backend and upcoming frontend changes.

Install Angular CLI globally, create a new Angular project with routing and CSS, and run the app to verify it works in the browser at localhost:4200.

Explore the Angular folder structure and learn to create a product feature module and a product list component using the CLI, including module declarations, component files, and routing basics.

Learn to implement Angular routing and lazy loading for a product module, define routes with forChild, and render a product list via router outlet in a single-page app.

Fetch backend data with Angular's http client using get on /product via a product service. Connect Angular with a NestJS backend by loading and subscribing in the product list component.

Display data in the product-list component by binding backend data to a products variable and debugging with a json pipe. Build a nav bar with flexbox and boxicons for icons.

Learn to integrate google fonts using quicksand in an Angular app, and build a product list page with responsive styling and hover interactions.

Learn how to prepare product photos by downloading, resizing, removing backgrounds, and uploading to the cloud (image kit io) to generate reusable image URLs for a production-ready product list component.

Implement a four-item product list view with css, hosting images on imagekit.io, and use flexbox to center items, create gray cards, and style image sizes and text.

This lecture demonstrates renaming the product list page to a product home page, updating file names, imports, and routing to reflect the new component across the Angular project.

Create a new product list page by building category components (bags, makeup, clothing, accessories), configuring routes, and styling a responsive banner within an Angular project.

Use routerLink to navigate routes, turning product items into links that route to /products/bags and other category pages. Prepare pages that load backend data for makeup and clothing.

Build a tree-structured product catalog with category and sub category routes, add a sub category field in a NestJS backend, and create a dynamic product detail component for the frontend.

Build the detail component page by copying and adjusting html and css, configure routing for a product detail view, and refine layout with flexbox, typography, and a buy now button.

Combine the landing page with the product homepage to streamline mobile navigation and reduce code, while using a large hero image, landing image container, and boxicons.

Prepare the backend with Postman, write real product data to the database, and test get, post, and delete routes, including image uploads and detailed product fields.

Build a NestJS backend service to fetch products by subcategory using TypeORM getRepository, a create query builder, and getMany, exposed via a category route.

Create a sub-category component, route it by subcategory, read the URL with ActivatedRoute in ngOnInit, and fetch/display products using a service and ngFor.

Build a sub-category component to display products by category, fetching data via route params with a product service and applying a title transform pipe for designer bags and shoulder bags.

Fixes the product detail and subcategory user interface and fetches data via a service using route params. Enables routing with detail/id and binds image, price, and description with *ngIf.

Wraps up section four by reviewing frontend and backend progress, building components, routing, dynamic UI, and styling, and outlining the next section's payment integration plan.

Learn to integrate PayPal into an Angular full-stack app using sandbox testing, creating an app with a client id and a PayPal button with create order and on approve.

install git and push your front-end and back-end projects to GitHub by initializing repositories, committing changes, and pushing to main, while ignoring node_modules.

Create a digital ocean server (droplet) with ubuntu and add a free heroku postgres database, capped at 10,000 rows and 20 connections, for a full stack on one server.

Log into a server via ssh, update packages, and install nodejs and npm. Clone backend and frontend, configure production database credentials, build with npm run build, and run with pm2.

Host the front end on the same server by updating the front end to connect to the server IP, install nginx, build the project, and deploy the dist to /var/www/html.

Learn to insert data into a database using pgAdmin4 and Postman, by registering the server, selecting the schema, and adding a row with id, title, url, price, and quantity.

Master PayPal integration, publish frontend and backend to GitHub, and deploy the full stack on Digital Ocean with NGINX and PostgreSQL; finish the desktop CSS focus with pgAdmin and Postman.

Prepare for the next topics by cleaning up folders and setting up backend and frontend with npm install and npm start in vscode, and test the local desktop viewport.

Build a desktop view using CSS grids, splitting the layout into left image and right content with 1fr columns and grid areas, then apply media queries around 600–768 px.

Learn to adjust the product bags component for desktop viewports using css, media queries, and layout tweaks such as space-around for boxes, banner image cropping, and removing unnecessary elements.

Adjust the sub-category component for desktop view using css grid, placing the best seller on the left and the product list on the right with a 768px breakpoint.

Create a responsive Angular product-detail page by integrating the Angular responsive carousel, building a 50/50 desktop grid, and applying CSS and currency pipe for USD.

Build a responsive navigation bar starting from the product-bags component, incorporating a banner image, logo, and menu items with desktop and mobile views.

Learn to build a responsive nav bar for a mobile menu in Angular, including a full-screen toggleable menu with NgClass and NgIf and a close button.

Learn to build a reusable Angular nav bar component and four product sections—clothing, cosmetics, and accessories—through practical wiring of shared components, routing, and responsive CSS.

Wraps up section six by detailing responsive css for desktop and mobile, introducing new components and a reusable Angular nav bar, and outlining next steps for CRUD features.

Build a front-end create method with Angular reactive forms to input and post new product data to the backend, using a product service, a dedicated create component, and routing.

Enable the subcategory component to display products for every second level category by wiring routes, fetching products by subcategory, and handling empty results with ngIf/ng-template.

Implement a delete product method in the front end, adding a delete button in the subcategory component and refreshing the product list after a successful backend response.

Demonstrate editing a product in Angular by building an edit component, fetching by id, filling a reactive form, patching with http, routing after save.

wraps up section seven with angular reactive forms, delete and edit methods, and a subcategory component showing products from the database. upcoming section eight introduces user authentication with NestJS backend.

Learn to implement user authentication in a NestJS app by building a user and auth module, creating users with TypeORM, and securing routes with Passport Local strategy and guards.

Master JWT-based authentication in a NestJS back end: implement login to issue a signed access token, set up a JWT strategy and guard, and protect routes with bearer tokens.

Implement front-end user authentication in the auth module using Angular and NestJS, building login and sign-up forms, token storage in local storage, and an http interceptor for bearer authentication.

Explore implementing role-based authorization in NestJS, using a role enum, roles decorator and guard, with JWT authentication to control admin, member, and visitor access.

Combine authentication and authorization to protect routes using jwt in NestJS backend and Angular frontend, testing with Postman and guards to grant admin access.

Implement an Angular front-end auth guard that checks the local storage token, verifies authorization with the backend, and uses canActivate and rxjs map operator to redirect unauthorized users to home.

Wraps up section eight by covering user authentication and authorization with JWT, front-end and back-end integration, and basic roles like admin and visitor to build a secure full-stack e-commerce site.