Mô tả

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.


Bạn sẽ học được gì

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

Yêu cầu

  • Basic Understanding of JavaScript
  • Basic Understanding of React
  • Basic Understanding of NodeJs

Nội dung khoá học

31 sections

Project Overview and prerequisite

4 lectures
Project overview by user
11:46
Project overview by admin
04:09
Are you ready for this course
05:52
Download Source Code
00:19

NodeJs - API Setup

5 lectures
How to initialize your project with NPM
06:16
How to create express server?
09:29
How to continuously run express server using nodemon
03:32
How to use import export in NodeJs
03:16
How to use ENV and gitignore files in NodeJs
08:08

NodeJs - Connect to MongoDB

2 lectures
How to connect to MongoDB locally
12:25
How to use mongo atlas as database in the cloud
06:59

NodeJs - Route, Controller and Modal

3 lectures
Routes and middlewares concept explained
13:22
How to use controller functions
04:21
How to create mongoose model using schema
11:57

NodeJs - User Authentication

7 lectures
How to use bcrypt to hash and compare password
09:08
How to use morgan as a middleware to log request endpoints
04:35
How to use Postman to test NodeJs API
10:04
How to save data in MongoDB
06:15
How to register user with validation and error responses
14:11
How to generate JWT (json web token)
08:23
How to login user using compare password
06:54

NodeJs - User Authorization and Route Protection

3 lectures
How to send authorization token in HTTP request headers
07:58
How to protect routes using JWT verify
09:46
How to protect routes for admin users only using isAdmin middleware
10:07

NodeJS - Category CRUD and Postman

6 lectures
How to create category model
03:53
How to make a POST request with JWT token in request headers and body
09:09
How to create a category and save in MongoDB
06:51
Creating category CRUD routes
06:13
How to do CRUD with NodeJs and MongoDB
09:43
How to test CRUD API endpoints using Postman
07:42

NodeJs - Product CRUD and Image Upload with FormData

9 lectures
How to write product schema to create product model
08:14
Creating product using JSON data vs form data
10:59
How to handle form data with image upload and apply validation
13:17
How to save a product in MongoDB
06:32
How to send a list of products as JSON response
06:58
How to fetch single product from MongoDB
05:15
How to send photo for each product
05:44
How to delete a product from MongoDB
02:58
How to update product in MongoDB
09:31

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

6 lectures
How to create a new React project
07:37
How to create pages in React
05:57
How to add routing system to React app
04:57
How to use Bootstrap CSS in React app
11:26
How to create navigation menu using Bootstrap 5
07:28
How to create a Jumbotron in Bootstrap 5
08:10

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

7 lectures
How to make reusable components in React using props
06:37
How to use useState hook in React to store user input
08:55
How to create a user registration form in React
07:32
Making API request using Axios
08:39
How to inspect API request error messages in React
06:14
How to resolve CORS issue and show error messages using Toast notifications
12:32
How to create a working login page in React
05:12

React - Context and Local Storage

3 lectures
How to create context and access it's value in React
13:17
Saving user login response in context
08:01
Preserve the state on page reload using local storage
07:32

React - Redirects, Private Route and Protecting Pages

7 lectures
How to redirect user in React
03:27
How to conditionally show and hide navigation links
09:29
User dashboard page
03:37
How to protect pages using private route in React using react router 6
10:08
How to delay the redirect using setInterval
10:28
How to show loading indicator
04:51
How to protect routes based on server response
08:09

React - Axios Configuration and Role Based Rediercts

4 lectures
How to configure Axios with base url and token
05:01
How to create 404 page not found in React
03:41
How to take user to intended page after login
09:18
How to create role based routing with dropdown option
09:40

React - Admin Dashboard, Sidebar and Access Control

5 lectures
Create admin dashboard page
09:12
How to restrict access to admin user only
09:46
How to create admin sidebar menu
07:55
Admin pages with shared sidebar menu
10:57
User pages with shared sidebar menu
08:28

React - Categories CRUD

6 lectures
How to make Axios POST request to create category from React app
12:59
How to display all categories in React
07:42
How to move code to components for reusability
05:05
How to use Ant design Modal to update category
13:56
How to make Axios PUT request to update category
06:18
How to make Axios DELETE request from React app
07:57

