Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/basir/node-react-ecommerce

Build ECommerce Website Like Amazon By React & Node & MongoDB
https://github.com/basir/node-react-ecommerce

axios body-parser css expressjs file-upload html javascript jsonwebtoken mongodb mongoose node react redux thunk-middleware

Last synced: 6 days ago
JSON representation

Build ECommerce Website Like Amazon By React & Node & MongoDB

Awesome Lists containing this project

README 

        
# React & Node Tutorial - Full ECommerce in 5 Hours [2020]



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 Website



👉 Demo : https://oldamazona.webacademy.pro



## Video Tutorial



👉 Click on this image to watch full 5-hours video of this tutorial



[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/Fy9SdZLBTOo/0.jpg)](https://www.youtube.com/watch?v=Fy9SdZLBTOo)



## You Will Learn



- HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox

- React: Components, Props, Events, Hooks, Router, Axios

- Redux: Store, Reducers, Actions

- Node & Express: Web API, Body Parser, File Upload, JWT

- MongoDB: Mongoose, Aggregation

- Development: ESLint, Babel, Git, Github,

- Deployment: Heroku

- Watch React & Node Tutorial



## Run Locally



### 1. Clone repo



```

$ git clone [email protected]:basir/node-react-ecommerce.git

$ cd node-react-ecommerce

```



### 2. Install MongoDB



Download it from here: https://docs.mongodb.com/manual/administration/install-community/



### 3. Run Backend



```

$ npm install

$ npm start

```



### 4. Run Frontend



```

# open new terminal

$ cd frontend

$ npm install

$ npm start

```



### 5. Create Admin User



- Run this on chrome: http://localhost:5000/api/users/createadmin

- It returns admin email and password



### 6. Login



- Run http://localhost:3000/signin

- Enter admin email and password and click signin



### 7. Create Products



- Run http://localhost:3000/products

- Click create product and enter product info



## Support



- Q/A: https://webacademy.pro/oldamazona

- Contact Instructor: [Basir](mailto:[email protected])



## Video Tutorials



### [00:02:00 Part 01- Introduction](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=120s)



It gives you an overview of the tutorial to build an eCommerce website like Amazon.



### [00:08:26 Part 02- Install Tools](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=506s)



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.



### [00:12:36 Part 03- Website Template](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=756s)



In this part, you create a web template for the eCommerce website.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/56kqn8m5n1m9fejdoxkz.png)



### [00:29:47 Part 04- Products List](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=1787s)



We will create a list of products as static HTML elements.



### [00:41:54 Part 05- Create Sidebar](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=2514s)



We will create a hamburger menu that shows and hide the sidebar. Also, we design the details page of the products.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3sceblg6i6790minhaxg.jpg)



### [00:52:39 Part 06- Create React App](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=3159s)



This part is about the frontend. We use React library to build the UI elements.



### [01:01:09 Part 07- Render Products](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=3669s)



This is the home page of e-commerce. It shows a list of products.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hqiwteg10o8a2cnq0wwi.jpg)



### [01:06:30 Part 08- Product Details](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=3990s)



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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/csskvzbcmz4ypki2xjgk.jpg)



### [01:30:53 Part 09- Create Node Server](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=5453s)



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.



### [01:39:52 Part 10- Fetch Server Data](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=5992s)



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.



### [01:47:55 Part 11- Manage State With Redux](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=6475s)



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.



### [02:07:11 Part 12- Add Redux To Details](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=7631s)



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.



### [02:29:23 Part 13- Shopping Cart Screen](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=8963s)



Shopping Cart is the heart of any e-commerce website. We focus on creating a user-friendly shopping cart using React and Redux.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fyzf0no5ej1fgxp5972e.png)



### [03:08:11 Part 14- Connect MongoDB](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=11291s)



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.



### [03:21:35 Part 15- Sign In User](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=12095s)



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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/92coj0rezr5508vhfv34.png)



### [03:56:02 Part 16- Manage Products](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=14162s)



Admin should be able to define products and update the count in stock whenever they like. This page is about managing ECommerce products.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/154a5zk6vfapukjaxwyu.png)



### [04:38:43 Part 17- Checkout Wizard](https://www.youtube.com/watch?v=Fy9SdZLBTOo&t=16723s)



In this part, we implement the checkout wizard including sign in, shipping info, payment method, and place order.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8w3g9mc3ccijt70wpf3.png)



## Only On Udemy



Following parts are on my udemy course. [Get it by 90% discount](https://www.udemy.com/course/build-ecommerce-website-like-amazon-react-node-mongodb/?couponCode=BASIR1)



### Part 18- Order Details Screen



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.



### Part 19- Connect to PayPal



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.



### Part 20- Manage Order Screen



This is an admin page to manage list of orders. Admin can delete an order or set it as delivered.



### Part 21- User Profile Screen



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.



### Part 22- Filter and Sort Products



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.



### Part 23- Deploy Website on Heroku



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.



### Part 24- Rate and Review Products



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.



1. index.html

2. link fontawesome

3. Rating.js

4. create stars based on props.value

5. show text based on props.text

6. index.css

7. style rating, span color gold and last span to gray, link text to blue

8. HomeScreen.js

9. use Rating component

10. ProductScreen.js

11. use Rating component, wrap it in anchor#reviews

12. list reviews after product details

13. create new review form to get rating and reviews

14. index.css

15. style reviews

16. ProductScreen.js

17. implement submitHandler

18. productActions.js

19. create saveProductReview(productId, review)

20. productConstants.js

21. create product review constants

22. productReducers.js

23. create productReviewSaveReducer

24. store.js

25. add productReviewSaveReducer

26. backend

27. productRoute.js

28. router.post('/:id/reviews')

29. save review in product.reviews

30. update avg rating



### Part 25- Upload Product Images On Local Server



Admin shoud be able to uploads photos from their computer. This section is about uploading images on local server ans aws s3 cloud server.



1. npm install multer

2. routes/uploadRoute.js

3. import express and multer

4. create disk storage with Date.now().jpg as filename

5. set upload as multer({ storage })

6. router.post('/', upload.single('image'))

7. return req.file.path

8. server.js

9. app.use('/api/uploads',uploadRoute)

10. ProductsScreen.js

11. create state hook for uploading

12. create input image file and onChange handler

13. define handleUploadImage function

14. prepare file for upload

15. axios post file as multipart/form-data

16. set image and set uploading

17. check result



### Part 26- Upload Product Images On AWS S3



This section is about uploading images amazon aws s3 cloud server.



1. create aws account

2. open https://s3.console.aws.amazon.com

3. create public bucket as amazona

4. create api key and secret

5. past it into .env as accessKeyId and secretAccessKey

6. move dotenv to config.js

7. add accessKeyId and secretAccessKey to config.js

8. npm install aws-sdk multer-s3

9. routes/uploadRoute.js

10. set aws.config.update to config values

11. create s3 from new aws.S3()

12. create storageS3 from multerS3 by setting s3, bucket and acl

13. set uploadS3 as multer({ storage: storageS3 })

14. router.post('/s3', uploadS3.single('image'))

15. return req.file.location

16. ProductsScreen.js

17. on handleUploadImage set axios.post('api/uploads/s3')

18. check result on website and s3



## Summary



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.