This tutorial will comprise of two parts
- Frameworks description
- Building the Node app from scratch
- Testing with Postman
- Creating a Template React app.
- Creating Routes and Views.
I recommend using the *VSCode Editor for this tutorial.*
Below are the libraries and frameworks we will be using:
nedb: NeDB is much like SQLite in that it is a smaller, embeddable version of a much larger database system.NeDB is a smaller NoSQL datastore that mimics MongoDB.
socket.io:Socket.IO enables real-time bidirectional
event-based communication. It works on every platform, browser or device,
focusing equally on reliability and speed.
express: Express is a Fast, unopinionated, minimalist web framework for Node.js. express features will enable us to create our web server.
nodemon: Nodemon checks for changes in your source and automatically restart your server.
body-parser: body-parser extract the entire body portion of an incoming request stream and exposes it on req.body .
HTTP: Http allows Node.js to transfer data over the HyperText Transfer Protocol (HTTP).
Let’s continue by creating the backend with node.js, I will assume you have node and npm installed.
For this tutorial we are going to create the Node app (express app) from scratch. it can also be done automatically using the ejs template.
Create a directory via your Command Line Interface (CLI) named
Access the folder via CLI thus:
real-time-pos-system folder create new folder named
Let’s install our dependencies:
enter button for the following asked questions:
you will be shown the following message:
npm install express --save
npm install http --save
npm install nodemon --save
npm install nedb --save
Create a file named
index.js in your
real-time-pos-system folder using your
index.js is the entry point for our node app, as you can see it is located in
the root of our app.
insert the following code in your
This file is the entry point to our node express app. it is comprised of routes that will handle requests and responses to and from the browser.
Below are dependencies assigned to variables.
Below, The express variable
app is used to allows data to be sent to the
database using http request body.
Below are imported files that will represent inventory and transaction routes.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served. — Wikipedia
Below, the node app is restricted to resources within using CORS and allows
OPTIONS to be used.
Below is the Node app default route
The Websocket logic for Live Cart
On page load, give user current cart
On page load, make client update live cart
When the cart data is updated by the POS and keeps track of it
Broadcasts updated live cart to all WebSocket clients
Let’s continue, create a directory inside
Create two files named
transactions.js in your api folder
insert the following code to your
The necessary dependencies are assigned to variables
app.use(bodyParser.json()) will allow the
body of a HTTP request to sent to the database.
An inventory variable
inventoryDB is assigned with an instance of
Datastore we created earlier. The
an instance has two options
filename which specifies the path of the database and autoload, which
automatically loads the database if set to true.
app.get("/, function(req, res) function is the default path for the
app.get("/product/:/productId function enables the app to get a product
from the inventory database using it’s ID.
app.get("/products", function(req, res) function gets all products from
the inventory database.
app.post("/product", function(req, res) function is used to save an
inventory product to the database.
app.delete("/product/:productId", function(req, res) is used to delete
product using product ID.
app.put("/product", function(req, res) updates a product using it product
Let’s continue, insert the following code to your
The necessary dependencies are assigned to variables as was done previously.
A Transaction’s variable is created with filename and autoload using the
Datastore as done earlier.
app.get("/, function(req, res) function is the default path for the
app.get('/all', function (req, res) function retrieves all transactions
from the transactions database.
app.get('/limit', function (req, res) function retrieves transactions with
app.get('/day-total', function (req, res) function is gets total sales for
the current day.
app.get('/by-date', function (req, res) function is used to get
transactions using a particular date
app.post('/new', function (req, res)) function is used to add new a
app.get('/:transactionId', function (req, res) function is used to
retrieve a single transaction.
To Start Node app from root directory using CLI , type command:
And that is the Back End sorted!
We are going to accomplish the following:
1.Creating a Template React app.
2.Creating Routes and Views with Code Description.
See here for source
Frameworks we will be using:
axios is a Promise based HTTP client for the browser and node.js.
Bootstrap is a free open source library that contains HTML and CSS design templates for designing websites and web applications.
React-Bootstrap is a Bootstrap 3 components built with React.
Make sure you have Node and NPM installed.
Check Node and Npm Version via Command Line Interface (CLI)
real-time-pos-folder we used in part 1 Using CLI to create react
app globally using npm:
For npm version 5.1 or earlier
npm install -g create-react-app
To create your app, run a single command
npm install create-react-app react-pos
For npm version 5.2+ and higher
npx install -g create-react-app
To create our appointment scheduler app, run a single command
The Directory of your app will look something like this:
│ └── favicon.ico
│ └── manifest.json
To start the project in development mode via CLI
Access your app directory using:
Install the following dependencies:
npm install bootstrap
npm install react-bootstrap
npm install axios
npm install moment
Creating Routes and Views
We are going to start by creating our routes
Start by editing your
App.js in your root directory with following code:
Also update your
index.js in your root directory:
You maybe wondering about the
Header Components, but we will create
Create the following path in your “src” folder directory of your react-pos app:
Create Main.js in the
js/components folder with the following code:
Notice that our
Main.js component is not a class; rather it is a functional
component,. Arrow function to be precise. we are creating our routes using
Lets create our
Header.js component for navigation of our app
you will notice as we continue that the
Header component is included in all
Now lets create our views, Let’s start with the
Inventory.js component in the
Notice that We are using a class for the
inventory component above.
componentWillMount is a Lifecycle method which is used to modify the component
state, in this particular situation we are retrieving products from the
inventory database by through our Node.js Express App We created in part 1. the
response is assigned to the product array using
setState . All this is done
before the page is fully loaded.
render function will display our UI elements in the DOM (Document Object
renderFunction checks the product array and display the result in
Let’s move on to the
POS.js Component. The
Pos component will allows the
user to add items to cart with prices. the cart will be updated in real time.
Pos.js file in
Pos component enables the user to add items to cart, accept payment via
checkout, print the receipt and saves to the database.
componentDidUpdate Lifecycle method is used to check the state of the
itemsarray everytime the component has been updated. if the
contain one or more products the
LiveCart is updated in real-time using
handleSubmit function adds an item to the item array.
handlePrice function assigns the current price of an item to the price
variable using the
handleName function assigns the current name of an item to the name
variable using the
handlePayment function checks the amount the customer payment paid for the
items against the total cost.
handleQuantityChange function is a prop of the child component
it updates the quantity of an item when the user increases or reduces it.
handleCheckout function calculates the total cost of items purchased by
the customer and updates
total using setState.
renderLivePos function renders an item as it is added to the item array
using the child component
renderReceipt displays a modal confirming payment.
renderAmountDue display a modal to inform the user of incomplete payment.
LivePos is a child component of the
Pos component. it display each item
as it added to the
Pos component. The
LivePos is also known as a
Presentation component. check the source
handleSaveToDB function saves the transaction to the database
Let’s proceed to the Livecart component:
LiveCart component renders recent and current transactions.
ComponentWillMount recent transactions are retrieved, followed by current
items on livecart using
render function display the user interface to DOM.
child component is used to render recent transactions saved to the Database.
renderLiveTransactions is also a child component used to render current
Let’s move on to the Transaction component:
componentWillMount all transactions and retrieved from the database.
rendertransactions function displays all the transactions using the
CompleteTransactions presentional component. See the source code for more on
We have succeeded in building The front and Backend of Real-time Point of Sale System. I hope you had a blast.