Mô tả

About This Class


Start 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

- SCSS

For 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 Scratch

  • Admin Panel to manage the E-Shop From Scratch

  • Great E-Shop Architecture

  • Admin product management

  • Admin user management

  • Admin Order details page

  • Changing the orders states (shipped, delivered ..)

  • Handling cart

  • Product Filtering

  • Login And Authentication

  • Checkout process (placing orders)

  • Using Database in the cloud

  • Deployment to Production Servers.

  • Using External Libraries

  • and much more ...

Bạn sẽ học được gì

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

Yêu cầu

  • Basic Javascript and Typescript knowledge. Computer and internet connection

Nội dung khoá học

28 sections

Introduction

11 lectures
Introduction
05:40
What is MEAN Stack?
03:38
Who can take this course?
03:13
How to use this course
00:39
If you get stuck and Errors
01:06
Things change and technologies keep evolving
00:27
And How to Get Most of It
04:09
Course Outlines
02:58
Installing NodeJS
01:55
Configure MongoDB Atlas
01:57
Installing Postman to test our API
01:50

Starting with the Backend

13 lectures
Introduction
01:22
Overview to our RESTful API
03:26
Creating the Backend Server with Express
06:38
Reading Environment Variables
04:59
Create First API Call & Parsing Json Data
06:47
Logging API Requests
02:38
Installing Mongoose and Connect to MondoDB Database
10:02
Using MongoDB Atlas
03:19
Optional- Seeding Database
02:04
Read-Write Data to Database Using API
14:31
Analysing the E-Shop Database
05:40
Create Backend API Routes & Schemas
09:48
Enabling CORS & Why Do We Need It
03:15

Backend: Products & Categories

15 lectures
Introduction
02:44
Products Model - Schema
06:12
Categories and Order - Schema
01:13
Add and Delete Categories
12:39
Get Categories and Category Details
02:48
Update Category
04:09
Post a New Product REST API
05:55
Get a Product & List of Products REST API
03:47
Show Category details in the Product - Populate
03:01
Update a Product REST API
03:17
Delete a Product REST API
03:45
Get Products Count for Statistics Purposes
03:43
Get Featured Products REST API
05:18
Filtering and Getting Products by Category
06:54
Changing ._id. key to .id. - more frontend friendly
02:05

Backend: Users & Authentication

13 lectures
Introduction
05:12
Users Model & Schema
02:01
Register a New User
05:18
Hashing the User Password
02:57
Get User and List of Users Excluding Password
02:56
Login a User & Creating a Token
11:25
Protecting the API and Authentication JWT Middleware
06:07
Authentication Error Handling
05:07
Excluding Routes From Authentication
06:48
Add More Secret User Information to Token
02:38
Users & Admins
06:46
Get User Count
02:16
Update User Data With-Without Password
04:57

Backend: Orders

9 lectures
Introduction
01:53
Orders & Order-Items Model & Scheme
05:00
Array of Refs - Example of Link Order to Order Items to Products
01:12
New Order & Create Order Items on Posting New Order
11:42
Get Order Detail and Populate Products in Order Items and User Data
08:10
Update Order Status
04:29
Calculating Total Price of one Order with Mongoose
07:01
Get Total E-Shop Sales using $sum
06:42
Get User Orders
03:25

Backend: Product Image & Gallery Upload

8 lectures
Introduction
02:22
Configure Server Side Upload
11:24
Testing Image Upload with Postman
04:55
Validating Uploaded File Types
06:16
Image Upload With Product Post Request
01:10
Image Upload With Product PUT Request
03:19
Product Gallery Multiple Images Upload
07:17
Excluding Uploads Folder From Authentication
02:57

Starting with Frontend

3 lectures
E-Commerce NgShop - App Page Structure
04:13
Creating Project Folder and Installing Angular
03:41
Components, Modules, Services in Angular
03:27

NX Monorepo

3 lectures
What is NX?
08:25
Installing NX
01:35
Installing Extensions for Rapid Coding
03:47

NX Real World Project

9 lectures
NX Real World Project
10:49
Creating Nx workspace for Your Team or Company
10:59
Creating the Applications (Admin Panel App)
04:12
Creating Application-Level Components
08:52
Routing to Application-Level Components
05:02
Master Page with Header & Footer
03:11
Naming Component Selector Rules with ESLint
02:57
Enabling Live Coding Linting
05:22
NX VSCode Extension
05:14

NX Shared Libraries

5 lectures
Creating Shared Libraries Through Command Line
07:32
Creating Shared Libraries Through NX Extension
07:48
Creating Components Inside Libraries and Use them in the Apps
14:11
How to Call Libraries- Check Paths
02:19
What about Shared Style Files?
08:45

NX Shared Styling Files

6 lectures
Structuring Style Files For Applications (NgShop + Admin)
25:30
PrimeNG Material - Installing 3rd Party Libraries and Include Styles
09:40
Installing PrimeNG
04:48
Using PrimeNG Components in Our Project
02:44
Override PrimeNG fonts
01:41
Installing The Grid System
03:47

Admin Panel

