Create simple POS with React.js, Node.js, and MongoDB: Order Screen

Create simple POS with React.js, Node.js, and MongoDB: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. Finally, we will save the transaction to the database.

Defenition:_ POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment._

In the previous chapter, we worked on role-based access control feature for our react app. We had two roles: admin and employee. We used those user roles for conditional rendering with the react-rbac-guard package.

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. Finally, we will save the transaction to the database.

For the order page, the idea is to have to columns: lefts to display products and right to display total price and products in the cart.

Displaying Products

First, we are going to create a column that displays the number of products for sale. We are going to display them in a grid style by creating a new component called order.js. Now, we will create a file named create.js and work on it.

In create.js, we need to import the required component, hooks, and product actions as displayed in the code snippet below:

import  React,   {    useEffect   }    from    "react";

import   {    useSelector,    useDispatch   }    from    "react-redux";

 import   *    as   productActions  from    "../../actions/product.action";

export  default   ( props)   = > {}

Then, we fetch the product data using useDispatch hook variable inside the useEffect hook as directed in the code snippet below:

 const    dispatch   =   useDispatch();

useEffect(()   = > {

     dispatch( productActions.Index());

   },   []);

Next, we need to import a reducer named productReducer using useSelector hook in order to get the getting product data as displayed in the code snippet below:

 const    productReducer   =   useSelector(({    productReducer   })   = >  productReducer);

Now, we need to create a function to fetch all products. First, we create a product catalog by wrapping it in the card element and using the classes to show four-card items in a row. Each card will have the data concerning a single product. There will also be a button to add the items to the cart. The overall coding implementation of the function is provided in the code snippet below:


 const    renderProductRows   =   ()   = > {

      if   ( productReducer. result)   {

        const   {    result   }   =    productReducer;

        return   (

         <div className= "row" >

           { result   &&

            result.map((item, index) => {

              return (

                <>

      {index % 3 === 0 && <div class="w-100 d-lg-none mt-4"></div>}

                  <div class="col-md-6 col-lg-4 col-xl-3 py-2">

                    <div className="card h-100">

                      <img

                        className="card-img-top img-fluid"

                        src={

                          process.env.REACT_APP_PRODUCT_IMAGE_PATH +

                          "/" +

                          item.image

                        }

                        alt="Card image cap"

                      />

                      <div className="card-block">

                        <h4 className="card-title">{item.name}</h4>

                        <p className="card-text">Price {item.price}</p>

                        <p className="card-text">

                          <small className="text-muted">

                            remain {item.stock}

                          </small>

                        </p>

                       <a href="#" class="btn btn-primary btn-block ">

                          Add to Card

                        </a>                      

</div>

                    </div>

                  </div>

                </>

              );

             })}

         </ div >

       );

     }    else   {

        return    "loading...";

     }

   };

javascript node.js pos tutorial react node

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Create simple POS with React.js, Node.js, and MongoDB

In this chapter, we are going to continue from where we left off from the previous chapter. We are about to add more features to our react table to make it feature-rich and dynamic. Here, we are going to add features like document export, bulk delete, and inline editing.

Create simple POS with React.js, Node.js, and MongoDB #9: CRUD Branch

Create simple POS with React.js, Node.js, and MongoDB: In this chapter, we are going to continue to implement CRUD operation for the general information of a grocery store.

Create simple POS with React.js, Node.js, and MongoDB: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of functionalities.

React.js, Node.js, and MongoDB #8: CRUD POS Machine

In this tutorial, we move forward to CRUD operations for POS machine data. CRUD stands for Create, Read, Update, and Delete operations.