MERN STACK 2022 React E-Commerce Node API with 116 How-To’s

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

Build React E-commerce with NodeJs and MongoDB API with Payment Integration and 116 how-to solutions along the way

1. Project Overview and prerequisite

1. Project overview by user

2. Project overview by admin

3. Are you ready for this course

4. Download Source Code.html

2. NodeJs - API Setup

1. How to initialize your project with NPM

2. How to create express server

3. How to continuously run express server using nodemon

4. How to use import export in NodeJs

5. How to use ENV and gitignore files in NodeJs

3. NodeJs - Connect to MongoDB

1. How to connect to MongoDB locally

2. How to use mongo atlas as database in the cloud

4. NodeJs - Route, Controller and Modal

1. Routes and middlewares concept explained

2. How to use controller functions

3. How to create mongoose model using schema

5. NodeJs - User Authentication

1. How to use bcrypt to hash and compare password

2. How to use morgan as a middleware to log request endpoints

3. How to use Postman to test NodeJs API

4. How to save data in MongoDB

5. How to register user with validation and error responses

6. How to generate JWT (json web token)

7. How to login user using compare password

6. NodeJs - User Authorization and Route Protection

1. How to send authorization token in HTTP request headers

2. How to protect routes using JWT verify

3. How to protect routes for admin users only using isAdmin middleware

7. NodeJS - Category CRUD and Postman

1. How to create category model

2. How to make a POST request with JWT token in request headers and body

3. How to create a category and save in MongoDB

4. Creating category CRUD routes

5. How to do CRUD with NodeJs and MongoDB

6. How to test CRUD API endpoints using Postman

8. NodeJs - Product CRUD and Image Upload with FormData

1. How to write product schema to create product model

2. Creating product using JSON data vs form data

3. How to handle form data with image upload and apply validation

4. How to save a product in MongoDB

5. How to send a list of products as JSON response

6. How to fetch single product from MongoDB

7. How to send photo for each product

8. How to delete a product from MongoDB

9. How to update product in MongoDB

9. React - Project Setup, Pages, Routing and Styling with Bootstrap

1. How to create a new React project

2. How to create pages in React

3. How to add routing system to React app

4. How to use Bootstrap CSS in React app

5. How to create navigation menu using Bootstrap 5

6. How to create a Jumbotron in Bootstrap 5

10. React - React Components, Hooks, Forms, Axios and Toast Notifications

1. How to make reusable components in React using props

2. How to use useState hook in React to store user input

3. How to create a user registration form in React

4. Making API request using Axios

5. How to inspect API request error messages in React

6. How to resolve CORS issue and show error messages using Toast notifications

7. How to create a working login page in React

11. React - Context and Local Storage

1. How to create context and access its value in React

2. Saving user login response in context

3. Preserve the state on page reload using local storage

12. React - Redirects, Private Route and Protecting Pages

1. How to redirect user in React

2. How to conditionally show and hide navigation links

3. User dashboard page

4. How to protect pages using private route in React using react router 6

5. How to delay the redirect using setInterval

6. How to show loading indicator

7. How to protect routes based on server response

13. React - Axios Configuration and Role Based Rediercts

1. How to configure Axios with base url and token

2. How to create 404 page not found in React

3. How to take user to intended page after login

4. How to create role based routing with dropdown option

14. React - Admin Dashboard, Sidebar and Access Control

1. Create admin dashboard page

2. How to restrict access to admin user only

3. How to create admin sidebar menu

4. Admin pages with shared sidebar menu

5. User pages with shared sidebar menu

15. React - Categories CRUD

1. How to make Axios POST request to create category from React app

2. How to display all categories in React

3. How to move code to components for reusability

4. How to use Ant design Modal to update category

5. How to make Axios PUT request to update category

6. How to make Axios DELETE request from React app

16. React - Image Upload and Searchable Dropdown

1. How to use searchable Select dropdown to show categories list

2. How to select image files to upload in React

3. How to show image preview of uploading file in React

17. React - Products CRUD

1. How to build a form to create a product

2. How to post form data to create product with image

3. How to show list of products for admin

4. How to render list of products in Bootstrap cards

5. How to pre-populate product data in product update form

6. Fixing update product issues related to photo and shipping fields

7. How to make Axios PUT request to update product

8. How to make Axios DELETE request from React

9. Error handling Cannot set headers after they are sent to client

18. React - Sorting Products, Responsive Layout, Product Card and Jumbotron

1. How to sort products based on created date and sold

2. How to create 2 column responsive layout using Bootstrap

3. How to use reusable product card component and display responsive image

4. How to add buttons and hover effects to product card

5. How to use ribbons to display product info in cards

6. How to format product price based on local currency

7. Jumbotron color animation CSS.html

8. How to create animated background color for Jumbotron

19. Shop Page based on Categories and Price Range

1. Shop page with the list of products

2. How to show filter by categories option in checkbox

3. How to show filter by price range option as radio buttons

4. How to find products based on categories and price range filtering options

5. How to render products based on filtering options in react

6. How to add reset filtering options in react

20. Load More Pagination

1. How to create paginated products endpoint in server

2. How to add load more feature in React

21. Search and Display Products

1. How to put search form in navigation menu

2. How to create search component with state to make API request

3. How to create MongoDB to get search results based on multiple properties

4. How to replace local state with context in React

5. How to display search results with search input in navigation menu

22. Single Product View

1. How to create single product view page

2. Display product in a single product view page

3. How to use React icons

4. Showing additional product information

5. How to display related products in React E-commerce

6. Display related products in product card

23. Categories View, Custom Hook and Products Based on Category

1. How to create your own custom hook to fetch data

2. How to show categories list in dropdown menu

3. How to show list of categories on a page

4. Create single category view page

5. How to display products by category

24. Cart Context, Add to Cart and Manage Cart Items

1. How to create cart context

2. How to implement add to cart feature

3. How to make sticky top menu

4. Create cart page

5. How to display products in the cart page

6. How to remove items from the cart

7. Persist cart on page reload

8. How to show cart total

25. User Profile Update, Delivery Address and Intended Page Redirect

1. How to create a user profile update page in React

2. How to implement user profile update including address

3. Conditional rendering for delivery address

4. Redirect user to cart page after login

26. Payment Integration (Credit Cart, PayPal) Back to Front

1. Signup to Braintree payment

2. Braintree functions to generate token and process payment

3. Move code from cart page to components

4. Show Braintree Web Drop In UI in React

5. Creating PayPal sandbox account

6. Get payment method nonce on buy button click

7. How to process payment with Braintree

8. How to charge exact amount based on cart total

9. Create a new order on successful payment

10. How to add loading state to disable buy button

27. User Orders

1. How to get logged-in users all orders

2. Display order status in a table

3. How to display user orders each product

4. How to decrement stock each time a product is sold

28. Order Management by Admin

1. Display list of orders for admin

2. How to use Ant designs Select component

3. How to update order status by admin

29. Email Notifications

1. Sign in to Sendgrid to get API keys for sending emails

2. How to send email on order status change

3. Receive order status update email

53,700 تومان

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

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

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

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