Web development has never been more exciting than now, with the introduction of new technologies and techniques, thanks to the dynamism and evolution of JavaScript. Now a web application can be configured using only JavaScript. This is made possible through the introduction of Node.js, which can be used on the server side to manage data, and also the creation of several JavaScript frameworks, such as React.js, Angular, and Vue.js, which manage and control the client side of the application.
In this article, we will be learning how to build a simple shopping cart app, using React.js as the frontend framework, and a backend server built using Node.js and Express.js.
Below is a preview of what we will be building:
For this tutorial, I will be using the Eclipse IDE with the CodeMix plugin installed.
We can now create our application using the CodeMix Project Wizard. We’ll be using the latest version of all the tech libraries and stacks as at the time of this writing. To create a new React Project Navigate to File> New > Project > CodeMix > React Project.
Now click Next and enter your project name on the next screen. Finally, click Finish to continue with the React project creation.
Let’s install some modules which we will need in building the application. Open the integrated Terminal+ in CodeMix 2.0. Alternatively, it can be opened using the command `Ctrl + Shift + P`, as shown below, to run the following command:
npm i -S express react-route-dom axios jsonwebtoken cors body-parser boostrap
These are the technologies we will be using for our app:
In this section, we will be building the Application Programming Interface (API) for the application. First, we create an `api` folder in the root folder of our project. This folder will contain the express backend. Next, we proceed with creating a `server.js` file which will contain the server configuration.
'use strict';
const express = require('express');
const app = express();
const jwt = require('jsonwebtoken');
const cors = require('cors');
const bodyParser = require('body-parser');
const data = require('./data');
const middleware = require('./middleware');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.get('/api/products', (req, res) => { //lists all available products
return res.json(data.products);
});
app.post('/api/products', (req, res) => { //generates the list of products in the cart
let products = [], id = null;
let cart = JSON.parse(req.body.cart);
if (!cart) return res.json(products)
for (var i = 0; i < data.products.length; i++) {
id = data.products[i].id.toString();
if (cart.hasOwnProperty(id)) {
data.products[i].qty = cart[id]
products.push(data.products[i]);
}
}
return res.json(products);
});
app.post('/api/auth', (req,res) => { //signs in user
let user = data.users.filter((user) => {
return user.name == req.body.name && user.password == req.body.password;
});
if (user.length){
// create a token using user name and password vaild for 2 hours
let token_payload = {name: user[0].name, password: user[0].password};
let token = jwt.sign(token_payload, "jwt_secret_password", { expiresIn: '2h' });
let response = { message: 'Token Created, Authentication Successful!',
token: token };
// return the information including token as JSON
return res.status(200).json(response);
} else {
return res.status("401").json("Authentication failed. admin not found.");
}
});
app.get('/api/pay', middleware, (req, res) => { //checkout route for signed in users
return res.json("Payment Successful!");
});
const PORT = 5000;
app.listen(PORT);
console.log('api runnging on port ' + PORT + ': ');This `server.js` file contains four routes, the first of which returns an array of products loaded from the `data.js` module (which also contains an array of valid users).
const products = [
{
id: 01,
name: 'Cool Vex',
available_quantity: 5,
price: 450,
description: 'Lorem ipsum dolor sit amet, iusto appellantur vix te, nam affert feugait menandri eu. Magna simul ad est. Nostrum neglegentur ius at, at pertinax repudiare vel. Vim an adolescens quaerendum.'
},
{
id: 02,
name: 'Vintage Ties',
available_quantity: 7,
price: 50,
description: 'Lorem ipsum dolor sit amet, iusto appellantur vix te, nam affert feugait menandri eu. Magna simul ad est. Nostrum neglegentur ius at, at pertinax repudiare vel. Vim an adolescens quaerendum.'
},
{
id: 03,
name: 'Sunglasses',
available_quantity: 0,
price: 500,
description: 'Lorem ipsum dolor sit amet, iusto appellantur vix te, nam affert feugait menandri eu. Magna simul ad est. Nostrum neglegentur ius at, at pertinax repudiare vel. Vim an adolescens quaerendum.'
},
{
id: 04,
name: 'Wrist Watch',
available_quantity: 4,
price: 1500,
description: 'Lorem ipsum dolor sit amet, iusto appellantur vix te, nam affert feugait menandri eu. Magna simul ad est. Nostrum neglegentur ius at, at pertinax repudiare vel. Vim an adolescens quaerendum.'
},
];
const users = [
{
'name': 'user',
'password': 'qwerty'
},
{
'name': 'example',
'password': 'qwerty'
}
];
module.exports = { 'products': products, users: users }The second route is a post route that accepts a cart string, parses it, and generates the list products on the cart, along with their quantities.
The third is the login route that authenticates the user, i.e. verifies the user is valid (registered). It generates a JSON web token that expires in 2 hours. The generated token is used to bypass the login middleware (which we will create next).
The fourth route is a get route guarded by a middleware. This route requires the request to be authenticated, i.e. it provides a valid token. This middleware checks that the token was generated using a valid user. It also checks to confirm that the token is not expired. To create the middleware, we make a `middleware.js` file in the `api` folder, as shown below:
const jwt = require('jsonwebtoken');
const JWT_SECRET = "jwt_secret_password";
module.exports = (req, res, next) => {
// check header or url parameters or post parameters for token
var token = req.body['x-access-token'] || req.query['x-access-token'] || req.headers['x-access-token'];
// decode token
if (token) {
// verifies secret and checks exp
jwt.verify(token, JWT_SECRET, function(err, decoded) {
if (err) {
return res.status(403).send({
success: false,
message: 'Failed to authenticate token.'
});
} else {
// if everything is good, save to request for use in other routes
req.decoded = decoded;
next();
}
});
} else {
// if there is no token, return an error
return res.status(401).send({
success: false,
message: 'No token provided.'
});
}
};If a request is made to a guarded route without a valid token, the middleware intercepts the request and returns a 401 (Unauthorized) error.
Next, we include a script in the scripts object in the `package.json` file, which we will use to start up the application API:
{
"name": "shopping-cart",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"jsonwebtoken": "^8.4.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"api": "node api/server.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}With that, we have completed the development of the API server, which we can then run using the command below in the integrated terminal:
npm run api
Now that we have the application’s back end running, let’s begin developing its front end.
From the root of the project, we will open a new terminal using the `Ctrl + Shift + P` command. In the terminal, we will run the following command to start the React application:
npm start
This application will be styled using bootstrap. This can be achieved in several ways, one of which is to install the React bootstrap module, as we had previously done. We then import it into the root React component, i.e. the `index.js`, as shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();Let’s create a `repository.js` file which will contain all the interactions with the backend server, using the axios module.
import axios from 'axios';
const BASE_URL = 'http://localhost:5000';
export function getProducts() {
return axios.get(`${BASE_URL}/api/products`)
.then(response => response.data);
}
export function getCartProducts(cart) {
return axios.post(`${BASE_URL}/api/products`, {cart})
.then(response => response.data);
}
export function login (data) {
return axios.post(`${BASE_URL}/api/auth`,
{ name: data.name, password: data.password })
.then(response => {
localStorage.setItem('x-access-token', response.data.token);
localStorage.setItem('x-access-token-expiration',
Date.now() + 2 * 60 * 60 * 1000);
return response.data})
.catch(err => Promise.reject('Authentication Failed!'));
}
export function pay (data) {
return axios.get(`${BASE_URL}/api/pay`,
{ params: { 'x-access-token': localStorage.getItem('x-access-token')} })
.then(response => response.data)
.catch(err => Promise.reject(err));
}
export function isAuthenticated(){
return localStorage.getItem('x-access-token') && localStorage.getItem('x-access-token-expiration') > Date.now()
}The `getProducts` method fetches all the available products from the server. The `getCartProducts` fetches all the products in the cart, by passing the cart string to the server. This cart string is parsed to an object, with its keys as the product ID, and the values as the requested quantities. The login method submits the user credentials to the backend server. It also stores the generated token along with the token’s expiration time in the local storage of the browser upon a successful request. The pay method is only available for authenticated users because it requires a valid access token. The final method is used to verify that the user is authenticated by checking to see if there is a valid token that is not expired.
Let’s proceed with creating a `src/components` folder which will contain the application’s components.
In the application, we will be creating six other components which include `Login`, `ProductItem`, `ProductList`, `CartItem`, `Cart`, and `Checkout`, in addition to the root `App` component.
The JSX editing capabilities in CodeMix make it easy to work with React code. Just take a look at the GIFs below to see how you can take advantage of the editing capabilities in CodeMix, as you work your way through these components.
First, let’s create the `Login` component.
import React from 'react';
import { login } from '../repository';
export default class Login extends React.Component{
constructor() {
super();
this.state = { name: '', password: '' };
}
handleInputChange = (event) =>
this.setState({[event.target.name]: event.target.value})
submitLogin = (event) => {
event.preventDefault();
login(this.state)
.then(token => window.location = '/').catch(err => console.log(err));
}
render() {
return (
<div className="container">
<hr/>
<div className="col-sm-8 col-sm-offset-2">
<div className="panel panel-primary">
<div className="panel-heading"><h3>Log in </h3></div>
<div className="panel-body">
<form onSubmit={this.submitLogin}>
<div className="form-group">
<label>Name:</label>
<input type="text" className="form-control"
name="name" onChange={this.handleInputChange}/>
</div>
<div className="form-group">
<label>Password:</label>
<input type="password" className="form-control"
name="password" onChange={this.handleInputChange}/>
</div>
<button type="submit" className="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
);
}
}
This component gets the username and password, passes it on to the backend server when the form is submitted, using the login method from the repository module, and redirects the user to the home URL upon a successful request.
Let’s create the `ProductItem` component, which we will be used to render each product on the product list.
import React from 'react';
export default class ProductItem extends React.Component {
constructor(props) {
super(props);
this.state = {quantity: 1}
}
handleInputChange = event =>
this.setState({[event.target.name]: event.target.value})
addToCart = () => {
let cart = localStorage.getItem('cart')
? JSON.parse(localStorage.getItem('cart')) : {};
let id = this.props.product.id.toString();
cart[id] = (cart[id] ? cart[id]: 0);
let qty = cart[id] + parseInt(this.state.quantity);
if (this.props.product.available_quantity < qty) {
cart[id] = this.props.product.available_quantity;
} else {
cart[id] = qty
}
localStorage.setItem('cart', JSON.stringify(cart));
}
render(){
const { product } = this.props;
return (
<div className="card" style={{ marginBottom: "10px"}}>
<div className="card-body">
<h4 className="card-title">{product.name}</h4>
<p className="card-text">{product.description}</p>
<h5 className="card-text"><small>price: </small>${product.price}</h5>
<span className="card-text">
<small>Available Quantity: </small>{product.available_quantity}
</span>
{ product.available_quantity > 0 ?
<div>
<button className="btn btn-sm btn-warning float-right"
onClick={this.addToCart}>Add to cart</button>
<input type="number" value={this.state.quantity} name="quantity"
onChange={this.handleInputChange} className="float-right"
style={{ width: "60px", marginRight: "10px", borderRadius: "3px"}}/>
</div> :
<p className="text-danger"> product is out of stock </p>
}
</div>
</div>
)
}
}
The `addToCart` method adds the given product to the cart which is an object stored in `localStorage` as a string using the `JSON.stringify` method. This method converts the string back to object using the `JSON.parse` method or creates a new object if no item is found. The product is then added, and the cart is saved back in `localStorage`.
Let’s create the Product List which uses the `ProductItem` component to render the list of products.
import React from 'react';
import ProductItem from './ProductItem';
import { getProducts } from '../repository';
import { Link } from 'react-router-dom';
export default class ProductList extends React.Component {
constructor(props) {
super(props);
this.state = {
products: []
}
}
componentDidMount() {
getProducts().then((products) =>this.setState({ products }));
}
render() {
const { products } = this.state;
return (
<div className=" container">
<h3 className="card-title">List of Available Products</h3><hr/>
{products.map((product, index) => <ProductItem product={product} key={index}/>)}
<hr/>
<Link to="/checkout">
<button className="btn btn-success float-right">Checkout</button>
</Link>
<Link to="/cart">
<button className="btn btn-primary float-right"
style={{ marginRight: "10px" }}>View Cart</button>
</Link><br/><br/><br/>
</div>
);
}
}
This component fetches the array of available products using the `getProducts` from the repository module in the `componentDidMount` life-cycle provided by React.
Let’s create the `CartItem` component which will be used to render each product on the cart.
import React from 'react';
export default class CartItem extends React.Component {
constructor(props) {
super(props);
this.state = {quantity: 1}
}
render(){
const { product } = this.props;
return (
<div className="card" style={{ marginBottom: "10px"}}>
<div className="card-body">
<h4 className="card-title">{product.name}</h4>
<h5 className="card-text"><small>price: </small>${product.price}</h5>
<span className="card-text text-success">
<small>Quantity: </small>{product.qty}</span>
<button className="btn btn-sm btn-warning float-right"
onClick={() => this.props.remove(product)}>Remove from cart</button>
</div>
</div>
)
}
}This component uses the `remove` method provided as a prop to remove the item from the cart completely. The `remove` method is provided by the parent `Cart` component which we will be creating next.
import React from 'react';
import { Link } from 'react-router-dom';
import { getCartProducts } from '../repository';
import CartItem from './CartItem';
export default class Cart extends React.Component {
constructor(props) {
super(props);
this.state = { products: [], total: 0 }
}
componentDidMount() {
let cart = localStorage.getItem('cart');
if (!cart) return;
getCartProducts(cart).then((products) => {
let total = 0;
for (var i = 0; i < products.length; i++) {
total += products[i].price * products[i].qty;
}
this.setState({ products, total });
});
}
removeFromCart = (product) => {
let products = this.state.products.filter((item) => item.id !== product.id);
let cart = JSON.parse(localStorage.getItem('cart'));
delete cart[product.id.toString()];
localStorage.setItem('cart', JSON.stringify(cart));
let total = this.state.total - (product.qty * product.price)
this.setState({products, total});
}
clearCart = () => {
localStorage.removeItem('cart');
this.setState({products: []});
}
render() {
const { products, total } = this.state;
return (
<div className=" container">
<h3 className="card-title">Cart</h3><hr
{
products.map((product, index) =>
<CartItem product={product} remove={this.removeFromCart} key={index}/>)
} <hr/>
{ products.length ?
<div><h4>
<small>Total Amount: </small>
<span className="float-right text-primary">${total}</span>
</h4><hr/></div>: ''}
{ !products.length ?<h3 className="text-warning">No item on the cart</h3>: ''}
<Link to="/checkout">
<button className="btn btn-success float-right">Checkout</button></Link>
<button className="btn btn-danger float-right" onClick={this.clearCart}
style={{ marginRight: "10px" }}>Clear Cart</button><br/><br/><br/>
</div>
);
}
}The `removeFromCart` method in this component is passed to the `CartItem` component. It deletes the product from the cart on the `localStorage` and removes the product from the list products to be rendered. The `Cart` component also provides a `clearCart` method which removes all the items on the cart (this is done by deleting the cart from the `localStorage`).
Let’s create the `Checkout` component. This component will only be rendered if the user authenticated (logged in).
import React from 'react';
import { isAuthenticated, getCartProducts, pay } from '../repository';
import { Redirect, Link } from 'react-router-dom';
export default class Checkout extends React.Component {
constructor(props) {
super(props);
this.state = { products: [], total: 0 }
}
componentDidMount() {
let cart = localStorage.getItem('cart');
if (!cart) return;
getCartProducts(cart).then((products) => {
let total = 0;
for (var i = 0; i < products.length; i++) {
total += products[i].price * products[i].qty;
}
this.setState({ products, total });
});
}
pay = () => pay().then(data => alert(data)).catch(err => console.log(err))
render() {
if (!isAuthenticated()) return (<Redirect to="/login" />);
const { products, total } = this.state;
return (
<div className=" container">
<h3 className="card-title">Checkout</h3><hr/>
{ products.map((product, index) =>
<div key={index}>
<p>{product.name} <small> (quantity: {product.qty})</small>
<span className="float-right text-primary">${product.qty * product.price}
</span></p><hr/>
</div>
)} <hr/>
{ products.length ?
<div><h4><small>Total Amount:</small><span className="float-right text-primary">
${total}</span></h4><hr/></div>: ''}
{ !products.length ? <h3 className="text-warning">No item on the cart</h3>: ''}
{ products.length ? <button className="btn btn-success float-right"
onClick={this.pay}>Pay</button>: '' }
<Link to="/"><button className="btn btn-danger float-right"
style={{ marginRight: "10px" }}>Cancel</button></Link><br/><br/><br/>
</div>
);
}
}
This component loads and renders all the products on the cart, much like the `Cart` component. It also provides a pay button which will in this case alert a message to proceed to payment after accessing a secured route on the backend server. This is made possible by the access token attached to the request in the pay method in the repository module. It also redirects unauthenticated users to the login page.
Now that we have all the required components, we can proceed with editing the root `App` component:
import React, { Component } from 'react';
import Login from './components/Login';
import Products from './components/ProductList';
import Cart from './components/Cart';
import Checkout from './components/Checkout';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import { isAuthenticated } from './repository';
class App extends Component {
logOut(){
localStorage.removeItem('x-access-token');
}
render() {
const auth = isAuthenticated();
return (
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container">
<Link className="navbar-brand" to="/">ShoppingCart</Link>
<button className="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<Link className="nav-item nav-link" to="/">Products</Link>
<Link className="nav-item nav-link" to="/cart">Cart</Link>
{ (auth) ? <Link className="nav-item nav-link" to="/checkout">
Checkout</Link>: ''}
{ ( auth ) ?
( <a className="nav-item nav-link" href="/"
onClick={this.logOut}>Log out</a>) :
( <Link className="nav-item nav-link float-right"
to="/login">Log in</Link> )
}
</div>
</div>
</div>
</nav>
<div className="container">
<br/>
<Route exact path="/" component={Products} />
<Route exact path="/cart" component={Cart} />
<Route exact path="/checkout" component={Checkout} />
{ (!auth) ? <Route exact path="/login" component={Login} /> : '' }
</div>
</div>
</Router>
);
}
}
export default App;
In this component, we create, control, and manage the application’s navigation. Here, we render the navigation bar which in turn renders several links using the `Link` tag provided by `react-router-dom`, which is roughly equivalent to the HTML “a” tag. It renders the `Login` link when the user is not logged in, and renders `Checkout` and `Log out` links if otherwise. The log out button triggers the `logOut` method which deletes the access token and renders the application with the user logged out. This component also manages the application routing, i.e. it chooses which component to render for each route or link. To enable the use of `react-router-dom` components in the application, we need to wrap app component in a `BrowserRouter` component.
Congratulations! We have just successfully built the entire application!
To recap the application start-up process, to run the application, we need to run both the back end and front end of the application. To start the backend API server of the application, we use the command:
npm run api
To start the front end, use the command below:
npm start
After those have been successfully started, we can visit http://localhost:3000 in our browser to view the application.
Over the course of this article, we’ve built a simple shopping cart with an Express back end and a React front end. We’ve kept this application simple to demonstrate core Express and React concepts. Next steps would be to change the back end to interact with a database instead of static data, and use technologies, such as Flux, Redux, Mobx, etc., to make the front end more efficient and modular.
The code for this application is available here.