Building a Trading App in React: Blotter

7 min readMay 20, 2020

This is the first of a series of posts by CoderIQ (coderiq.io) to take you from a React noob to expert in a matter of 3 small projects. Check out our app (app.coderiq.io) and feel free to build a software portfolio

What do Front End Developers do? Our responsibilities are usually to build a User Interface for some Back End service. We are given the requirements and work closely with other developers to build a User Interface to represent the various services being offered.

React

React is a JavaScript library for building user interfaces. It provides a concise approach to structuring our application in terms of components and handles communication among these components. React handles updating our components when its data change, making it easy to reason about our application and focus on implementing business requirements.

What you will learn

Think about your requirements in terms of components
Implement those components using React
Implement HTTP requests to fetch data from given services
Display data in User Interface using tables
Add CSS to change the look and feel of the application

Blotter

Blotter is a progressive front end application we are going to build using React. The fundamental requirements of this application are simple: you’re given an API for a Back End service with extra details about how the user interface should look.

In this article, we are going to start building our Blotter app with React. There are many steps to building this complete application. We will build on this idea in upcoming articles.

Requirements For Blotter

Imagine you’re working for a trading company, and they have being working on this new product called Blotter that will allow their customers to view their trading history. They have already implemented the services but you have to build a nice User Interface for the application, with the following requirements:

Display a record of all the trades in a table
Each record of the trade will include details such as time, price, order size, and a specification of whether it was a buy or sell order.
You are given a REST API from which to retrieve the data.
The application should display a table of using the data fetched from the REST API.
Users should be able to filter trades using a search input. Add one search box in the CcyPair column and the Status column. When the user starts typing inside the search box, only the matching rows should be displayed.
Add a Sort button in the Time column. On clicking the button, the table should be sorted in ascending and on clicking it again, it should be sorted in descending.

Prerequisite

To follow this tutorial, you’ll need the following:

Node.js version 10.16.0 installed on your computer. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.
It will also help to have a basic understanding of JavaScript, which you can find in the How To Code in JavaScript series, along with a basic knowledge of HTML and CSS.

Creating a new React application

To create a new application, run the following command:

$ npx create-react-app blotter
$ cd blotter
$ npm start

For more details about creating a new react project, the official react website has a detailed guide.

You can view your app from: http://localhost:3000

If you would like a more detailed skeleton, you can also download CoderIQ’s starter code using the ‘Download Training Module’ button on our app (app.coderiq.io).

Go ahead and open your project in your preferred text editor.

Code Setup

Please go through the following link to understand code architecture for a basic create-react-app

https://www.pluralsight.com/guides/file-structure-react-applications-created-create-react-app

Thinking in Components

The first thing we are going to do is understand the requirements and decompose it into a set of component-hierarchy to be implemented later.

Components design is a design pattern whereby the application is reasoned about as a set of components interacting with each other to accomplish the application requirements.

With this in mind, we can even consider the whole application as a component, which we call Application.
The Application contains a root component which will contain other components in the application. This is typical of many component design architectures, it is a good design principle to always decouple your application component from implementation component. The component we are calling Application is an abstract component, but the root component will be a real component in our application to contain other components.
The Root Component contains the components needed to display our trading data.

Components Design

Now that we have a high level architecture of our application, it is good to make some initial decisions about how the components are going to communicate.

Let our Application component tell the Root Component when it is finished with its creation process. The root component has no way of knowing this on its own.
Once the root component gets this notification, it fetches the data from the rest end point.
The root component will provide the data to the various components that depend on it.

A closer look at the diagram reveals numbers of the form (0..*, 0..1, 1). These are called multiplicity specifies. They tell us how many of that component is allowed in the application. For example there will be no headers when there is no data, and only one header component when data is available, so it has a multiplicity of 0..1. The same idea can be applied to the others.

Implement Components in React

React is a component based library. This allows us to transfer our component design directly into React components. We will create a component for each component we have discussed so far.

App Component: Already created for you from the starter project as App.js
Header Component: We will call Header.js

3. Record Component: We will call Record.js

Fetch Data For Components

Now that we have a skeleton for our components, let us go ahead and fetch our data.

Remember that in our design, we will let our app component fetch the data when the app is created.

When the component is mounted (componentDidMount), we retrieve the records and update the data locally.

The records data is passed to our Record component, which handles displaying it in a table.

You may want to install a JavaScript library to help with making HTTP requests, and I recommend axios.

Display Data in Components

Let’s go ahead and populate the head section of our table:

In your Header components, create the heading for the table.

Using the data from the records, iterate and create a table row for each record for the Record component.

Here is our data been displayed:

Add Styles to Components

You have probably noticed that our data looks too raw. Let’s go ahead and add some CSS rules. You can copy the following CSS file provided below to your App.css file.

Be sure to update your Record.js file to include the new CSS rule:

And now this is the final output:

Extra Features

Our table is getting in shape. But before we get ahead of ourselves, there is a last requirement that needs to be covered. We need to be able to search using CCYPAIR and STATUS. In addition to this, we should be able to sort the records using the TIME column. Let’s go ahead and implement these features:

Let’s update our App template to respond to search events:

When a search event happens we call searchRecords, let’s implement that. This method will search records based on the given search parameter, and whether it is from a CCYPAIR or from a STATUS column.

Let’s also implement the sorting methods as well. You can keep a state variable to which you flip to sort in ascending and descending order every time.

Let’s also add some markup to use the various functionalities. You can create an input component in the Header component under the various components that emit events when the user types. Also create a component in the TIME column to signify the ability to sort.

Now this is our final output: