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

Focused View

Ryan Dhungel

21:56:07

287 View

1. Project Overview and prerequisite

1. Project overview by user.mp4

11:46

2. Project overview by admin.mp4

04:09

3. Are you ready for this course.mp4

05:52

4. Download Source Code.html

2. NodeJs - API Setup

1. How to initialize your project with NPM.mp4

06:16

2. How to create express server.mp4

09:29

3. How to continuously run express server using nodemon.mp4

03:32

4. How to use import export in NodeJs.mp4

03:16

5. How to use ENV and gitignore files in NodeJs.mp4

08:08

3. NodeJs - Connect to MongoDB

1. How to connect to MongoDB locally.mp4

12:25

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

06:59

4. NodeJs - Route, Controller and Modal

1. Routes and middlewares concept explained.mp4

13:22

2. How to use controller functions.mp4

04:21

3. How to create mongoose model using schema.mp4

11:57

5. NodeJs - User Authentication

1. How to use bcrypt to hash and compare password.mp4

09:08

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

04:35

3. How to use Postman to test NodeJs API.mp4

10:04

4. How to save data in MongoDB.mp4

06:15

5. How to register user with validation and error responses.mp4

14:11

6. How to generate JWT (json web token).mp4

08:23

7. How to login user using compare password.mp4

06:54

6. NodeJs - User Authorization and Route Protection

1. How to send authorization token in HTTP request headers.mp4

07:58

2. How to protect routes using JWT verify.mp4

09:46

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

10:07

7. NodeJS - Category CRUD and Postman

1. How to create category model.mp4

03:53

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

09:09

3. How to create a category and save in MongoDB.mp4

06:51

4. Creating category CRUD routes.mp4

06:13

5. How to do CRUD with NodeJs and MongoDB.mp4

09:43

6. How to test CRUD API endpoints using Postman.mp4

07:42

8. NodeJs - Product CRUD and Image Upload with FormData

1. How to write product schema to create product model.mp4

08:14

2. Creating product using JSON data vs form data.mp4

10:59

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

13:17

4. How to save a product in MongoDB.mp4

06:32

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

06:58

6. How to fetch single product from MongoDB.mp4

05:15

7. How to send photo for each product.mp4

05:44

8. How to delete a product from MongoDB.mp4

02:58

9. How to update product in MongoDB.mp4

09:31

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

1. How to create a new React project.mp4

07:37

2. How to create pages in React.mp4

05:57

3. How to add routing system to React app.mp4

04:57

4. How to use Bootstrap CSS in React app.mp4

11:26

5. How to create navigation menu using Bootstrap 5.mp4

07:28

6. How to create a Jumbotron in Bootstrap 5.mp4

08:10

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

1. How to make reusable components in React using props.mp4

06:37

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

08:55

3. How to create a user registration form in React.mp4

07:32

4. Making API request using Axios.mp4

08:39

5. How to inspect API request error messages in React.mp4

06:14

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

12:32

7. How to create a working login page in React.mp4

05:12

11. React - Context and Local Storage

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

13:17

2. Saving user login response in context.mp4

08:01

3. Preserve the state on page reload using local storage.mp4

07:32

12. React - Redirects, Private Route and Protecting Pages

1. How to redirect user in React.mp4

03:27

2. How to conditionally show and hide navigation links.mp4

09:29

3. User dashboard page.mp4

03:37

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

10:08

5. How to delay the redirect using setInterval.mp4

10:28

6. How to show loading indicator.mp4

04:51

7. How to protect routes based on server response.mp4

08:09

13. React - Axios Configuration and Role Based Rediercts

1. How to configure Axios with base url and token.mp4

05:01

2. How to create 404 page not found in React.mp4

03:41

3. How to take user to intended page after login.mp4

09:18

4. How to create role based routing with dropdown option.mp4

09:40

14. React - Admin Dashboard, Sidebar and Access Control

1. Create admin dashboard page.mp4

09:12

2. How to restrict access to admin user only.mp4

09:46

3. How to create admin sidebar menu.mp4

07:55

4. Admin pages with shared sidebar menu.mp4

10:57

5. User pages with shared sidebar menu.mp4

08:28

15. React - Categories CRUD

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

12:59

2. How to display all categories in React.mp4

