MEAN Stack E-Commerce App: Angular, NX, PrimeNG [2023]

Focused View

Fadi Nouh

27:03:55

76 View

1. Introduction

1. Introduction.mp4

05:40

2. What is MEAN Stack.mp4

03:38

3. Who can take this course.mp4

03:13

4. How to use this course.html

5. If you get stuck and Errors.html

6. Things change and technologies keep evolving.html

7. And How to Get Most of It.mp4

04:09

8. Course Outlines.mp4

02:58

9. Installing NodeJS.mp4

01:55

10. Configure MongoDB Atlas.mp4

01:57

11. Installing Postman to test our API.mp4

01:50

2. Starting with the Backend

1. Introduction.mp4

01:22

2. Overview to our RESTful API.mp4

03:26

3. Creating the Backend Server with Express.mp4

06:38

4. Reading Environment Variables.mp4

04:59

5. Create First API Call And Parsing Json Data.mp4

06:47

6. Logging API Requests.mp4

02:38

7. Installing Mongoose and Connect to MondoDB Database.mp4

10:02

8. Using MongoDB Atlas.mp4

03:19

9. Optional- Seeding Database.mp4

02:04

10. Read-Write Data to Database Using API.mp4

14:31

11. Analysing the E-Shop Database.mp4

05:40

12. Create Backend API Routes And Schemas.mp4

09:48

13. Enabling CORS And Why Do We Need It.mp4

03:15

3. Backend Products And Categories

1. Introduction.mp4

02:44

2. Products Model - Schema.mp4

06:12

3. Categories and Order - Schema.mp4

01:13

4. Add and Delete Categories.mp4

12:39

5. Get Categories and Category Details.mp4

02:48

6. Update Category.mp4

04:09

7. Post a New Product REST API.mp4

05:55

8. Get a Product And List of Products REST API.mp4

03:47

9. Show Category details in the Product - Populate.mp4

03:01

10. Update a Product REST API.mp4

03:17

11. Delete a Product REST API.mp4

03:45

12. Get Products Count for Statistics Purposes.mp4

03:43

13. Get Featured Products REST API.mp4

05:18

14. Filtering and Getting Products by Category.mp4

06:54

15. Changing . id. key to .id. - more frontend friendly.mp4

02:05

4. Backend Users And Authentication

1. Introduction.mp4

05:12

2. Users Model And Schema.mp4

02:01

3. Register a New User.mp4

05:18

4. Hashing the User Password.mp4

02:57

5. Get User and List of Users Excluding Password.mp4

02:56

6. Login a User And Creating a Token.mp4

11:25

7. Protecting the API and Authentication JWT Middleware.mp4

06:07

8. Authentication Error Handling.mp4

05:07

9. Excluding Routes From Authentication.mp4

06:48

10. Add More Secret User Information to Token.mp4

02:38

11. Users And Admins.mp4

06:46

12. Get User Count.mp4

02:16

13. Update User Data With-Without Password.mp4

04:57

5. Backend Orders

1. Introduction.mp4

01:53

2. Orders And Order-Items Model And Scheme.mp4

05:00

3. Array of Refs - Example of Link Order to Order Items to Products.mp4

01:12

4. New Order And Create Order Items on Posting New Order.mp4

11:42

5. Get Order Detail and Populate Products in Order Items and User Data.mp4

08:10

6. Update Order Status.mp4

04:29

7. Calculating Total Price of one Order with Mongoose.mp4

07:01

8. Get Total E-Shop Sales using $sum.mp4

9. Get User Orders.mp4

03:25

6. Backend Product Image And Gallery Upload

1. Introduction.mp4

02:22

2. Configure Server Side Upload.mp4

11:24

3. Testing Image Upload with Postman.mp4

04:55

4. Validating Uploaded File Types.mp4

06:16

5. Image Upload With Product Post Request.mp4

01:10

6. Image Upload With Product PUT Request.mp4

03:19

7. Product Gallery Multiple Images Upload.mp4

07:17

8. Excluding Uploads Folder From Authentication.mp4

02:57

7. Starting with Frontend

1. E-Commerce NgShop - App Page Structure.mp4

04:13

2. Creating Project Folder and Installing Angular.mp4

03:41

3. Components, Modules, Services in Angular.mp4

03:27

8. NX Monorepo

1. What is NX.mp4

08:25

2. Installing NX.mp4

01:35

3. Installing Extensions for Rapid Coding.mp4

03:47

9. NX Real World Project

1. NX Real World Project.mp4

10:49

2. Creating Nx workspace for Your Team or Company.mp4

10:59

3. Creating the Applications (Admin Panel App).mp4

04:12

4. Creating Application-Level Components.mp4

