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

سرفصل های دوره

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

1. Introduction

1. Introduction

2. What is MEAN Stack

3. Who can take this course

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

8. Course Outlines

9. Installing NodeJS

10. Configure MongoDB Atlas

11. Installing Postman to test our API

2. 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 And Parsing Json Data

6. Logging API Requests

7. Installing Mongoose and Connect to MondoDB Database

8. Using MongoDB Atlas

9. Optional- Seeding Database

10. Read-Write Data to Database Using API

11. Analysing the E-Shop Database

12. Create Backend API Routes And Schemas

13. Enabling CORS And Why Do We Need It

3. Backend Products And Categories

1. Introduction

2. Products Model - Schema

3. Categories and Order - 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 And 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

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

4. Backend Users And Authentication

1. Introduction

2. Users Model And Schema

3. Register a New User

4. Hashing the User Password

5. Get User and List of Users Excluding Password

6. Login a User And Creating a Token

7. Protecting the API and Authentication JWT Middleware

8. Authentication Error Handling

9. Excluding Routes From Authentication

10. Add More Secret User Information to Token

11. Users And Admins

12. Get User Count

13. Update User Data With-Without Password

5. Backend Orders

1. Introduction

2. Orders And Order-Items Model And Scheme

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

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

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

6. Update Order Status

7. Calculating Total Price of one Order with Mongoose

8. Get Total E-Shop Sales using $sum

9. Get User Orders

6. Backend Product Image And 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. Image Upload With Product PUT Request

7. Product Gallery Multiple Images Upload

8. Excluding Uploads Folder From Authentication

7. Starting with Frontend

1. E-Commerce NgShop - App Page Structure

2. Creating Project Folder and Installing Angular

3. Components, Modules, Services in Angular

8. NX Monorepo

1. What is NX

2. Installing NX

3. Installing Extensions for Rapid Coding

9. NX Real World Project

1. NX Real World Project

2. Creating Nx workspace for Your Team or Company

3. Creating the Applications (Admin Panel App)

4. Creating Application-Level Components

5. Routing to Application-Level Components

6. Master Page with Header And Footer

7. Naming Component Selector Rules with ESLint

8. Enabling Live Coding Linting

9. NX VSCode Extension

10. NX Shared Libraries

1. Creating Shared Libraries Through Command Line

2. Creating Shared Libraries Through NX Extension

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

4. How to Call Libraries- Check Paths

5. What about Shared Style Files

11. NX Shared Styling Files

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

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

3. Installing PrimeNG

4. Using PrimeNG Components in Our Project

5. Override PrimeNG fonts

6. Installing The Grid System

12. Admin Panel

1. Admin Panel Overview

2. Building the Shell

3. Creating The Routes

4. Admin Panel Navigation Sidebar

5. Disable Backend Authentication For APIs For Frontend Purpose

13. Admin Panel - Categories

1. Categories Service - Get Data from Backend

2. Use Categories Service in Categories-List Component

3. Add Categories From - Use PrimeNG Forms

4. Add Categories Form - Bind Form Data

5. Add Categories Form - Send Data to Backend

6. Delete a Category with Confirmation Dialog

7. Edit a Category

8. Add Color Picker for Category Color

9. Refactoring Code And Beautify Categories Table with More Features

10. ESLint Fixes

14. Admin Panel - Products

1. Products List Table

2. Products Service and Get Products From the Database

3. Show the Product Image in the Table

4. Build Products Form Template

5. Dropdown for Product Categories with Filter

6. HTML Editor for Product Detailed Description

7. Product Image Upload Field with Thumbnail Display

8. Submit a New Product as FormData

9. Edit a Product

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

11. Add Products Table Pagination

15. Admin Panel - Users

1. Users List Table and User Services

2. Users Form Add and Edit

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

4. Retrieving Countries solution

16. Admin Panel - Orders

1. Create Orders Components - Table, Details and Services

2. Order Status

3. Order Details Component

4. Display Order Items with Subtotal Prices

5. Order Address and Customer Info

6. Update Order Status

17. Admin Panel - Login

1. Create Login Page

2. Login Service and Retrieve the Token

3. Create Local Storage Service and Store Token

4. Create Admin Panel Route Guard

5. Read Token Data - isAdmin and Expiration

6. Enable Back Backend Authentication For APIs

7. Intercept HTTP requests with Token

8. Logout User

18. Admin Panel Dashboard

1. Dashboard Styling

2. Dashboard Statistics Services

19. Admin Panel Refactoring

1. Routes Refactoring

2. End Subscriptions for Performance

20. NgShop App Home Page

1. Architecture of the Components in the Repository

2. Preparing Structure and Styles

3. Styling the Header

4. Product Search Component

5. Banner Components

6. Animate Banner

7. Overriding PrimeNG Button Style

8. Categories Banner

9. Product Item

10. Featured Products Banner

11. Styling Product Item

21. NgShop Products Page

1. Styling Product Item

2. Products Page - Reuse Components

3. Filtering Products by Category

4. Category Page

5. Product Details Page

6. Product Gallery Image Component

22. NgShop App Cart And CheckOut

1. Cart Service in LocalStorage

2. Add Products To Cart

3. Restore Shopping Cart on Reload

4. Observe Cart - Count Badge in The Header

5. Add Product To Cart With Quantity

6. Cart Page

7. Connect the Cart with Products

8. Remove Circular Dependencies Between Libraries

9. Remove Products From Cart

10. Order Summery Widget

11. Update Cart Item Quantity

12. Checkout Page

13. Placing Order

14. Thank you Page

23. NgShop App NGRX User Sessions

1. Enable Login On Checkout

2. What is NGRX

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

4. Diagram- Building User Session Process

5. Init User Session Service

6. Creating Build User Session Action

7. Creating the UsersState

8. Create Effective Actions if Token Valid or Not

9. Creating Build Session Effect

10. Calling Action on Invalid Token

11. Observe StateStore Fields Using Selectors

12. Auto Fill Checkout Page Based on Logged User

13. Refactoring + Place Order with Current User

24. Payment on checkout

1. Stripe Payment Gateway

2. Installing Required Libraries

3. Checkout Payment Flow

4. Creating Checkout Session API

5. Creating Frontend Checkout Session Service

6. Placing Order After Successful Payment

7. Placing Order in Thank you Page

25. Refactoring

1. Linting Project with NX Lint

2. NX Migrate- Updating The Project to Latest Version

26. Backend Deployment

1. Installing Heroku and Prepare Git

2. Optional- Creating Production Database

3. Setting Development and Product Environment Variables

4. Deploy the App and Test It

27. Frontend Deployment

1. Preparing Git and Github Pages

2. Building Frontend Apps

3. Deploying Frontend Apps to Github Pages

4. Building Multiple APPs, Create Scripts

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy