Angular & NestJS Full Stack Web Development Bootcamp 2024

Focused View

23:31:26

0 View

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

1 -Introduction - Hi! Welcome to E-commerce Full Stack Website Development Course!.mp4

01:32

2 -Project Design Ideas & Flow.mp4

07:18

3 -Local Development Environment set up.mp4

02:07

4 -Section 1 Wrap Up.mp4

01:45

2 - Lets prepare the Backend & Basic HTML, CSS and Javascript Introduction

1 -Introduction of NestJS.mp4

06:53

2 -Basic HTML, CSS, Javascript intro.mp4

15:56

3 -NestJS Environment Setup & Postman.mp4

06:07

4 -Database Environment Setup & PostgreSQL.mp4

03:05

5 -NodeS, Express and Server Practice.mp4

16:43

6 -Create a new NestJS Project.mp4

05:53

7 -NestJS folder structure & how each file works.mp4

17:27

8 -Database set up.mp4

09:27

9 -NestJS Database Visualization with LucidChart & NestS CRUD Generator.mp4

17:10

10 -Section 2 Wrap.mp4

02:36

3 - intro

1 -NestJS Backend - Lets build Entity & View Database Table.mp4

00:47

2 -Additional Entity fixed & Get method in Controller & Service Implementation.mp4

15:50

3 -Create() Method Implementation.mp4

13:30

4 -Fetch Data use Postman Demo & Delete ) Method Implementation.mp4

19:02

5 -Update ) Method Implementation & Update Data with Postman.mp4

14:29

6 -FindOne() Method Implementation & Find Data with Postman.mp4

26:48

7 -Section 3 Wrap Up.mp4

07:05

4 - Lets prepare the Frontend

1 -Section intro & Angular Local Environment set-up.mp4

02:07

2 -Angular Folder Structure & Create Feature Module, Product-list Component.mp4

06:18

3 -Angular Routing & Product Component Routing.mp4

19:00

4 -Communicating Backend with Angular Service & HTTP get() Method.mp4

21:14

5 -Display Data in Product-list Component.mp4

21:56

6 -Google Fonts & Product List page.mp4

26:16

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

35:02

8 -Product List views Implementation with CSS.mp4

14:40

9 -Modification - Product List Page.mp4

23:22

10 -Build our new Product List page.mp4

06:20

11 -Use [RouterLink] to Initiate Navigation to a Route.mp4

17:30

12 -Tree Diagram, Product-Detail Component, add one more property into Backend.mp4

05:12

13 -Build Detail-Component Page.mp4

21:39

14 -Combine Landing Page with Product Home Page.mp4

23:37

14 -back-end.zip

14 -front-end.zip

15 -Preparation - Use Postman to write data to Backend.mp4

23:48

16 -Build new service (get products by category) from Backend.mp4

10:04

17 -Create Sub-Category Component and display products by SubCategory.mp4

23:15

17 -back-end.zip

17 -front-end.zip

18 -Build our Sub-Category Component Product List.mp4

27:50

18 -back-end.zip

18 -front-end.zip

19 -Fix Product-Detail Component Ul & Fetch data using Service.mp4

33:43

19 -back-end.zip

19 -front-end.zip

20 -Section 4 Wrap Up.mp4

20:12

20 -back-end.zip

20 -front-end.zip

5 - Lets build the Payment System

1 -Payment System Integration.mp4

02:30

2 -Install Git and Push the projects to Github.mp4

34:50

3 -Create a server on Digital Ocean & Create a real world Postgres Database.mp4

14:42

4 -Use Terminal to log in into server & basic setup (SSH).mp4

12:39

5 -Host our Front end on the same server.mp4

24:31

6 -Insert data from PgAdmin4 + Postman.mp4

17:40

7 -Section Wrap Up.mp4

11:12

6 - Lets build our Frontend Desktop Viewport!

1 -Build Website Desktop Viewport (Preparation).mp4

06:49

2 -Before Topic 50 endcodes.zip

2 -Before Topic 50 startscodes.zip

2 -Desktop view Home page & CSS Grids.mp4

08:00

3 -Adjust Product-bags Component Desktop Viewport CSS.mp4

35:03

4 -Adjust sub-category Component Desktop view with CSS.mp4

07:15

4 -Topic 52 codes.zip

5 -Adjust Product-detail Component Desktop Viewport with CSS.mp4

23:52

5 -codes.zip

