Mean Stack E-Commerce App: Angular, Nx, Primeng [2023]

Use NX, Angular, NodeJs and PrimeNG to build a real world e-commerce app

What you'll learn

Developers that want to learn Angular with NX

Beginners that want to start web development with Angular

Students that want to practicing by building a real world app

Users that want to learn and build their own e-shop

Requirements

Basic Javascript and Typescript knowledge. Computer and internet connection

Description

About This ClassStart Coding Like The Biggest Software Companies in The World!I don't like to do theoretical things, I like to do something Practical!This is not a reading documentation course. You have here a real-world project to learn from, and you will see the exact place of every feature of every technology used in this course.You will learn how to build a Full Web Application MEAN stack using Angular.In this course you will learn to use technologies like:For Frontend :- Angular, And Structuring your Project- NX Monorepo- PrimeNg Material Library- RXJS- NGRX For User Session- SCSSFor Backend ( WebAPI )- NodeJs- Express- MongoDB- JWT (JSON Web Tokens)MEAN Stack is an acronym for MongoDB, Express, Angular and Node.js – whereby all these four are integrated to form solution-built full-stack JavaScript applications.Almost, every web development player in the market is trying to become a MEAN stack app developer.You will learn the basics of building Angular apps. First, you will discover how to set up your environment in record time, including how to debug and run your app. Then, you will explore the Angular component library and how to style your layouts for a great feel. Finally, you will delve into how to call an HTTP API from your app.When you’re finished with this course, you will have the skills and knowledge of Angular, Nodejs And Architecture skills which are needed to tackle profitable, cross-platform projects without learning at least multiple programming languages.Also, this course is a perfect to the concepts of server-side web development. You’ll learn the different parts that make up the back-end of a website or web application, and you’ll gain familiarity with the Node.js runtime environment. After this course, you’ll be set up to explore popular Node frameworks like Express.js to build great API's.You learn in this course how to use mongoDb without any installing extra tools, MongoDB is now on cloud, so you will store your database in safe place!Main Features:E-Shop APP From ScratchAdmin Panel to manage the E-Shop From ScratchGreat E-Shop ArchitectureAdmin product managementAdmin user managementAdmin Order details pageChanging the orders states (shipped, delivered ..)Handling cartProduct FilteringLogin And AuthenticationCheckout process (placing orders)Using Database in the cloudDeployment to Production Servers.Using External Librariesand much more …

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is MEAN Stack?

Lecture 3 Who can take this course?

Lecture 4 How to use this course

Lecture 5 If you get stuck and Errors

Lecture 6 Things change and technologies keep evolving

Lecture 7 And How to Get Most of It

Lecture 8 Course Outlines

Lecture 9 Installing NodeJS

Lecture 10 Configure MongoDB Atlas

Lecture 11 Installing Postman to test our API

Section 2: Starting with the Backend

Lecture 12 Introduction

Lecture 13 Overview to our RESTful API

Lecture 14 Creating the Backend Server with Express

Lecture 15 Reading Environment Variables

Lecture 16 Create First API Call & Parsing Json Data

Lecture 17 Logging API Requests

Lecture 18 Installing Mongoose and Connect to MondoDB Database

Lecture 19 Using MongoDB Atlas

Lecture 20 Optional- Seeding Database

Lecture 21 Read-Write Data to Database Using API

Lecture 22 Analysing the E-Shop Database

Lecture 23 Create Backend API Routes & Schemas

Lecture 24 Enabling CORS & Why Do We Need It

Section 3: Backend: Products & Categories

Lecture 25 Introduction

Lecture 26 Products Model - Schema

Lecture 27 Categories and Order - Schema

Lecture 28 Add and Delete Categories

Lecture 29 Get Categories and Category Details

Lecture 30 Update Category

Lecture 31 Post a New Product REST API

Lecture 32 Get a Product & List of Products REST API

Lecture 33 Show Category details in the Product - Populate

Lecture 34 Update a Product REST API

Lecture 35 Delete a Product REST API

Lecture 36 Get Products Count for Statistics Purposes

Lecture 37 Get Featured Products REST API

Lecture 38 Filtering and Getting Products by Category

Lecture 39 Changing ._id. key to .id. - more frontend friendly

Section 4: Backend: Users & Authentication

Lecture 40 Introduction

Lecture 41 Users Model & Schema

Lecture 42 Register a New User

Lecture 43 Hashing the User Password

Lecture 44 Get User and List of Users Excluding Password