08:52

5. Routing to Application-Level Components.mp4

05:02

6. Master Page with Header And Footer.mp4

03:11

7. Naming Component Selector Rules with ESLint.mp4

02:57

8. Enabling Live Coding Linting.mp4

05:22

9. NX VSCode Extension.mp4

05:14

10. NX Shared Libraries

1. Creating Shared Libraries Through Command Line.mp4

07:32

2. Creating Shared Libraries Through NX Extension.mp4

07:48

3. Creating Components Inside Libraries and Use them in the Apps.mp4

14:11

4. How to Call Libraries- Check Paths.mp4

02:19

5. What about Shared Style Files.mp4

08:45

11. NX Shared Styling Files

1. Structuring Style Files For Applications (NgShop + Admin).mp4

25:30

2. PrimeNG Material - Installing 3rd Party Libraries and Include Styles.mp4

09:40

3. Installing PrimeNG.mp4

04:48

4. Using PrimeNG Components in Our Project.mp4

02:44

5. Override PrimeNG fonts.mp4

01:41

6. Installing The Grid System.mp4

03:47

12. Admin Panel

1. Admin Panel Overview.mp4

03:08

2. Building the Shell.mp4

07:01

3. Creating The Routes.mp4

04:10

4. Admin Panel Navigation Sidebar.mp4

13:34

5. Disable Backend Authentication For APIs For Frontend Purpose.mp4

01:39

13. Admin Panel - Categories

1. Categories Service - Get Data from Backend.mp4

08:39

2. Use Categories Service in Categories-List Component.mp4

06:26

3. Add Categories From - Use PrimeNG Forms.mp4

09:58

4. Add Categories Form - Bind Form Data.mp4

14:25

5. Add Categories Form - Send Data to Backend.mp4

14:05

6. Delete a Category with Confirmation Dialog.mp4

12:22

7. Edit a Category.mp4

25:07

8. Add Color Picker for Category Color.mp4

08:23

9. Refactoring Code And Beautify Categories Table with More Features.mp4

07:42

10. ESLint Fixes.mp4

04:55

14. Admin Panel - Products

1. Products List Table.mp4

09:31

2. Products Service and Get Products From the Database.mp4

08:14

3. Show the Product Image in the Table.mp4

02:21

4. Build Products Form Template.mp4

13:36

5. Dropdown for Product Categories with Filter.mp4

05:03

6. HTML Editor for Product Detailed Description.mp4

05:07

7. Product Image Upload Field with Thumbnail Display.mp4

10:20

8. Submit a New Product as FormData.mp4

18:57

9. Edit a Product.mp4

08:57

10. Dynamic Validation - Image Field Is Not Required In Edit Mode.mp4

04:31

11. Add Products Table Pagination.mp4

01:26

15. Admin Panel - Users

1. Users List Table and User Services.mp4

07:03

2. Users Form Add and Edit.mp4

08:29

3. Retrieving Countries to Dropdown Using i18n-iso-countries.mp4

09:37

4. Retrieving Countries solution.mp4

02:56

16. Admin Panel - Orders

1. Create Orders Components - Table, Details and Services.mp4

13:02

2. Order Status.mp4

08:30

3. Order Details Component.mp4

17:07

4. Display Order Items with Subtotal Prices.mp4

10:08

5. Order Address and Customer Info.mp4

02:51

6. Update Order Status.mp4

18:00

17. Admin Panel - Login

1. Create Login Page.mp4

22:17

2. Login Service and Retrieve the Token.mp4

12:54

3. Create Local Storage Service and Store Token.mp4

08:31

4. Create Admin Panel Route Guard.mp4

12:10

5. Read Token Data - isAdmin and Expiration.mp4

10:31

6. Enable Back Backend Authentication For APIs.mp4

01:44

7. Intercept HTTP requests with Token.mp4

11:41

8. Logout User.mp4

05:04

18. Admin Panel Dashboard

1. Dashboard Styling.mp4

12:06

2. Dashboard Statistics Services.mp4

11:30

19. Admin Panel Refactoring

1. Routes Refactoring.mp4

08:45

2. End Subscriptions for Performance.mp4

09:08

20. NgShop App Home Page

1. Architecture of the Components in the Repository.mp4

02:58

2. Preparing Structure and Styles.mp4

05:47

3. Styling the Header.mp4

15:12

4. Product Search Component.mp4

12:45

5. Banner Components.mp4

19:06

6. Animate Banner.mp4

07:57

7. Overriding PrimeNG Button Style.mp4

07:20

8. Categories Banner.mp4

27:35

9. Product Item.mp4

13:25

10. Featured Products Banner.mp4

07:10

11. Styling Product Item.mp4