6 -Build a Responsive Nav-bar (start from Product-bags Component).mp4

42:15

7 -Build a responsive Nav-bar (Mobile menu).mp4

32:00

8 -Build Nav-bar, Clothing, Cosmetics, Accessories Component.mp4

44:49

9 -Section Wrap Up.mp4

35:26

7 - CRUD with Frontend Implementation

1 -Build Front-end Create Method Component & Angular Reactive Form.mp4

03:24

1 -codes.zip

2 -Make Sub-Category Component available for all Second Level Product Display.mp4

44:13

2 -codes.zip

3 -Delete Product Method Implementation.mp4

23:32

4 -Edit Product Method Implementation.mp4

23:02

4 -codes.zip

5 -Section 7 Wrap Up.mp4

48:24

8 - User Authentication & Authorization

1 -User Authentication Implementation.mp4

03:21

1 -codes.zip

2 -User Authentication Implementation Part 2 - JWT Functionality(Back end & NestJS).mp4

01:10:18

2 -codes.zip

3 -User Authorization Implementation With Roles.mp4

38:23

3 -codes.zip

4 -Mix User Authorization & User Authentication together to protect routes.mp4

56:54

4 -codes.zip

5 -User AuthGuard With Angular - FrontEnd.mp4

58:20

5 -codes.zip

6 -Session Wrap up & Course Roundup.mp4

01:33:27

6 -codes.zip

Description

Learn Frontend, Backend, HTML, CSS, Javascript, Frameworks, UI/ UX, Database, Hosting in only 1 course!

What You'll Learn?

You will learn Front-end and Back-end development in this course.
You will learn HTML, CSS, Javascript, Database, Angular (Web application framework), Web-design, UI & UX in this course.
As we go through the basic knowledges of Web development in this course, you will build a real world E-commerce website along the way.
You will learn extra skills of build a complete website such as design a logo, images adjustment, payment system integration such PayPal.
You will learn all the necessary technologies to build this entire project & you can still learn the basics along the way

Who is this for?

This course is for anyone who wants to learn about web development.

This course is design for any person who likes to build an entire website like Amazon or Ebay.

The course will cover the most essential topics such as: web frameworks, database, web hosting, design & UI/UX, if you are interesting in such topics and wanted to build a entire project with me, take this course

What You Need to Know?

There's none basic knowledges requirement in this course because we are going to learn everything including basic HTML, CSS, Javascript.

In each section we will discuss the terminology that we will learn, I will be explaining how each line of codes works so you can learn everything as we build the project.

All you need is a computer, and some time with me, let's start this journey together.

More details

Description
Hi! Welcome to The Angular & NestJS E-Commerce Full Stack Web Development Bootcamp 2023!
This course is focused on building a real world application,
We will build a full stack website which will cover tons of tools and technologies including:

HTML5
CSS3
UI / UX
Responsive Design
Figma
Front End Framework - Angular
Back End - NestJS
NodeJS Basics
VS Code
NPM
REST API
Database - Postgres
Database Associations
Database Visualization
Database Schema Design
TypeORM
User Authentication
Admin Authorization
User & Admin Roles
Developer Best Practices
Cookies & Sessions
Web Hosting (Real World Scenario)
App Deployment and Terminal (Real World Scenario)
Image Upload and Storage (Online)
Image Resized and Crop (Online)
Logo Design and Editing (Online)

Through the course we will be discussing all those topics above by building the entire Full Stack Project, an E-commerce Website.
We will explain every topic, including basic web design, responsive design, how to structure the entire website including Frontend and Backend with production database, and deploy the website in only 1 course.
Because through the years in the web development industry I have realized that most of the courses are either focused on only one topic (which means you have to purchase multiple courses in the future to continue the web development journey, or the lack of compiling all the technologies to build a real world application / website. Students usually have to learn things they don't even need, or some technologies are outdated (most people might not even use them), which is wasting a lot of valuable time.

That's why I built this course:
1 course includes the necessary parts for building an entire real world project.

If you have any questions, please don't hesitate to contact me.
Sign up today and see how fun, exciting, and rewarding web development can be!
Who this course is for:
This course is for anyone who wants to learn about web development.
This course is design for any person who likes to build an entire website like Amazon or Ebay.
The course will cover the most essential topics such as: web frameworks, database, web hosting, design & UI/UX, if you are interesting in such topics and wanted to build a entire project with me, take this course

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.