Lecture 45 Login a User & Creating a Token

Lecture 46 Protecting the API and Authentication JWT Middleware

Lecture 47 Authentication Error Handling

Lecture 48 Excluding Routes From Authentication

Lecture 49 Add More Secret User Information to Token

Lecture 50 Users & Admins

Lecture 51 Get User Count

Lecture 52 Update User Data With-Without Password

Section 5: Backend: Orders

Lecture 53 Introduction

Lecture 54 Orders & Order-Items Model & Scheme

Lecture 55 Array of Refs - Example of Link Order to Order Items to Products

Lecture 56 New Order & Create Order Items on Posting New Order

Lecture 57 Get Order Detail and Populate Products in Order Items and User Data

Lecture 58 Update Order Status

Lecture 59 Calculating Total Price of one Order with Mongoose

Lecture 60 Get Total E-Shop Sales using $sum

Lecture 61 Get User Orders

Section 6: Backend: Product Image & Gallery Upload

Lecture 62 Introduction

Lecture 63 Configure Server Side Upload

Lecture 64 Testing Image Upload with Postman

Lecture 65 Validating Uploaded File Types

Lecture 66 Image Upload With Product Post Request

Lecture 67 Image Upload With Product PUT Request

Lecture 68 Product Gallery Multiple Images Upload

Lecture 69 Excluding Uploads Folder From Authentication

Section 7: Starting with Frontend

Lecture 70 E-Commerce NgShop - App Page Structure

Lecture 71 Creating Project Folder and Installing Angular

Lecture 72 Components, Modules, Services in Angular

Section 8: NX Monorepo

Lecture 73 What is NX?

Lecture 74 Installing NX

Lecture 75 Installing Extensions for Rapid Coding

Section 9: NX Real World Project

Lecture 76 NX Real World Project

Lecture 77 Creating Nx workspace for Your Team or Company

Lecture 78 Creating the Applications (Admin Panel App)

Lecture 79 Creating Application-Level Components

Lecture 80 Routing to Application-Level Components

Lecture 81 Master Page with Header & Footer

Lecture 82 Naming Component Selector Rules with ESLint

Lecture 83 Enabling Live Coding Linting

Lecture 84 NX VSCode Extension

Section 10: NX Shared Libraries

Lecture 85 Creating Shared Libraries Through Command Line

Lecture 86 Creating Shared Libraries Through NX Extension

Lecture 87 Creating Components Inside Libraries and Use them in the Apps

Lecture 88 How to Call Libraries- Check Paths

Lecture 89 What about Shared Style Files?

Section 11: NX Shared Styling Files

Lecture 90 Structuring Style Files For Applications (NgShop + Admin)

Lecture 91 PrimeNG Material - Installing 3rd Party Libraries and Include Styles

Lecture 92 Installing PrimeNG

Lecture 93 Using PrimeNG Components in Our Project

Lecture 94 Override PrimeNG fonts

Lecture 95 Installing The Grid System

Section 12: Admin Panel

Lecture 96 Admin Panel Overview

Lecture 97 Building the Shell

Lecture 98 Creating The Routes

Lecture 99 Admin Panel Navigation Sidebar

Lecture 100 Disable Backend Authentication For API's For Frontend Purpose

Section 13: Admin Panel - Categories

Lecture 101 Categories Service - Get Data from Backend

Lecture 102 Use Categories Service in Categories-List Component

Lecture 103 Add Categories From - Use PrimeNG Forms

Lecture 104 Add Categories Form - Bind Form Data

Lecture 105 Add Categories Form - Send Data to Backend

Lecture 106 Delete a Category with Confirmation Dialog

Lecture 107 Edit a Category

Lecture 108 Add Color Picker for Category Color

Lecture 109 Refactoring Code & Beautify Categories Table with More Features

Lecture 110 ESLint Fixes

Section 14: Admin Panel - Products

Lecture 111 Products List Table

Lecture 112 Products Service and Get Products From the Database

Lecture 113 Show the Product Image in the Table

Lecture 114 Build Products Form Template

Lecture 115 Dropdown for Product Categories with Filter

Lecture 116 HTML Editor for Product Detailed Description

Lecture 117 Product Image Upload Field with Thumbnail Display

Lecture 118 Submit a New Product as FormData

Lecture 119 Edit a Product

Lecture 120 Dynamic Validation - Image Field Is Not Required In Edit Mode

Lecture 121 Add Products Table Pagination

Section 15: Admin Panel - Users

Lecture 122 Users List Table and User Services

