Build ECommerce Shopping Cart by React & Redux 2020



I have used the programming language and functionality in my project list in below

  • Design Shopping Cart Using HTML and CSS

  • Implement React Components For Product List, Filter, Cart

  • Managing Component State using Redux, React-Redux and - Redux-Thunk

  • Creating Animations Using React-Reveal and Add Routes using React-Routers

  • Build Backend using Node, Express, MongoDB and Mongoose

  • Publish Project on the Heroku and MongoDB Atlas


How to start the project---

  • Type npm start(first server start on localhost:3000)

  • after that type npm run server(second server start on loclhost:6000)

  • Before start second server set api in Postman Type:http://localhost:6000/api/products in (GET) and (POST) http://localhost:6000/api/products

  • Press ctr+c disconnect the server


Table Of Content

Introduction


Introduction

  1. Fully-Functional Shopping Cart

  2. Instant Feedback

  3. Animated and Intuitive Design

  4. List Products

  5. Sort Products By Price High or Low

  6. Filter Products by Size

  7. Open Modal By Click on Product

  8. Add Product To Cart using Animation

  9. Handle Multiple Click By Adding More Items

  10. Remove Product

  11. Show Checkout Form

  12. Create Order with user friendly id

  13. Admin Section to see list of products

  14. Using postman to add or remove products and orders


Tools and Technologies

  1. JavaScript (arrow functions, array functions, spread Operators, ...)

  2. React (react-touter-dom, react-reveal, react-modal)

  3. Redux (react-redux, redux-thunk)

  4. Node (express, body-parser, Environment Variables, nodemon)

  5. MongoDB ( mongoose, shortid)

  6. VS Code (ES6 Snippets, ES7 React Extension, ESLint Extension,CSS Peek)

  7. Chrome ( React Developer Tools, Redux Developer Tools)

  8. Git (create repo, commit, remote, create and push branch)

  9. Github (create repo, connect to local repo, pull request and merge)

  10. Postman ( send get, post, put and delete requests to apis)

  11. Deployment ( Heroku, MongoDB Atlas Cloud)


Create React App

  1. Open VS Code and open terminal

  2. cd Desktop

  3. npx create-react-app react-shopping-cart

  4. Remove unused files

  5. Convert App.js Class Component

  6. Add header, main and footer

  7. Update index.css to add grid


Project Development Workflow

  1. Create Google Spreadsheet

  2. Add columns Feature, Description, State, and Duration

  3. Enter Products Component, Show list of products, Open, 2

  4. Add Time ? Hours, Rate 30 USD/Hours, Cost ? USD

  5. Add All Features

  6. Create Github account

  7. Create new repository

  8. Add it as remote repository in VS Code

  9. Commit changes

  10. Push changes on github

  11. Start => create new feature Feature 1 in google spreadsheet

  12. Create a new branch feature-1 for test the workflow

  13. Add "// branch feature 1" in App.js Line 1

  14. Commit with message "feature 1"

  15. Click publish changes

  16. Open repository page on github

  17. Create pull request

  18. Merge pull request

  19. In VS Code switch to master and Sync changes

  20. End => Loop from step 11 for next feature


React

