Angular & NestJS Full Stack Web Development Bootcamp 2023

Course Curriculum

Chapter 1: The E-commerce Full Stack Web Development Bootcamp 2023 Introduction

Lecture 1: Introduction – Hi! Welcome to E-commerce Full Stack Website Development Course!

Lecture 2: Project Design Ideas & Flow

Lecture 3: Local Development Environment set up

Lecture 4: Section 1 Wrap Up

Chapter 2: Let's prepare the Backend & Basic HTML, CSS and Javascript Introduction

Lecture 1: Introduction of NestJS

Lecture 2: Basic HTML, CSS, Javascript intro

Lecture 3: NestJS Environment Setup & Postman

Lecture 4: Database Environment Setup & PostgreSQL

Lecture 5: NodeS, Express and Server Practice

Lecture 6: Create a new NestJS Project

Lecture 7: NestJS folder structure & how each file works

Lecture 8: Database set up

Lecture 9: NestJS Database Visualization with LucidChart & NestS "CRUD" Generator

Lecture 10: Section 2 Wrap Up

Chapter 3: NestJS Entity, Service & Controller and Fetch Data

Lecture 1: Section 3 intro

Lecture 2: NestJS Backend – Let's build Entity & View Database Table

Lecture 3: Additional Entity fixed & Get method in Controller & Service Implementation

Lecture 4: Create() Method Implementation

Lecture 5: Fetch Data use Postman Demo & Delete() Method Implementation

Lecture 6: Update() Method Implementation & Update Data with Postman

Lecture 7: FindOne() Method Implementation & Find Data with Postman

Lecture 8: Section 3 Wrap Up

Chapter 4: Let's prepare the Frontend

Lecture 1: Section intro & Angular Local Environment set-up

Lecture 2: Angular Folder Structure & Create Feature Module, Product-list Component

Lecture 3: Angular Routing & Product Component Routing

Lecture 4: Communicating Backend with Angular Service & HTTP get() Method

Lecture 5: Display Data in Product-list Component

Lecture 6: Google Fonts & Product List page

Lecture 7: Prepare photos(download, resize, upload to cloud) for Product-List-Component

Lecture 8: Product List views Implementation with CSS

Lecture 9: Modification – Product List Page

Lecture 10: Build our new Product List page

Lecture 11: Use [RouterLink] to Initiate Navigation to a Route.

Lecture 12: Tree Diagram, Product-Detail Component, add one more property into Backend

Lecture 13: Build Detail-Component Page

Lecture 14: Combine Landing Page with Product Home Page

Lecture 15: Preparation – Use Postman to write data to Backend

Lecture 16: Build new service (get products by category) from Backend

Lecture 17: Create Sub-Category Component and display products by SubCategory

Lecture 18: Build our Sub-Category Component Product List

Lecture 19: Fix Product-Detail Component UI & Fetch data using Service

Lecture 20: Section 4 Wrap Up

Chapter 5: Let's build the Payment System

Lecture 1: Payment System Integration

Lecture 2: Install Git and Push the projects to Github.

Lecture 3: Create a server on Digital Ocean & Create a real world Postgres Database

Lecture 4: Use Terminal to log in into server & basic setup (SSH)

Lecture 5: Host our Front end on the same server.

Lecture 6: Insert data from PgAdmin4 + Postman

Lecture 7: Section Wrap Up

Chapter 6: Let's build our Frontend Desktop Viewport!

Lecture 1: Build Website Desktop Viewport (Preparation)

Lecture 2: Desktop view Home page & CSS Grids

Lecture 3: Adjust Product-bags Component Desktop Viewport CSS

Lecture 4: Adjust sub-category Component Desktop view with CSS

Lecture 5: Adjust Product-detail Component Desktop Viewport with CSS

Lecture 6: Build a Responsive Nav-bar (start from Product-bags Component)

Lecture 7: Build a responsive Nav-bar (Mobile menu)

Lecture 8: Build Nav-bar, Clothing, Cosmetics, Accessories Component

Lecture 9: Section Wrap Up

Chapter 7: CRUD with Frontend Implementation

Lecture 1: Build Front-end Create Method Component & Angular Reactive Form

Lecture 2: Make Sub-Category Component available for all Second Level Product Display

Lecture 3: Delete Product Method Implementation

Lecture 4: Edit Product Method Implementation

Lecture 5: Section Wrap Up

Chapter 8: User Authentication & Authorization

Lecture 1: User Authentication Implementation

Lecture 2: User Authentication Implementation Part 2 – JWT Functionality(Back end & NestJS)

Lecture 3: User Authentication Implementation (Front End & Auth Module)

Lecture 4: User Authorization Implementation With Roles

Lecture 5: Mix User Authorization & User Authentication together to protect routes

Lecture 6: User AuthGuard With Angular – FrontEnd

Lecture 7: Session Wrap up & Course Roundup