07:42

3. How to move code to components for reusability.mp4

05:05

4. How to use Ant design Modal to update category.mp4

13:56

5. How to make Axios PUT request to update category.mp4

06:18

6. How to make Axios DELETE request from React app.mp4

07:57

16. React - Image Upload and Searchable Dropdown

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

12:36

2. How to select image files to upload in React.mp4

08:24

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

03:09

17. React - Products CRUD

1. How to build a form to create a product.mp4

11:30

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

13:23

3. How to show list of products for admin.mp4

05:48

4. How to render list of products in Bootstrap cards.mp4

11:56

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

11:28

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

07:35

7. How to make Axios PUT request to update product.mp4

09:27

8. How to make Axios DELETE request from React.mp4

07:57

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

06:53

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

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

11:12

2. How to create 2 column responsive layout using Bootstrap.mp4

02:58

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

09:18

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

12:25

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

10:59

6. How to format product price based on local currency.mp4

03:09

7. Jumbotron color animation CSS.html

8. How to create animated background color for Jumbotron.mp4

04:20

19. Shop Page based on Categories and Price Range

1. Shop page with the list of products.mp4

11:13

2. How to show filter by categories option in checkbox.mp4

13:06

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

13:21

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

10:07

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

08:47

6. How to add reset filtering options in react.mp4

06:26

20. Load More Pagination

1. How to create paginated products endpoint in server.mp4

11:53

2. How to add load more feature in React.mp4

15:21

21. Search and Display Products

1. How to put search form in navigation menu.mp4

05:17

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

05:56

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

07:25

4. How to replace local state with context in React.mp4

10:29

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

10:06

22. Single Product View

1. How to create single product view page.mp4

15:59

2. Display product in a single product view page.mp4

07:46

3. How to use React icons.mp4

09:22

4. Showing additional product information.mp4

07:27

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

08:44

6. Display related products in product card.mp4

02:35

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

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

09:39

2. How to show categories list in dropdown menu.mp4

04:32

3. How to show list of categories on a page.mp4

10:16

4. Create single category view page.mp4

08:29

5. How to display products by category.mp4

11:01

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

1. How to create cart context.mp4

07:19

2. How to implement add to cart feature.mp4

13:20

3. How to make sticky top menu.mp4

08:46

4. Create cart page.mp4

15:32

5. How to display products in the cart page.mp4

11:46

6. How to remove items from the cart.mp4

08:30

7. Persist cart on page reload.mp4

09:13

8. How to show cart total.mp4

06:07

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

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

12:20

2. How to implement user profile update including address.mp4

16:01

3. Conditional rendering for delivery address.mp4

12:15

4. Redirect user to cart page after login.mp4

05:58

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

1. Signup to Braintree payment.mp4

07:49

2. Braintree functions to generate token and process payment.mp4

12:17

3. Move code from cart page to components.mp4

13:00

4. Show Braintree Web Drop In UI in React.mp4

15:37

5. Creating PayPal sandbox account.mp4

04:33

6. Get payment method nonce on buy button click.mp4

07:48

7. How to process payment with Braintree.mp4

09:19

8. How to charge exact amount based on cart total.mp4

08:23

9. Create a new order on successful payment.mp4

12:43

10. How to add loading state to disable buy button.mp4

04:57

27. User Orders

1. How to get logged-in users all orders.mp4

08:28

2. Display order status in a table.mp4

12:30

3. How to display user orders each product.mp4

04:55

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

10:43

28. Order Management by Admin

1. Display list of orders for admin.mp4

09:49

2. How to use Ant designs Select component.mp4

07:54

3. How to update order status by admin.mp4

09:09

29. Email Notifications

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

07:42

2. How to send email on order status change.mp4

09:37

3. Receive order status update email.mp4

12:01

Description

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

What You'll Learn?

React Web App Development
NodeJs API Development
Understand E-commerce Fundamentals
Implement User Cart on Your Own
Write Functional React Components
Payment Integration (Credit Card, PayPal) using Braintree - A PayPal Company
Authentication, Authorization and Protecting Routes (Back to Front)
Dedicated Shop Page for Advance Search based on Category and Price Range
Products and Category CRUD (Create, Read, Update, Delete)
Image Preview and Upload
Products Search Feature in Navigation Menu
Using React Context as Global State
Using Local Storage to Persist Data
Admin and User Dashboard
Load More Pagination Feature
Products Quantity and Sold Quantity Update on Each Sale
Order Management by Admin
Email Notification to Users
Deployment to Heroku Cloud

