From 90d4749415b0ca536eea5be3a8e0040f4f8825b5 Mon Sep 17 00:00:00 2001 From: Basir Date: Wed, 13 May 2020 09:50:57 +0430 Subject: [PATCH 1/4] improve readme --- README.md | 137 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 93 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index cb76c37..bea2b63 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,93 @@ -# Amazona: An ECommerce Website like Amazon.com - -Demo : https://amazonaapp.herokuapp.com/ - -## Table of Conent - -- Video-01-Intro -- Video-02-Install-VSCode-Chrome -- Video-03-Website-Template -- Video-04-Product-List -- Video-05-Sidebar -- Video-06-Create-React-App -- Video-07-Render-Products-Array -- Video-08-React-Router-Product-Details -- Video-09-Create-Node-Express-Server -- Video-10-Fetch-Server-Data-Using-React-Hooks -- Video-11-Manage-State-With-Redux -- Video-12-Add-Redux-To-Product-Details -- Video-13-Shopping-Cart-Screen -- Video-14-Connect-to-MongoDB -- Video-15-Signin-Register-Users -- Video-16-Manage-Products-Screen -- Video-17-Checkout-Wizard-Screen -- Video-18-Create-Order -- Video-19-Connect-to-Paypal -- Video-20-User-Profile -- Video-21-Manage-Order-Screen -- Video-22-Filter-Sort-Products -- Video-23-Deploy-Website-on-Heroku - 1. create Heroku Account - 2. create new App - 3. git remote add heroku https://git.heroku.com/myamazona.git - 4. Install Heroku CLI - 5. heroku login - 6. git push heroku master - 7. create https://www.mongodb.com/cloud - 8. create database and copy connection string - 9. add MONGODB_URL to config var of heroku - 10. add PAYPAL_CLIENT_ID to config var of heroku - 11. Update package.json - 12. "build": "rm -rf dist && babel backend -d dist", - 13. "heroku-postbuild": "npm run build && cd frontend && npm install && npm run build" - 14. "engines": { "node": "12.4.0", "npm": "6.9.0"} - 15. Procfile web: node dist/server.js \ No newline at end of file +--- +title: React & Node Tutorial - Full ECommerce in 5 Hours [2020] +published: true +description: You will learn React, Redux, Node, Express, and MongoDB to build a fully-functional e-commerce website like Amazon +tags: React, Nodejs, Tutorial +cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1shw932dw7zutl5u617t.png +--- +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. + +## Source Code and Demo +👉 Demo : https://node-react-ecommerce-app.herokuapp.com +👉 Code : https://github.com/basir/node-react-ecommerce + +## Watch React & Node Tutorial +{% youtube 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 + +### [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) + +## 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. + + + From c69d5ee7a1aa16c7a27deb1e8320c015a5e4b56e Mon Sep 17 00:00:00 2001 From: Basir Date: Wed, 13 May 2020 09:56:45 +0430 Subject: [PATCH 2/4] update video --- README.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index bea2b63..46b2338 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,11 @@ ---- -title: React & Node Tutorial - Full ECommerce in 5 Hours [2020] -published: true -description: You will learn React, Redux, Node, Express, and MongoDB to build a fully-functional e-commerce website like Amazon -tags: React, Nodejs, Tutorial -cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1shw932dw7zutl5u617t.png ---- +# 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. -## Source Code and Demo +## Demo 👉 Demo : https://node-react-ecommerce-app.herokuapp.com -👉 Code : https://github.com/basir/node-react-ecommerce ## Watch React & Node Tutorial -{% youtube Fy9SdZLBTOo %} +[![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 From 299a8870c7eac3e7a36ae2ddbc1a6ad454f9b6a1 Mon Sep 17 00:00:00 2001 From: Basir Date: Wed, 13 May 2020 09:59:12 +0430 Subject: [PATCH 3/4] update --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 46b2338..7a57022 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,11 @@ # 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 +## Demo Website 👉 Demo : https://node-react-ecommerce-app.herokuapp.com -## Watch React & Node Tutorial +## Vieo 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 From 6e9a876abca0b1d0c6dd8738fe50ce9f3a06ed75 Mon Sep 17 00:00:00 2001 From: Basir Date: Wed, 13 May 2020 10:00:42 +0430 Subject: [PATCH 4/4] update --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7a57022..84231bf 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,13 @@ 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://node-react-ecommerce-app.herokuapp.com -## Vieo Tutorial +## 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