gem-hunter
Language: JavaScript
Build ECommerce Website Like Amazon By React & Node & MongoDB
Welcome to my React and Node tutorial to build a fully-functional e-commerce website in 5 hours. Open your code editor and follow me for the next hours to build an e-commerce website using React and Node.JS.
👉 Demo : https://oldamazona.webacademy.pro
👉 Click on this image to watch full 5-hours video of this tutorial
$ git clone git@github.com:basir/node-react-ecommerce.git
$ cd node-react-ecommerce
Download it from here: https://docs.mongodb.com/manual/administration/install-community/
$ npm install
$ npm start
# open new terminal
$ cd frontend
$ npm install
$ npm start
It gives you an overview of the tutorial to build an eCommerce website like Amazon.
You need to install a code editor and a web browser to start web development. In this part, we will prepare the environment to start coding.
In this part, you create a web template for the eCommerce website.
We will create a list of products as static HTML elements.
We will create a hamburger menu that shows and hide the sidebar. Also, we design the details page of the products.
This part is about the frontend. We use React library to build the UI elements.
This is the home page of e-commerce. It shows a list of products.
When the user clicks on a product there should a page to show details about that product. This lesson is all about making an attractive details page.
This part is about Node and Express. They are the popular framework to create a web server using JavaScript language. We will create a MongoDB database and save and retrieve the admin user.
In this lesson, we use React Hooks to fetch data from the server. We use the axios library to do this job in a modern async/await style.
When it comes to handling multiple forms with their data nothing is better than state management. We use Redux in this lesson to handle complex state and keep the app behavior predictable.
In this part, we move the details page state to Redux. First, we create reducers then define actions and connect them to the details component.
Shopping Cart is the heart of any e-commerce website. We focus on creating a user-friendly shopping cart using React and Redux.
This lesson is about persisting data on the MongoDB database. We use mongoose package to create models and save and retrieve data from the database.
We need to register the user before redirecting them to the checkout. In this part, we will create forms for getting user info and save them in the database.
Admin should be able to define products and update the count in stock whenever they like. This page is about managing ECommerce products.
In this part, we implement the checkout wizard including sign in, shipping info, payment method, and place order.
Following parts are on my udemy course. Get it by 90% discount
It shows all details about an order includeing shipping, payments and order items. Also it is possible for admin to manage orders like set them as delivered.
This parts create PaypalButton component to show paypal payment button on the screen. when users click on it, they will be redirected to paypal website to make the payment. after payment users will be redirected to details page of the order.
This is an admin page to manage list of orders. Admin can delete an order or set it as delivered.
When user click on thier name on the header menu, this page appears. It consists of two sections. First an profile update form and second order history.
In the home page, right after header, there is a filter bar to filter products based on their name and description. also it is possible to sort product based on prices and arrivals.
This section explains all steps to publish the ecommerce website on heroku. first you need to create a cloud mongodb and the make an account on heroku.
This part shows list of reviews by users for each products. also it provides a form to enter rating and review for every single product. also it update the avg rating of each product by user ratings.
Admin shoud be able to uploads photos from their computer. This section is about uploading images on local server ans aws s3 cloud server.
This section is about uploading images amazon aws s3 cloud server.
In this tutorial, we have made an eCommerce website like Amazon. Feel free to change this project based on your needs and add it to your portfolio. Also, I will love to hear your comment about this React and Node tutorial. Please share your thoughts here.