↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

react-shopping-cart

eCommerce JavaScript

Build ECommerce Shopping Cart by React & Redux 2020 Edition

Demo: https://reactredux-shoppingcart.herokuapp.com/
Get 90% Discount On This Course At Udemy

What you’ll learn

  • 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

Are there any course requirements or prerequisites?

  • Basic HTML and CSS
  • Basic JavaScript

Who this course is for:

  • Javascript developers
  • Web Developers
  • Freelancers
  • Programming Students

Table Of Content

  1. Introduction

    1. 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 
      2.   <li>
    Tools and Technologies <ol dir="auto">
      <li>
        JavaScript (arrow functions, array functions, spread Operators, &#8230;)
      </li>
      <li>
        React (react-touter-dom, react-reveal, react-modal)
      </li>
      <li>
        Redux (react-redux, redux-thunk)
      </li>
      <li>
        Node (express, body-parser, Environment Variables, nodemon)
      </li>
      <li>
        MongoDB ( mongoose, shortid)
      </li>
      <li>
        VS Code (ES6 Snippets, ES7 React Extension, ESLint Extension,CSS Peek)
      </li>
      <li>
        Chrome ( React Developer Tools, Redux Developer Tools)
      </li>
      <li>
        Git (create repo, commit, remote, create and push branch)
      </li>
      <li>
        Github (create repo, connect to local repo, pull request and merge)
      </li>
      <li>
        Postman ( send get, post, put and delete requests to apis)
      </li>
      <li>
        Deployment ( Heroku, MongoDB Atlas Cloud)
      </li>
    </ol>
  </li>
  
  <li>
    Create React App <ol dir="auto">
      <li>
        Open VS Code and open terminal
      </li>
      <li>
        cd Desktop
      </li>
      <li>
        npx create-react-app react-shopping-cart
      </li>
      <li>
        Remove unused files
      </li>
      <li>
        Convert App.js Class Component
      </li>
      <li>
        Add header, main and footer
      </li>
      <li>
        Update index.css to add grid
      </li>
    </ol>
  </li>
  
  <li>
    Project Development Workflow <ol dir="auto">
      <li>
        Create Google Spreadsheet
      </li>
      <li>
        Add columns Feature, Description, State, and Duration
      </li>
      <li>
        Enter Products Component, Show list of products, Open, 2
      </li>
      <li>
        Add Time ? Hours, Rate 30 USD/Hours, Cost ? USD
      </li>
      <li>
        Add All Features
      </li>
      <li>
        Create Github account
      </li>
      <li>
        Create new repository
      </li>
      <li>
        Add it as remote repository in VS Code
      </li>
      <li>
        Commit changes
      </li>
      <li>
        Push changes on github
      </li>
      <li>
        Start => create new feature Feature 1 in google spreadsheet
      </li>
      <li>
        Create a new branch feature-1 for test the workflow
      </li>
      <li>
        Add &#8220;// branch feature 1&#8221; in App.js Line 1
      </li>
      <li>
        Commit with message &#8220;feature 1&#8221;
      </li>
      <li>
        Click publish changes
      </li>
      <li>
        Open repository page on github
      </li>
      <li>
        Create pull request
      </li>
      <li>
        Merge pull request
      </li>
      <li>
        In VS Code switch to master and Sync changes
      </li>
      <li>
        End => Loop from step 11 for next feature
      </li>
    </ol>
  </li>
</ol>
    2. React

      1. 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 
        2.   <li>
    Filter Component <ol dir="auto">
      <li>
        Create components/Filter.js
      </li>
      <li>
        Add it above Products component in App.js
      </li>
      <li>
        Update Filter.js render
      </li>
      <li>
        div.filter {flex, wrap, p,m:1rem, border-bottom: .1rem}
      </li>
      <li>
        filter-result {this.props.filteredProducts.length}
      </li>
      <li>
        filter-sort {flex:1}
      </li>
      <li>
        label Order select value=this.props.sort
      </li>
      <li>
        onChange= this.props.sortProducts(e.t.value)
      </li>
      <li>
        option lowestprice Lowest, &#8230;
      </li>
      <li>
        filter-size {flex:1}
      </li>
      <li>
        label Filter select value=this.props.size
      </li>
      <li>
        onChange= this.props.filterProducts(e.t.value)
      </li>
      <li>
        option &#8220;&#8221; ALL, XS, S, M, L, XL, XXL
      </li>
      <li>
        App.js
      </li>
      <li>
        Add Filter Component
      </li>
    </ol>
  </li>
  
  <li>
    Cart Component <ol dir="auto">
      <li>
        Set Active Task Management Spreadsheet
      </li>
      <li>
        Create branch cart-component
      </li>
      <li>
        Product.js
      </li>
      <li>
        Handle &#8220;Add To Cart&#8221; to this.props.addToCart(product)
      </li>
      <li>
        App.js
      </li>
      <li>
        Add cartItems to state as []
      </li>
      <li>
        Create addToCart(product)
      </li>
      <li>
        Slice, Check product existance, add to cartitems
      </li>
      <li>
        Cart.js
      </li>
      <li>
        Define cartItems from this.props
      </li>
      <li>
        Check cartItems.length and show message
      </li>
      <li>
        List cartItems {cartItems.length > 0 && (}
      </li>
      <li>
        index.css
      </li>
      <li>
        Style cart, cart-header, cart-items (img, li),
      </li>
      <li>
        Publish changes
      </li>
      <li>
        Pull request, merge, change to master
      </li>
      <li>
        Task Management Spreadsheet set it done
      </li>
    </ol>
  </li>
  
  <li>
    Checkout Form <ol dir="auto">
      <li>
        Set Active Task Management Spreadsheet
      </li>
      <li>
        Create branch checkout-form
      </li>
      <li>
        Cart.js
      </li>
      <li>
        Make cart items persistent
      </li>
      <li>
        Use LocalStorage on App constructor to load cart items (JSON.parse)
      </li>
      <li>
        Use LocalStorage on addToCart to save cart items (JSON.stringify)
      </li>
      <li>
        Handle Click on Proceed
      </li>
      <li>
        Update showCheckout state to true on click
      </li>
      <li>
        Conditional rendering Checkout Form
      </li>
      <li>
        Get Email, Name and Address required input
      </li>
      <li>
        Define handleInput function
      </li>
      <li>
        Add Checkout Button
      </li>
      <li>
        Handle onSubmit Form Event by this.createOrder
      </li>
      <li>
        Create order object and pass to parent to handle it
      </li>
      <li>
        Commit and Publish changes
      </li>
      <li>
        Pull request, merge, change to master
      </li>
      <li>
        Task Management Spreadsheet set it done
      </li>
    </ol>
  </li>
  
  <li>
    Add Modal and Animation <ol dir="auto">
      <li>
        Set Active Task Management Spreadsheet
      </li>
      <li>
        Create branch animation-modal
      </li>
      <li>
        Show Animation
      </li>
      <li>
        Install react-reveal
      </li>
      <li>
        Create fade effect from bottom for products
      </li>
      <li>
        Create fade left for add to cart
      </li>
      <li>
        Create fade right for show checkout form
      </li>
      <li>
        Open Modal by click on product image
      </li>
      <li>
        Install react-modal
      </li>
      <li>
        Products.js
      </li>
      <li>
        Import Modal
      </li>
      <li>
        Set state for product to null
      </li>
      <li>
        Define openModal and closeModal
      </li>
      <li>
        Show Modal if product exist
      </li>
      <li>
        Create Modal
      </li>
      <li>
        Create zoom effect for modal
      </li>
      <li>
        index.css
      </li>
      <li>
        Style Product Details
      </li>
      <li>
        Commit and Publish changes
      </li>
      <li>
        Pull request, merge, change to master
      </li>
      <li>
        Task Management Spreadsheet set it done
      </li>
    </ol>
  </li>
</ol>
      2. Node.JS

        1. 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”)
      3. Redux

        1. 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. import fetchProducts
          29. fetch products on did mount
          30. package.json
          31. set proxy to http://127.0.0.1:5000
          32. npm run server
          33. check products list
          34. commit and publish
          35. send pull request and merge
          36. update spreadsheet 
          2.   <li>
    Add Redux To Filter <ol dir="auto">
      <li>
        Updte task and branch
      </li>
      <li>
        types.js
      </li>
      <li>
        create FILTER_PRODUCTS_BY_SIZE
      </li>
      <li>
        create ORDER_PRODUCTS_BY_PRICE
      </li>
      <li>
        actions/productActions.js
      </li>
      <li>
        create filterProducts
      </li>
      <li>
        move app.js filterProducts logic here
      </li>
      <li>
        create sortProducts
      </li>
      <li>
        move app.js filterProducts logic here
      </li>
      <li>
        reducers/productReducers.js
      </li>
      <li>
        case FILTER_PRODUCTS_BY_SIZE
      </li>
      <li>
        case ORDER_PRODUCTS_BY_PRICE
      </li>
      <li>
        Filter.js
      </li>
      <li>
        connect props: size, sort, items and filteredItems
      </li>
      <li>
        connect actions: filterProducts and sortProducts
      </li>
      <li>
        show loading if no filteredProducts
      </li>
      <li>
        App.js
      </li>
      <li>
        remove Filter props
      </li>
      <li>
        check result
      </li>
      <li>
        update task and branch
      </li>
    </ol>
  </li>
  
  <li>
    Add Redux To Cart <ol dir="auto">
      <li>
        Updte task and branch
      </li>
      <li>
        types.js
      </li>
      <li>
        create ADD_TO_CART
      </li>
      <li>
        create REMOVE_FROM_CART
      </li>
      <li>
        actions/cartActions.js
      </li>
      <li>
        create addToCart
      </li>
      <li>
        create removeFromCart
      </li>
      <li>
        reducers/cartReducers.js
      </li>
      <li>
        case ADD_TO_CART
      </li>
      <li>
        case REMOVE_FROM_CART
      </li>
      <li>
        Cart.js
      </li>
      <li>
        connect props: cartItems
      </li>
      <li>
        connect actions: removeFromCart
      </li>
      <li>
        Product.js
      </li>
      <li>
        add action addToCart
      </li>
      <li>
        App.js
      </li>
      <li>
        remove Cart props
      </li>
      <li>
        store.js
      </li>
      <li>
        set initial cartItems to localStorage
      </li>
      <li>
        check result
      </li>
      <li>
        update task and branch
      </li>
    </ol>
  </li>
</ol>
        2. Advanced Topics

          1. Create Order
            1. Backend
            2. server.js
            3. create order modal
            4. get /api/orders
            5. post /api/orders
            6. delete /api/orders/:id
            7. Frontend
            8. create types
            9. types.js
            10. CLEAR_ORDER, CLEAR_CART, CREATE_ORDER
            11. create actions
            12. actions/orderActions.js
            13. createOrder(order)
            14. clearOrder()
            15. create reducers
            16. reducers/orderReducers.js
            17. case CREATE_ORDER
            18. case CLEAR_ORDER
            19. Update Cart Component
            20. components/Cart.js
            21. connect order, createOrder, clearOrder
            22. form onSubmit={this.createOrder}
            23. createOrder() this.props.createOrder(order)
            24. closeModal() this.props.clearOrder()
            25. render()
            26. const { cartItems, order } = this.props;
            27. {order && (} 
            2.   <li>
    Manage Orders <ol dir="auto">
      <li>
        Add new page
      </li>
      <li>
        Install react-router-dom
      </li>
      <li>
        App.js
      </li>
      <li>
        Import BrowserRouter, Route, Link
      </li>
      <li>
        render()
      </li>
      <li>
        BrowserRouter
      </li>
      <li>
        Route path=&#8221;/admin&#8221; component={AdminScreen}
      </li>
      <li>
        Route path=&#8221;/&#8221; exact={true} component={HomeScreen}
      </li>
      <li>
        HomeScreen.js
      </li>
      <li>
      </li>
      <li>
        AdminScreen.js
      </li>
      <li>
      </li>
      <li>
        components/Orders.js
      </li>
      <li>
        render() Orders
      </li>
      <li>
        Backend
      </li>
      <li>
        server.js
      </li>
      <li>
        app.get(&#8220;/api/orders&#8221;)
      </li>
      <li>
        app.delete(&#8220;/api/orders/:id&#8221;)
      </li>
      <li>
        Frontend
      </li>
      <li>
        types.js
      </li>
      <li>
        FETCH_ORDERS
      </li>
      <li>
        actions/orderActions.js
      </li>
      <li>
        fetchOrders()
      </li>
      <li>
        reducers/orderReducers.js
      </li>
      <li>
        case FETCH_ORDERS {orders: action.payload}
      </li>
      <li>
        components/Orders.js
      </li>
      <li>
        connect orders, fetchOrders
      </li>
      <li>
        componentDidMount() fetchOrders
      </li>
      <li>
        render()
      </li>
      <li>
        !orders Loading&#8230;
      </li>
      <li>
        table orders
      </li>
      <li>
        index.css
      </li>
      <li>
        style orders
      </li>
    </ol>
  </li>
</ol>
          2. Deploy Website

            1. Create MongoDB Cloud Database
            2. Login to https://www.mongodb.com/cloud
            3. Add database user
            4. Left sidebar> Select Security > Database Access
            5. Select Add New User button
            6. Enter user name and password and click Add User
            7. Add IP whitelist
            8. Left sidebar > Select Security > Network Access
            9. Select Add IP Address
            10. Enter 0.0.0.0/0 in Whitelist Entry and click Confirm
            11. Get connection string
            12. Left sidebar > Select Altas > Cluster
            13. Click Connect
            14. Click Connect to your application
            15. Click Copy button
            16. Step 2: Deploy On Heroku
            17. Create git repository in amazona folder using git init
            18. Create Heroku Account at heroku.com
            19. Heroku
            20. Create Heroku account on heroku.com
            21. Install Heroku cli https://devcenter.heroku.com/articles/heroku-cli
            22. Open Terminal
            23. heroku login
            24. heroku apps:create react-shopping-cart-best
            25. Edit package.json
            26. “engines”: { “node”: “12.4.0”, “npm”: “6.9.0”}
            27. Create Procfile
            28. web: node server.js
            29. Set MongoDB connection string in Heroku
            30. Open Heroku apps https://dashboard.heroku.com/apps/
            31. Select your apps, open Setting Tab and click Reveal Config Vars
            32. Add key MONGODB_URL
            33. Enter copied connection string from the previous step
            34. Update database name and username and password
            35. Add key NODE_MODULES_CACHE and value false
            36. app.use(“/”, express.static(__dirname + “/build”));
            37. app.get(“/”, (req, res) => res.sendFile(__dirname + “/build/index.html”));
            38. git add . && git commit -m “publish”
            39. git push heroku


↑