React - Image Upload and Searchable Dropdown

3 lectures
How to use searchable Select dropdown to show categories list
12:36
How to select image files to upload in React
08:24
How to show image preview of uploading file in React
03:09

React - Products CRUD

9 lectures
How to build a form to create a product
11:30
How to post form data to create product with image
13:23
How to show list of products for admin
05:48
How to render list of products in Bootstrap cards
11:56
How to pre-populate product data in product update form
11:28
How to make Axios PUT request to update product
09:27
Fixing update product issues related to photo and shipping fields
07:35
How to make Axios DELETE request from React
07:57
Error handling: Cannot set headers after they are sent to client
06:53

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

8 lectures
How to sort products based on created date and sold
11:12
How to create 2 column responsive layout using Bootstrap
02:58
How to use reusable product card component and display responsive image
09:18
How to add buttons and hover effects to product card
12:25
How to use ribbons to display product info in cards
10:59
How to format product price based on local currency
03:09
Jumbotron color animation CSS
00:19
How to create animated background color for Jumbotron
04:20

Shop Page based on Categories and Price Range

6 lectures
Shop page with the list of products
11:13
How to show filter by categories option in checkbox
13:06
How to show filter by price range option as radio buttons
13:21
How to find products based on categories and price range filtering options
10:07
How to render products based on filtering options in react
08:47
How to add reset filtering options in react
06:26

Load More Pagination

2 lectures
How to create paginated products endpoint in server
11:53
How to add load more feature in React
15:21

Search and Display Products

5 lectures
How to put search form in navigation menu
05:17
How to create search component with state to make API request
05:56
How to create MongoDB to get search results based on multiple properties
07:25
How to replace local state with context in React
10:29
How to display search results with search input in navigation menu
10:06

Single Product View

6 lectures
How to create single product view page
15:59
Display product in a single product view page
07:46
How to use React icons
09:22
Showing additional product information
07:27
How to display related products in React E-commerce
08:44
Display related products in product card
02:35

Categories View, Custom Hook and Products Based on Category

5 lectures
How to create your own custom hook to fetch data
09:39
How to show categories list in dropdown menu
04:32
How to show list of categories on a page
10:16
Create single category view page
08:29
How to display products by category
11:01

Cart Context, Add to Cart and Manage Cart Items

8 lectures
How to create cart context
07:19
How to implement add to cart feature
13:20
How to make sticky top menu
08:46
Create cart page
15:32
How to display products in the cart page
11:46
How to remove items from the cart
08:30
Persist cart on page reload
09:13
How to show cart total
06:07

User Profile Update, Delivery Address and Intended Page Redirect

4 lectures
How to create a user profile update page in React
12:20
How to implement user profile update including address
16:01
Conditional rendering for delivery address
12:15
Redirect user to cart page after login
05:58

Payment Integration (Credit Cart, PayPal) Back to Front

10 lectures
Signup to Braintree payment
07:49
Braintree functions to generate token and process payment
12:17
Move code from cart page to components
13:00
Show Braintree Web Drop In UI in React
15:37
Creating PayPal sandbox account
04:33
Get payment method nonce on buy button click
07:48
How to process payment with Braintree
09:19
How to charge exact amount based on cart total
08:23
Create a new order on successful payment
12:43
How to add loading state to disable buy button
04:57

User Orders

4 lectures
How to get logged-in user's all orders
08:28
Display order status in a table
12:30
How to display user order's each product
04:55
How to decrement stock each time a product is sold
10:43

Order Management by Admin

3 lectures
Display list of orders for admin
09:49
How to use Ant design's Select component
07:54
How to update order status by admin
09:09

Email Notifications

3 lectures
Sign in to Sendgrid to get API keys for sending emails
07:42
How to send email on order status change
09:37
Receive order status update email
12:01

Deployment

4 lectures
Deploy NodeJs API to Heroku Part 1
11:30
Deploy NodeJs API to Heroku Part 2
10:02
Deploy React Web App to Heroku
13:30
Deploy to Digital Ocean Cloud Servers
00:18

Bonus

1 lectures
Other courses you may like
01:00

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.