04:39

21. NgShop Products Page

1. Styling Product Item.mp4

01:13

2. Products Page - Reuse Components.mp4

17:04

3. Filtering Products by Category.mp4

19:41

4. Category Page.mp4

13:30

5. Product Details Page.mp4

33:10

6. Product Gallery Image Component.mp4

28:35

22. NgShop App Cart And CheckOut

1. Cart Service in LocalStorage.mp4

13:47

2. Add Products To Cart.mp4

20:58

3. Restore Shopping Cart on Reload.mp4

02:40

4. Observe Cart - Count Badge in The Header.mp4

24:55

5. Add Product To Cart With Quantity.mp4

05:42

6. Cart Page.mp4

25:37

7. Connect the Cart with Products.mp4

07:10

8. Remove Circular Dependencies Between Libraries.mp4

14:09

9. Remove Products From Cart.mp4

10:08

10. Order Summery Widget.mp4

09:46

11. Update Cart Item Quantity.mp4

13:23

12. Checkout Page.mp4

19:06

13. Placing Order.mp4

24:55

14. Thank you Page.mp4

08:48

23. NgShop App NGRX User Sessions

1. Enable Login On Checkout.mp4

06:05

2. What is NGRX.mp4

06:33

3. Lets Do- Create NGRX State Store in Users Library.mp4

08:26

4. Diagram- Building User Session Process.mp4

04:39

5. Init User Session Service.mp4

04:37

6. Creating Build User Session Action.mp4

05:13

7. Creating the UsersState.mp4

07:07

8. Create Effective Actions if Token Valid or Not.mp4

06:57

9. Creating Build Session Effect.mp4

08:04

10. Calling Action on Invalid Token.mp4

10:17

11. Observe StateStore Fields Using Selectors.mp4

06:22

12. Auto Fill Checkout Page Based on Logged User.mp4

09:16

13. Refactoring + Place Order with Current User.mp4

05:24

24. Payment on checkout

1. Stripe Payment Gateway.mp4

04:14

2. Installing Required Libraries.mp4

03:24

3. Checkout Payment Flow.mp4

02:37

4. Creating Checkout Session API.mp4

15:07

5. Creating Frontend Checkout Session Service.mp4

20:57

6. Placing Order After Successful Payment.mp4

06:30

7. Placing Order in Thank you Page.mp4

10:35

25. Refactoring

1. Linting Project with NX Lint.mp4

15:49

2. NX Migrate- Updating The Project to Latest Version.mp4

13:01

26. Backend Deployment

1. Installing Heroku and Prepare Git.mp4

08:24

2. Optional- Creating Production Database.mp4

03:59

3. Setting Development and Product Environment Variables.mp4

06:17

4. Deploy the App and Test It.mp4

12:02

27. Frontend Deployment

1. Preparing Git and Github Pages.mp4

06:48

2. Building Frontend Apps.mp4

04:57

3. Deploying Frontend Apps to Github Pages.mp4

13:08

4. Building Multiple APPs, Create Scripts.mp4

10:24

Description

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

Who is this for?

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

What You Need to Know?

Basic Javascript and Typescript knowledge. Computer and internet connection

More details

Description
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 ...
Who this course is for:
Beginners that want to build their own e-shop with Angular and NX

User Reviews

Rating

average 0

Total votes0

Focused display

I, Fadi, am a full-stack web developer residing in the vibrant city of Prague, located in the heart of Europe!I am an individual who wears multiple hats as a full-stack web developer and designer. My true passion lies in crafting exquisite creations from the ground up. Since 2008, I have been diligently constructing websites and applications. Moreover, I possess a distinguished Master's degree in Software Engineering, bestowed upon me by the esteemed Universidad de Sevilla in Spain.During my collegiate years, a newfound love for instructing and aiding others blossomed within me. This ardor led me to become an esteemed educator, both at my university and prestigious private institutions.Machinery captivates me, and I have a particular affinity for programmable logic controllers (PLC) and human-machine interfaces (HMI). My endeavors perpetually strive to facilitate seamless communication between humans and machines.Over the course of more than a decade since my graduation, I have distilled my professional principles into the following::: Talent often receives exaggerated acclaim, while the essence of success lies in diligent toil. I ardently believe in and practice the virtues of "Hard work.":: The pursuit of knowledge knows no bounds. I perpetually harbor an insatiable curiosity for acquiring novel insights and mastering fresh skills.:: A well-rounded individual must be proficient in multiple languages. Thus, I have honed my abilities to converse in the dialects of the engineering realm, as well as those of teamwork, coordination, management, training, and presentation.:: The possession of skills is meaningless if one fails to apply them effectively, benefiting both businesses and individuals alike.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.