The E-Commerce Full Stack Web Development Bootcamp 2023

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

Requirements

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.

Description

Hi! Welcome to the 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:HTML5CSS3UI / UXResponsive DesignFigmaFront End Framework - AngularBack End - NestJSNodeJS BasicsVS CodeNPM REST APIDatabase - PostgresDatabase AssociationsDatabase VisualizationDatabase Schema Design TypeORMUser AuthenticationAdmin AuthorizationUser & Admin Roles Developer Best PracticesCookies & SessionsWeb 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!

Overview

Section 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

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

Lecture 5 Introduction of NestJS

Lecture 6 Basic HTML, CSS, Javascript intro

Lecture 7 NestJS Environment Setup & Postman

Lecture 8 Database Environment Setup & PostgreSQL

Lecture 9 NodeS, Express and Server Practice

Lecture 10 Create a new NestJS Project

Lecture 11 NestJS folder structure & how each file works

Lecture 12 Database set up

Lecture 13 NestJS Database Visualization with LucidChart & NestS "CRUD" Generator

Lecture 14 Section 2 Wrap Up

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

Lecture 15 Section 3 intro

Lecture 16 NestJS Backend - Let's build Entity & View Database Table

Lecture 17 Additional Entity fixed & Get method in Controller & Service Implementation

Lecture 18 Create() Method Implementation

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

Lecture 20 Update() Method Implementation & Update Data with Postman

Lecture 21 FindOne() Method Implementation & Find Data with Postman

Lecture 22 Section 3 Wrap Up

Section 4: Let's prepare the Frontend

Lecture 23 Section intro & Angular Local Environment set-up

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

Lecture 25 Angular Routing & Product Component Routing

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

Lecture 27 Display Data in Product-list Component

Lecture 28 Google Fonts & Product List page

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

Lecture 30 Product List views Implementation with CSS

Lecture 31 Modification - Product List Page

Lecture 32 Build our new Product List page

Lecture 33 Use [RouterLink] to Initiate Navigation to a Route.

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

Lecture 35 Build Detail-Component Page

Lecture 36 Combine Landing Page with Product Home Page

Lecture 37 Preparation - Use Postman to write data to Backend

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

Lecture 39 Create Sub-Category Component and display products by SubCategory

Lecture 40 Build our Sub-Category Component Product List

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

Lecture 42 Section 4 Wrap Up

Section 5: Let's build the Payment System

Lecture 43 Payment System Integration

Lecture 44 Install Git and Push the projects to Github.

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

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

Lecture 47 Host our Front end on the same server.

Lecture 48 Insert data from PgAdmin4 + Postman

Lecture 49 Section Wrap Up

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

Lecture 50 Build Website Desktop Viewport (Preparation)

Lecture 51 Desktop view Home page & CSS Grids

Lecture 52 Adjust Product-bags Component Desktop Viewport CSS

Lecture 53 Adjust sub-category Component Desktop view with CSS

Lecture 54 Adjust Product-detail Component Desktop Viewport with CSS

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

Lecture 56 Build a responsive Nav-bar (Mobile menu)

Lecture 57 Build Nav-bar, Clothing, Cosmetics, Accessories Component

Lecture 58 Section Wrap Up

Section 7: CRUD with Frontend Implementation

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

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

Lecture 61 Delete Product Method Implementation

Lecture 62 Edit Product Method Implementation

Lecture 63 Section Wrap Up

Section 8: User Authentication & Authorization

Lecture 64 User Authentication Implementation

Lecture 65 User Authentication Implementation Part 2 - JWT Functionality(Back end & NestJS)

Lecture 66 User Authentication Implementation (Front End & Auth Module)

Lecture 67 User Authorization Implementation With Roles

Lecture 68 Mix User Authorization & User Authentication together to protect routes

Lecture 69 User AuthGuard With Angular - FrontEnd

Lecture 70 Session Wrap up & Course Roundup

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