• Post category:StudyBullet-3
  • Reading time:21 mins read


Build Great E-Shop with Admin Panel using the latest technologies: Nodejs , Mongo, Angular 12, Nrwl NX Monorepo, PrimeNG

What you will learn

Build a Great eCommerce Web Application with Angular, NX MonoRepo, Node, Express & MongoDB

An actual real-world project built in a linear and progressive manner

Great Division of the course so you can pick up FullStack, Frontend or Backend

Admin area to manage customers, products & orders.

Learn NodeJS API (Backend) Development

Learn to Implement Authentication based on JWT

Understand the terminology and concepts of Angular Architecture

Get up to speed with Angular design principles and methodologies

Make truly reusable components that look great

Discover Web design patterns used by experienced engineers

Advanced Mongoose Queries and Relationships Between Database Collections

File Upload & Multiple File Upload

Use modern JavaScript features (ES6, ES7)

Full E-Commerce project to add to your portfolio

Description

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 12, And Structuring your Project

– NX Monorepo

– PrimeNg Material Library

– RXJS

– NGRX For User Session

– SCSS

For Backend ( WebAPI )


Get Instant Notification of New Courses on our Telegram channel.


– 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 …

After this course you will have a full working e-commerce Angular Apps  that you can use or add to your portfolio, even you can take the code of the E-Shop and adjust it to fit for your needs and create your own E-Shop platform.

English
language

Content