Lecture 123 Users Form Add and Edit

Lecture 124 Retrieving Countries to Dropdown Using i18n-iso-countries

Lecture 125 Retrieving Countries solution

Section 16: Admin Panel - Orders

Lecture 126 Create Orders Components - Table, Details and Services

Lecture 127 Order Status

Lecture 128 Order Details Component

Lecture 129 Display Order Items with Subtotal Prices

Lecture 130 Order Address and Customer Info

Lecture 131 Update Order Status

Section 17: Admin Panel - Login

Lecture 132 Create Login Page

Lecture 133 Login Service and Retrieve the Token

Lecture 134 Create Local Storage Service and Store Token

Lecture 135 Create Admin Panel Route Guard

Lecture 136 Read Token Data - isAdmin and Expiration

Lecture 137 Enable Back Backend Authentication For API's

Lecture 138 Intercept HTTP requests with Token

Lecture 139 Logout User

Section 18: Admin Panel: Dashboard

Lecture 140 Dashboard Styling

Lecture 141 Dashboard Statistics Services

Section 19: Admin Panel: Refactoring

Lecture 142 Routes Refactoring

Lecture 143 End Subscriptions for Performance

Section 20: NgShop App: Home Page

Lecture 144 Architecture of the Components in the Repository

Lecture 145 Preparing Structure and Styles

Lecture 146 Styling the Header

Lecture 147 Product Search Component

Lecture 148 Banner Components

Lecture 149 Animate Banner

Lecture 150 Overriding PrimeNG Button Style

Lecture 151 Categories Banner

Lecture 152 Product Item

Lecture 153 Featured Products Banner

Lecture 154 Styling Product Item

Section 21: NgShop: Products Page

Lecture 155 Styling Product Item

Lecture 156 Products Page - Reuse Components

Lecture 157 Filtering Products by Category

Lecture 158 Category Page

Lecture 159 Product Details Page

Lecture 160 Product Gallery Image Component

Section 22: NgShop App: Cart & CheckOut

Lecture 161 Cart Service in LocalStorage

Lecture 162 Add Products To Cart

Lecture 163 Restore Shopping Cart on Reload

Lecture 164 Observe Cart - Count Badge in The Header

Lecture 165 Add Product To Cart With Quantity

Lecture 166 Cart Page

Lecture 167 Connect the Cart with Products

Lecture 168 Remove Circular Dependencies Between Libraries

Lecture 169 Remove Products From Cart

Lecture 170 Order Summery Widget

Lecture 171 Update Cart Item Quantity

Lecture 172 Checkout Page

Lecture 173 Placing Order

Lecture 174 Thank you Page

Section 23: NgShop App: NGRX User Sessions

Lecture 175 Enable Login On Checkout

Lecture 176 What is NGRX

Lecture 177 Let's Do- Create NGRX State Store in Users Library

Lecture 178 Diagram- Building User Session Process

Lecture 179 Init User Session Service

Lecture 180 Creating Build User Session Action

Lecture 181 Creating the UsersState

Lecture 182 Create Effective Actions if Token Valid or Not

Lecture 183 Creating Build Session Effect

Lecture 184 Calling Action on Invalid Token

Lecture 185 Observe StateStore Fields Using Selectors

Lecture 186 Auto Fill Checkout Page Based on Logged User

Lecture 187 Refactoring + Place Order with Current User

Section 24: Payment on checkout

Lecture 188 Stripe Payment Gateway

Lecture 189 Installing Required Libraries

Lecture 190 Checkout Payment Flow

Lecture 191 Creating Checkout Session API

Lecture 192 Creating Frontend Checkout Session Service

Lecture 193 Placing Order After Successful Payment

Lecture 194 Placing Order in Thank you Page

Section 25: Refactoring

Lecture 195 Linting Project with NX Lint

Lecture 196 NX Migrate- Updating The Project to Latest Version

Section 26: Backend Deployment

Lecture 197 Installing Heroku and Prepare Git

Lecture 198 Optional- Creating Production Database

Lecture 199 Setting Development and Product Environment Variables

Lecture 200 Deploy the App and Test It

Section 27: Frontend Deployment

Lecture 201 Preparing Git and Github Pages

Lecture 202 Building Frontend Apps

Lecture 203 Deploying Frontend Apps to Github Pages

Lecture 204 Building Multiple APP's, Create Scripts

Section 28: Bonus Section

Lecture 205 Bonus Section

Beginners that want to build their own e-shop with Angular and NX