4.77 out of 5
4.77
86 reviews on Udemy

MEAN Stack E-Commerce App: Angular 12, NX, PrimeNg [2021]

Build Great E-Shop with Admin Panel using the latest technologies: Nodejs , Mongo, Angular 12, Nrwl NX Monorepo, PrimeNG
Instructor:
Fadi Nouh
631 students enrolled
English [Auto]
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

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 (Soon)

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

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.

Welcome to the course

1
What Are We Going to Do?
2
What is MEAN Stack?
3
Who can take this course: Course Prerequisites
4
Course Q/A and How to Get Most of It?
5
Join Our Community!
6
Follow us!

Tools and Environment

1
Installing our Coding Editor (IDE) + Extensions
2
Installing Nodejs
3
Configure MongoBD Atlas
4
Installing PostMan to Test our API's

Starting With The Backend

1
Introduction
2
Overview to our RESTful API
3
Creating the Backend Server with Express
4
Reading Environment Variables
5
Create First API Call & Parsing Json Data
6
Important note about parsing json data
7
Logging API Requests
8
Installing Mongoose and Connect to MongoDB Database
9
Using MongoDB Compass
10
Optional: Seeding Database
11
Read/Write Data to Database Using API
12
Analysing the E-Shop Database
13
Create Backend API Routes & Schemas
14
Enabling CORS & Why Do We Need It?
15
Section Code

Backend : Products & Categories

1
Introduction
2
Products Model & Schema
3
Categories Model & Schema
4
Add and Delete Categories
5
Get Categories and Category Details
6
Update Category
7
Post a New Product REST API
8
Get a Product & List of Products REST API
9
Show Category Details in the Product - Populate
10
Update a Product REST API
11
Delete a Product REST API and Validate Id
12
Get Products Count for Statistics Purposes
13
Get Featured Products REST API
14
Filtering and Getting Products by Category
15
Changing "_id" key to "id" - more frontend friendly
16
Section Code

Backend : Users & Authentication

1
Introduction
2
Users Model & Schema
3
Post/Register a New User REST API
4
Hashing the User Password
5
Get User and List of Users Excluding Password
6
Update User Data With/Without Password
7
Login a User REST API & Creating a Token
8
Protecting the API and Authentication JWT Middleware
9
Authentication Error Handling
10
Excluding REST API Routes From Authentication
11
Add More Secret User Information to Token
12
Users & Admins
13
Get User Count REST API
14
Section Code

Backend : Orders

1
Introduction
2
Orders & Order-Items Model & Scheme
3
Array of Refs - Example of Link Order to Order Items to Products
4
New Order & Create Order Items on Posting New Order
5
Get Order Detail and Populate Products in Order Items and User Data
6
Update Order Status & Delete Order
7
Delete Order Items after Deleting the Order
8
Explaining the Solution
9
Calculating Total Price of one Order
10
Get Total E-Shop Sales using $sum
11
Getting User Orders
12
Section Code

Backend: Product Image & Gallery Upload

1
Introduction
2
Configure Server Side Upload
3
Testing Image Upload with Postman
4
Validating Uploaded File Types
5
Image Upload With Product Post Request
6
Product Gallery Multiple Images Upload
7
Image Upload With Product PUT Request
8
Static Folder & Excluding Uploads Folder From Authentication
9
Section Code

Starting with Frontend

1
E-Commerce NgShop - App Page Structure
2
Creating Project Folder and Installing Angular
3
Components, Modules, Services in Angular

NX Monorepo

1
What is NX & MonoRepo?
2
Overview on NX Real World Example - E-Shop
3
Installing NX
4
Installing Extensions for Rapid Coding

Extensions are very helpful on increase your coding skills and productivity, you will find in the resources of this lecture the extensions file which I talked about.

NX: Basic Structure for E-Shop App + Admin Panel App

1
Creating Nx workspace for Your Team or Company
2
Creating the Applications (Admin Panel App)
3
Creating Application-Level Components
4
Creating Routes
5
Master Page with Header & Footer Components
6
Naming Component Selector Rules with ESLint
7
NX ESLint: Enabling Live Coding Linting
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 out of 5
86 Ratings

Detailed Rating

Stars 5
64
Stars 4
17
Stars 3
4
Stars 2
1
Stars 1
0
30-Day Money-Back Guarantee

Includes

25 hours on-demand video
27 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
MEAN Stack E-Commerce App: Angular 12, NX, PrimeNg [2021]
Price:
$138.98 $105

Community

For Professionals

For Businesses

We support Sales, Marketing, Account Management and CX professionals. Learn new skills. Share your expertise. Connect with experts. Get inspired.

Community

Partnership Opportunities

Layer 1
samcx.com
Logo
Register New Account
Compare items
  • Total (0)
Compare
0