Products Component

  1. Create data.json {products:[{_id, title, ...}]

  2. Update App.js to import data.json

  3. div.content {flex, wrap}

  4. div.main {flex: 3 60rem}

  5. div.sidebar {flex: 1 20rem;}

  6. Create components/Products.js component

  7. Add it to div.main in App.js and set products props

  8. ul.products {flex,center, center,warp, p:0,m:0, style:none}

  9. this.props.products.map(p => li.key={p._id} {flex, p:1, m:1, none,h:47}

  10. div.product { flex, column, space-between, h:100%}

  11. a href="#" > img {max-width, max-height:37} + p {p.title}

  12. div.product-price > div.product.price + button.button.primary Add to cart

  13. product-price {flex, space-between, center}

  14. div {p.price} flex: 1; align: center; size: 2rem

  15. button.button.primary Add To Cart


Filter Component

  1. Create components/Filter.js

  2. Add it above Products component in App.js

  3. Update Filter.js render

  4. div.filter {flex, wrap, p,m:1rem, border-bottom: .1rem}

  5. filter-result {this.props.filteredProducts.length}

  6. filter-sort {flex:1}

  7. label Order select value=this.props.sort

  8. onChange= this.props.sortProducts(e.t.value)

  9. option lowestprice Lowest, ...

  10. filter-size {flex:1}

  11. label Filter select value=this.props.size

  12. onChange= this.props.filterProducts(e.t.value)

  13. option "" ALL, XS, S, M, L, XL, XXL

  14. App.js

  15. Add Filter Component


Cart Component

  1. Set Active Task Management Spreadsheet

  2. Create branch cart-component

  3. Product.js

  4. Handle "Add To Cart" to this.props.addToCart(product)

  5. App.js

  6. Add cartItems to state as []

  7. Create addToCart(product)

  8. Slice, Check product existance, add to cartitems

  9. Cart.js

  10. Define cartItems from this.props

  11. Check cartItems.length and show message

  12. List cartItems {cartItems.length > 0 && (}

  13. index.css

  14. Style cart, cart-header, cart-items (img, li),

  15. Publish changes

  16. Pull request, merge, change to master

  17. Task Management Spreadsheet set it done


Checkout Form

  1. Set Active Task Management Spreadsheet

  2. Create branch checkout-form

  3. Cart.js

  4. Make cart items persistent

  5. Use LocalStorage on App constructor to load cart items (JSON.parse)

  6. Use LocalStorage on addToCart to save cart items (JSON.stringify)

  7. Handle Click on Proceed

  8. Update showCheckout state to true on click

  9. Conditional rendering Checkout Form

  10. Get Email, Name and Address required input

  11. Define handleInput function

  12. Add Checkout Button

  13. Handle onSubmit Form Event by this.createOrder

  14. Create order object and pass to parent to handle it

  15. Commit and Publish changes

  16. Pull request, merge, change to master

  17. Task Management Spreadsheet set it done


Add Modal and Animation

  1. Set Active Task Management Spreadsheet

  2. Create branch animation-modal

  3. Show Animation

  4. Install react-reveal

  5. Create fade effect from bottom for products

  6. Create fade left for add to cart

  7. Create fade right for show checkout form

  8. Open Modal by click on product image

  9. Install react-modal

  10. Products.js

  11. Import Modal

  12. Set state for product to null

  13. Define openModal and closeModal

  14. Show Modal if product exist

  15. Create Modal

  16. Create zoom effect for modal

  17. index.css

  18. Style Product Details

  19. Commit and Publish changes

  20. Pull request, merge, change to master

  21. Task Management Spreadsheet set it done


Node.JS

Create Products Backend

  1. Install nodemon globally

  2. Add server.js

  3. Install express body-parser mongoose shortid

  4. Install MongoDB

  5. app = express()

  6. app.use(bodyParser.json())

  7. mongoose.connect()

  8. create Product model

  9. app.post("/api.products")

  10. Postman send post request

  11. route.get("/api/products")

  12. route.delete("/api/products/:id")


Redux

Add Redux

  1. what is redux (diagram)

  2. update task on spreadsheet

  3. create branch add-redux-products

  4. npm install redux react-redux redux-thunk

  5. create types

  6. types.js

  7. define FETCH_PRODUCTS

  8. actions/productActions.js

  9. declare fetchProducts

  10. create reducers

  11. reducers/productReducers.js

  12. define case FETCH_PRODUCTS

  13. create store

  14. store.js

  15. import redux

  16. set initial state

  17. define initialState

  18. create store

  19. import productReducers

  20. combine reducers

  21. Use store

  22. App.js

  23. import store

  24. wrap all in Provider

  25. connect products

  26. components/Products.js

  27. connect to store

  28. i mport fetchProducts

  29. fetch products on did mount

  30. package.json

  31. set proxy to http://198.168.0.14:6000

  32. npm run server

  33. check products list

  34. commit and publish

  35. send pull request and merge

  36. update spreadsheet


Add Redux To Filter

  1. Updte task and branch

  2. types.js

  3. create FILTER_PRODUCTS_BY_SIZE

  4. create ORDER_PRODUCTS_BY_PRICE

  5. actions/productActions.js

  6. create filterProducts

  7. move app.js filterProducts logic here

  8. create sortProducts

  9. move app.js filterProducts logic here

  10. reducers/productReducers.js

  11. case FILTER_PRODUCTS_BY_SIZE

  12. case ORDER_PRODUCTS_BY_PRICE

  13. Filter.js

  14. connect props: size, sort, items and filteredItems

  15. connect actions: filterProducts and sortProducts

  16. show loading if no filteredProducts

  17. App.js

  18. remove Filter props

  19. check result

  20. update task and branch


Add Redux To Cart

  1. Updte task and branch

  2. types.js

  3. create ADD_TO_CART

  4. create REMOVE_FROM_CART

  5. actions/cartActions.js

  6. create addToCart

  7. create removeFromCart

  8. reducers/cartReducers.js

  9. case ADD_TO_CART

  10. case REMOVE_FROM_CART

  11. Cart.js

  12. connect props: cartItems

  13. connect actions: removeFromCart

  14. Product.js

  15. add action addToCart

  16. App.js

  17. store.jse Cart props

  18. store.js

  19. set initial cartItems to localStorage

  20. check result

  21. update task and branch



Contact us for this Application Solutions by Codersarts Specialist who can help you mentor and guide for such React and NodeJs Application.


If you have project or assignment files, You can send at contact@codersarts.com directly


Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

CodersArts is a Product by Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin
  • Instagram