Who is this for?

JavaScript Developers learning to Build Real Apps with React

JavaScript Developers learning to Build NodeJs API

JavaScript Developers learning to Build E-commerce App with Advance CRUD, Authentication, Authorization, Searching and Filtering

What You Need to Know?

Basic Understanding of JavaScript

Basic Understanding of React

Basic Understanding of NodeJs

More details

Description
A FullStack E-commerce App is one of the most popular project for most developers. Everything you learn building an E-commerce project will help you build many other full stack projects because they all share the same concept. Plus, you learn to implement Payment System which is vital to E-commerce apps any many other apps that has some type of monetization system in place. This is one of the main reason why E-commerce based courses are some of the most popular courses here on Udemy.

Why would you want to enroll into this course?
In this course, I have proved that E-commerce apps do not have to be overly complicated. You will be surprised how easy it is to build such rich app. With just the basic knowledge of React and Node, you will be able to build incredible apps of any kind. What you need is an effective way of learning complex topics in easy, practical way which I have provided in this course.

Why yet another E-commerce course?
I already have two E-commerce courses here on Udemy. So why create another one? First of all those existing E-commerce apps are very different in terms of functionalities and extra features. Another reason is the timing. The technology changes at rapid speed. The packages uses last year to create apps are no longer the same this year. That makes it very hard for new students to follow along. Besides E-commerce is one of the most popular project based course here in Udemy. So I had to make another one to make it easier for new developers. There is a lot of improvements in this course, the steps are much easier and straight forward. The code is cleaner and easier to understand.

Is this course suitable for you?
Yes, If you already know the basics of JavaScript, React and NodeJs. If not, then do not worry. Checkout the first few videos of this course for detailed instructions on how to make yourself ready to take on this project. Once you know the basics, you need more and more practice and I can not think of any other project than building E-commerce app from absolute scratch. The amount of knowledge you will gain in this course will be amazing. You will be able to start and successfully build any type of full stack app on your own after completing this course.

What will you learn in this course?
There is so much to learn. In short, you will learn to build React Web App that interacts with NodeJs API. Your app will be fully protected with the Authentication, Authorization and Protected Routes. With hundreds of how-to solutions, you will be amazed at how much you learn in one single course. Each line of code is explained and the clarity of code makes it an absolute joy to build this project.

What makes this course special?
This is the only course where you will learn well over hundreds of how-to solutions. All that in one single course, in one single project. With the beautiful workflow of building an entire E-commerce app from absolute scratch, adding features one after another, the understanding will flow into your brain in a natural way. With hundreds of how-to concepts covered throughout the building process, you will naturally get better at each exercise and implementation makes a lot of sense without any confusion.

What are some of the course highlights?
There are so many exciting features covered in this one course, you will be blown away by excitement and joy. Here are some of the exciting features you will learn to add to your web development skill set:

Creating, reading, updating and deleting products and categories
Uploading images
Using custom product card components to display products
Advance searching and filtering of products
Products based on categories
Sorting products by created date and sold quantity
Product in-stock/out-of-stock, sold quantity update etc
View product with relative products (suggestive selling)
User cart and orders history
Admin and user dashboards
Order management by admin
Email notification to users on order status change
Protected routes for logged-in and admin users
Braintree Payment System (Credit Card and PayPal)
Role based access
Deployment to heroku cloud
116 How-to's solutions
and lots more...

Join this incredible full stack course that guides you on how to build a real E-commerce app from absolute scratch with each line of code explained for you.
Experience the best learning experience with me Ryan while we build this beautiful project from the very beginning to live running live in Heroku cloud servers.

Who this course is for:
JavaScript Developers learning to Build Real Apps with React
JavaScript Developers learning to Build NodeJs API
JavaScript Developers learning to Build E-commerce App with Advance CRUD, Authentication, Authorization, Searching and Filtering

User Reviews

Rating

average 0

Total votes0

Focused display

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

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.