English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 153 lectures (21h 56m) | 9.78 GB
Build React E-commerce with NodeJs and MongoDB API with Payment Integration and 116 how-to solutions along the way
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.
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
Table of Contents
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
NodeJs – API Setup
5 How to initialize your project with NPM
6 How to create express server
7 How to continuously run express server using nodemon
8 How to use import export in NodeJs
9 How to use ENV and gitignore files in NodeJs
NodeJs – Connect to MongoDB
10 How to connect to MongoDB locally
11 How to use mongo atlas as database in the cloud
NodeJs – Route, Controller and Modal
12 Routes and middlewares concept explained
13 How to use controller functions
14 How to create mongoose model using schema
NodeJs – User Authentication
15 How to use bcrypt to hash and compare password
16 How to use morgan as a middleware to log request endpoints
17 How to use Postman to test NodeJs API
18 How to save data in MongoDB
19 How to register user with validation and error responses
20 How to generate JWT (json web token)
21 How to login user using compare password
NodeJs – User Authorization and Route Protection
22 How to send authorization token in HTTP request headers
23 How to protect routes using JWT verify
24 How to protect routes for admin users only using isAdmin middleware
NodeJS – Category CRUD and Postman
25 How to create category model
26 How to make a POST request with JWT token in request headers and body
27 How to create a category and save in MongoDB
28 Creating category CRUD routes
29 How to do CRUD with NodeJs and MongoDB
30 How to test CRUD API endpoints using Postman
NodeJs – Product CRUD and Image Upload with FormData
31 How to write product schema to create product model
32 Creating product using JSON data vs form data
33 How to handle form data with image upload and apply validation
34 How to save a product in MongoDB
35 How to send a list of products as JSON response
36 How to fetch single product from MongoDB
37 How to send photo for each product
38 How to delete a product from MongoDB
39 How to update product in MongoDB
React – Project Setup, Pages, Routing and Styling with Bootstrap
40 How to create a new React project
41 How to create pages in React
42 How to add routing system to React app
43 How to use Bootstrap CSS in React app
44 How to create navigation menu using Bootstrap 5
45 How to create a Jumbotron in Bootstrap 5
React – React Components, Hooks, Forms, Axios and Toast Notifications
46 How to make reusable components in React using props
47 How to use useState hook in React to store user input
48 How to create a user registration form in React
49 Making API request using Axios
50 How to inspect API request error messages in React
51 How to resolve CORS issue and show error messages using Toast notifications
52 How to create a working login page in React
React – Context and Local Storage
53 How to create context and access it’s value in React
54 Saving user login response in context
55 Preserve the state on page reload using local storage
React – Redirects, Private Route and Protecting Pages
56 How to redirect user in React
57 How to conditionally show and hide navigation links
58 User dashboard page
59 How to protect pages using private route in React using react router 6
60 How to delay the redirect using setInterval
61 How to show loading indicator
62 How to protect routes based on server response
React – Axios Configuration and Role Based Rediercts
63 How to configure Axios with base url and token
64 How to create 404 page not found in React
65 How to take user to intended page after login
66 How to create role based routing with dropdown option
React – Admin Dashboard, Sidebar and Access Control
67 Create admin dashboard page
68 How to restrict access to admin user only
69 How to create admin sidebar menu
70 Admin pages with shared sidebar menu
71 User pages with shared sidebar menu
React – Categories CRUD
72 How to make Axios POST request to create category from React app
73 How to display all categories in React
74 How to move code to components for reusability
75 How to use Ant design Modal to update category
76 How to make Axios PUT request to update category
77 How to make Axios DELETE request from React app
React – Image Upload and Searchable Dropdown
78 How to use searchable Select dropdown to show categories list
79 How to select image files to upload in React
80 How to show image preview of uploading file in React
React – Products CRUD
81 How to build a form to create a product
82 How to post form data to create product with image
83 How to show list of products for admin
84 How to render list of products in Bootstrap cards
85 How to pre-populate product data in product update form
86 Fixing update product issues related to photo and shipping fields
87 How to make Axios PUT request to update product
88 How to make Axios DELETE request from React
89 Error handling Cannot set headers after they are sent to client
React – Sorting Products, Responsive Layout, Product Card and Jumbotron
90 How to sort products based on created date and sold
91 How to create 2 column responsive layout using Bootstrap
92 How to use reusable product card component and display responsive image
93 How to add buttons and hover effects to product card
94 How to use ribbons to display product info in cards
95 How to format product price based on local currency
96 Jumbotron color animation CSS
97 How to create animated background color for Jumbotron
Shop Page based on Categories and Price Range
98 Shop page with the list of products
99 How to show filter by categories option in checkbox
100 How to show filter by price range option as radio buttons
101 How to find products based on categories and price range filtering options
102 How to render products based on filtering options in react
103 How to add reset filtering options in react
Load More Pagination
104 How to create paginated products endpoint in server
105 How to add load more feature in React
Search and Display Products
106 How to put search form in navigation menu
107 How to create search component with state to make API request
108 How to create MongoDB to get search results based on multiple properties
109 How to replace local state with context in React
110 How to display search results with search input in navigation menu
Single Product View
111 How to create single product view page
112 Display product in a single product view page
113 How to use React icons
114 Showing additional product information
115 How to display related products in React E-commerce
116 Display related products in product card
Categories View, Custom Hook and Products Based on Category
117 How to create your own custom hook to fetch data
118 How to show categories list in dropdown menu
119 How to show list of categories on a page
120 Create single category view page
121 How to display products by category
Cart Context, Add to Cart and Manage Cart Items
122 How to create cart context
123 How to implement add to cart feature
124 How to make sticky top menu
125 Create cart page
126 How to display products in the cart page
127 How to remove items from the cart
128 Persist cart on page reload
129 How to show cart total
User Profile Update, Delivery Address and Intended Page Redirect
130 How to create a user profile update page in React
131 How to implement user profile update including address
132 Conditional rendering for delivery address
133 Redirect user to cart page after login
Payment Integration (Credit Cart, PayPal) Back to Front
134 Signup to Braintree payment
135 Braintree functions to generate token and process payment
136 Move code from cart page to components
137 Show Braintree Web Drop In UI in React
138 Creating PayPal sandbox account
139 Get payment method nonce on buy button click
140 How to process payment with Braintree
141 How to charge exact amount based on cart total
142 Create a new order on successful payment
143 How to add loading state to disable buy button
User Orders
144 How to get logged-in user’s all orders
145 Display order status in a table
146 How to display user order’s each product
147 How to decrement stock each time a product is sold
Order Management by Admin
148 Display list of orders for admin
149 How to use Ant design’s Select component
150 How to update order status by admin
Email Notifications
151 Sign in to Sendgrid to get API keys for sending emails
152 How to send email on order status change
153 Receive order status update email
Resolve the captcha to access the links!