5 lectures
Admin Panel Overview
03:08
Building the Shell
07:01
Creating The Routes
04:10
Admin Panel Navigation Sidebar
13:34
Disable Backend Authentication For API's For Frontend Purpose
01:39

Admin Panel - Categories

10 lectures
Categories Service - Get Data from Backend
08:39
Use Categories Service in Categories-List Component
06:26
Add Categories From - Use PrimeNG Forms
09:58
Add Categories Form - Bind Form Data
14:25
Add Categories Form - Send Data to Backend
14:05
Delete a Category with Confirmation Dialog
12:22
Edit a Category
25:07
Add Color Picker for Category Color
08:23
Refactoring Code & Beautify Categories Table with More Features
07:42
ESLint Fixes
04:55

Admin Panel - Products

11 lectures
Products List Table
09:31
Products Service and Get Products From the Database
08:14
Show the Product Image in the Table
02:21
Build Products Form Template
13:36
Dropdown for Product Categories with Filter
05:03
HTML Editor for Product Detailed Description
05:07
Product Image Upload Field with Thumbnail Display
10:20
Submit a New Product as FormData
18:57
Edit a Product
08:57
Dynamic Validation - Image Field Is Not Required In Edit Mode
04:31
Add Products Table Pagination
01:26

Admin Panel - Users

4 lectures
Users List Table and User Services
07:03
Users Form Add and Edit
08:29
Retrieving Countries to Dropdown Using i18n-iso-countries
09:37
Retrieving Countries solution
02:56

Admin Panel - Orders

6 lectures
Create Orders Components - Table, Details and Services
13:02
Order Status
08:30
Order Details Component
17:07
Display Order Items with Subtotal Prices
10:08
Order Address and Customer Info
02:51
Update Order Status
18:00

Admin Panel - Login

8 lectures
Create Login Page
22:17
Login Service and Retrieve the Token
12:54
Create Local Storage Service and Store Token
08:31
Create Admin Panel Route Guard
12:10
Read Token Data - isAdmin and Expiration
10:31
Enable Back Backend Authentication For API's
01:44
Intercept HTTP requests with Token
11:41
Logout User
05:04

Admin Panel: Dashboard

2 lectures
Dashboard Styling
12:06
Dashboard Statistics Services
11:30

Admin Panel: Refactoring

2 lectures
Routes Refactoring
08:45
End Subscriptions for Performance
09:08

NgShop App: Home Page

11 lectures
Architecture of the Components in the Repository
02:58
Preparing Structure and Styles
05:47
Styling the Header
15:12
Product Search Component
12:45
Banner Components
19:06
Animate Banner
07:57
Overriding PrimeNG Button Style
07:20
Categories Banner
27:35
Product Item
13:25
Featured Products Banner
07:10
Styling Product Item
04:39

NgShop: Products Page

6 lectures
Styling Product Item
01:13
Products Page - Reuse Components
17:04
Filtering Products by Category
19:41
Category Page
13:30
Product Details Page
33:10
Product Gallery Image Component
28:35

NgShop App: Cart & CheckOut

14 lectures
Cart Service in LocalStorage
13:47
Add Products To Cart
20:58
Restore Shopping Cart on Reload
02:40
Observe Cart - Count Badge in The Header
24:55
Add Product To Cart With Quantity
05:42
Cart Page
25:37
Connect the Cart with Products
07:10
Remove Circular Dependencies Between Libraries
14:09
Remove Products From Cart
10:08
Order Summery Widget
09:46
Update Cart Item Quantity
13:23
Checkout Page
19:06
Placing Order
24:55
Thank you Page
08:48

NgShop App: NGRX User Sessions

13 lectures
Enable Login On Checkout
06:05
What is NGRX
06:33
Let's Do- Create NGRX State Store in Users Library
08:26
Diagram- Building User Session Process
04:39
Init User Session Service
04:37
Creating Build User Session Action
05:13
Creating the UsersState
07:07
Create Effective Actions if Token Valid or Not
06:57
Creating Build Session Effect
08:04
Calling Action on Invalid Token
10:17
Observe StateStore Fields Using Selectors
06:22
Auto Fill Checkout Page Based on Logged User
09:16
Refactoring + Place Order with Current User
05:24

Payment on checkout

7 lectures
Stripe Payment Gateway
04:14
Installing Required Libraries
03:24
Checkout Payment Flow
02:37
Creating Checkout Session API
15:07
Creating Frontend Checkout Session Service
20:57
Placing Order After Successful Payment
06:30
Placing Order in Thank you Page
10:35

Refactoring

2 lectures
Linting Project with NX Lint
15:49
NX Migrate- Updating The Project to Latest Version
13:01

Backend Deployment

4 lectures
Installing Heroku and Prepare Git
08:24
Optional- Creating Production Database
03:59
Setting Development and Product Environment Variables
06:17
Deploy the App and Test It
12:02

Frontend Deployment

4 lectures
Preparing Git and Github Pages
06:48
Building Frontend Apps
04:57
Deploying Frontend Apps to Github Pages
13:08
Building Multiple APP's, Create Scripts
10:24

Bonus Section

1 lectures
Bonus Section
00:32

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.