Welcome to the course
What Are We Going to Do?
What is MEAN Stack?
Who can take this course: Course Prerequisites
Course Q/A and How to Get Most of It?
Tools and Environment
Installing our Coding Editor (IDE) + Extensions
Installing Nodejs
Configure MongoBD Atlas
Using MondoDB Compass
Optional: Seeding Database
Installing PostMan to Test our API’s
Starting With The Backend
Introduction
Overview to our RESTful API
Creating the Backend Server with Express
Reading Environment Variables
Create First API Call & Parsing Json Data
Important note about parsing json data
Logging API Requests
Installing Mongoose and Connect to MongoDB Database
Read/Write Data to Database Using API
Analysing the E-Shop Database
Create Backend API Routes & Schemas
Enabling CORS & Why Do We Need It?
Section Code
Backend : Products & Categories
Introduction
Products Model & Schema
Categories Model & Schema
Add and Delete Categories
Get Categories and Category Details
Update Category
Post a New Product REST API
Get a Product & List of Products REST API
Show Category Details in the Product – Populate
Update a Product REST API
Delete a Product REST API and Validate Id
Get Products Count for Statistics Purposes
Get Featured Products REST API
Filtering and Getting Products by Category
Changing “_id” key to “id” – more frontend friendly
Section Code
Backend : Users & Authentication
Introduction
Users Model & Schema
Post/Register a New User REST API
Hashing the User Password
Get User and List of Users Excluding Password
Update User Data With/Without Password
Login a User REST API & Creating a Token
Protecting the API and Authentication JWT Middleware
Authentication Error Handling
Excluding REST API Routes From Authentication
Add More Secret User Information to Token
Users & Admins
Get User Count REST API
Section Code
Backend : Orders
Introduction
Orders & Order-Items Model & Scheme
Array of Refs – Example of Link Order to Order Items to Products
New Order & Create Order Items on Posting New Order
Get Order Detail and Populate Products in Order Items and User Data
Update Order Status & Delete Order
Explaining the Solution
Calculating Total Price of one Order
Get Total E-Shop Sales using $sum
Getting User Orders
Section Code
Backend: Product Image & Gallery Upload
Introduction
Configure Server Side Upload
Testing Image Upload with Postman
Validating Uploaded File Types
Image Upload With Product Post Request
Product Gallery Multiple Images Upload
Image Upload With Product PUT Request
Static Folder & Excluding Uploads Folder From Authentication
Section Code
Starting with Frontend
E-Commerce NgShop – App Page Structure
Creating Project Folder and Installing Angular
Components, Modules, Services in Angular
NX Monorepo
What is NX & MonoRepo?
Overview on NX Real World Example – E-Shop
Installing NX
Installing Extensions for Rapid Coding
NX: Basic Structure for E-Shop App + Admin Panel App
Creating Nx workspace for Your Team or Company
Creating the Applications (Admin Panel App)
Creating Application-Level Components
Creating Routes
Master Page with Header & Footer Components
Naming Component Selector Rules with ESLint
NX ESLint: Enabling Live Coding Linting
NX VSCode Extension
NX: Shared Libraries
Creating Shared Libraries Through Command Line Using NPX
Creating Shared Libraries Through NX Extension
Creating Components Inside Libraries and Use them in the Apps
How to Call Libraries: Check Paths
NX: Shared Styling Files
What about Shared Style Files?
Structuring Style Files For Applications (NgShop + Admin)
Installing 3rd Party Libraries and Include Styles
Installing PrimeNG
Using PrimeNG Components in Our Project
Override PrimeNG Fonts
Installing The Grid System
Admin Panel Application
Introduction – Admin Panel Overview
Building the Main Shell
Creating The Routes and Show Shell
Admin Panel Navigation Sidebar
Disable Backend Authentication For API’s For Frontend Purpose
Section Code
Admin Panel: Categories
Categories List Table
Categories Service – Get Data from Backend
Call getCategories Service in Categories-List Component
Add Categories Form – Use PrimeNG Forms
Add Categories Form – Bind Form Data
Add Categories Form – Send Data to Backend
Delete a Category with Confirmation Dialog
Edit a Category
Add Color Picker for Category Color
Refactoring Code & Beautify Categories Table with More Features
ESLint Fixes
Refactoring and Use Environment Variables for API’s
Section Code
Admin Panel: Products
Products: What are we going to do?
Products List Table
Products Service and Get Products From the Database
Show the Product Image in the Table
Build Products Form Template
Dropdown for Product Categories with Filter
HTML Editor for Product Detailed Description
Product Image Upload Field with Thumbnail Display
Submit a New Product as FormData
Edit a product
Dynamic Validation – Image Field Is Not Required In Edit Mode
Add Products Table Pagination
Section Code
Admin Panel: Users
Users: What are we going to do?
Users List Table and User Services
Users Form Add and Edit
The Code
Retrieving Countries to Dropdown Using i18n-iso-countries
Section Code
Admin Panel: Orders
Orders: What are we going to do?
Create Orders Components – Table, Details and Services
Order Status
Order Details Component
Display Order Items with Subtotal Prices
Order Address and Customer Info
Update Order Status
Section Code
Admin Panel: Login & Authentication
Login : What are we going to do?
Login Page
Login Service and Retrieve the Token
Create Local Storage Service and Store Token
Create Admin Panel Route Guard
Read Token Data – isAdmin and Expiration
Enable Back Backend Authentication For API’s
Intercept HTTP requests with Token
Logout User
Section Code
Admin Panel: Dashboard
Dashboard Styling
Section Code
Admin Panel: Refactoring
Routes Refactoring
End Subscriptions for Performance
Section Code
NgShop App: Home Page
Architecture of the Components in the Repository
Preparing Structure and Styles
Styling the Header
Product Search Component
Banner Components & Removing Library in NX
Animate Banner
Overriding PrimeNG Button Style
Categories Banner
Product Item
Featured Products Banner
Styling Product Item
Section Code
NgShop App: Products
Products Page Overview
Products Page – Reuse Components
Filtering Products by Category
Category Page
Product Details Page
Product Gallery Image Component
Section Code
NgShop App: Cart & CheckOut
Cart Service and Initialize Cart in LocalStorage
Add Products To Cart
Restore Shopping Cart on Reload
Observe Cart – Count Badge in The Header
Add Product To Cart With Quantity
Cart Page Template
Connect the Cart with Products
Remove Circular Dependencies Between Libraries
Remove Products From Cart
Order Summery Widget
Update Cart Item Quantity
Checkout Page
Placing Order
Thank you Page
Section Code
Refactoring
Linting Project with NX Lint
NX Migrate: Updating The Project to Latest Version
Section Code
Backend Deployment
Installing Heroku and Prepare Git
Optional: Creating Production Database
Setting Development and Product Environment Variables
Deploy the App and Test It
Section Code
Frontend Apps Deployment
Preparing Git and Github Pages
Building Frontend Apps
Deploying Frontend Apps to Github Pages
Building Multiple APP’s, Create Scripts
Great Job! What is next?
This Course is Growing! How?