Building a Trading App in React: Currency Screener

This is the third 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

In this part we will be building a trading app with React, based on User Requirements . Part 2 introduces these concepts in a more beginner-friendly way, and it is recommended that you read that before reading this.

Building a Trading App in React: Blotter

What you will learn

1. Implement HTTP requests to fetch data from given services
2. Integrate React Data Store in an application using Redux Store
3. Implement Redux using the connect middleware
4. Implement Action, Reducers components in large applications
5. Implement charts using data from a Web Socket
6. Multi level React component application

Currency Screener

A moving average (MA) is a widely used indicator in technical analysis that helps smooth out price action by filtering out the noise from random price fluctuations. It is a trend-following, or lagging, indicator because it is based on past prices. The moving average is calculated over a period of time or certain number of past ticks/prices and is compared with the current tick/price. We want to create a screen that easily helps us in making buy/sell decisions for a set of FX currencies.

Here we will display average currencies using charts.

Requirements For Currency Screener

Building on our project from the previous post, we are going to implement a more complicated user requirement, called the currency screener. Here is a detailed description of the requirements we are given:

1. Fetching from an API (https://restsimulator.coderiq.io/currency_pairs), display in a dropdown the list of available currencies.

3. User should be able to submit his selected options. Once submitted,

• establish a connection to a Websocket (wss://stocksimulator.coderiq.io) by sending a json message of the form {"currencyPair":"EURUSD"} if EURUSD was selected from the currencies.
• once you start receiving the prices from the Web socket one by one, if the new tick is greater than the previous tick, then display the new tick and an up arrow in green. Otherwise, display the new tick and a down arrow in red.

4. Display currency data using a chart visualization.

Prerequisite

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

1. 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.
2. 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 currencyscreener
$ cd currencyscreener
$ npm start

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

We recommend using the trainer code for a more detailed skeleton of the project. You can download CoderIQ’s starter code using the ‘Download Training Module’ button on our app.

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

Go ahead and open your project in your favorites 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.

As in our previous posts, our component is going to fetch data from a REST endpoint and display the data using charts. Why do we need a data store?

As we are going to see, we are going to display multiple charts at a time, we don’t want the user to be able to select a currency if it has already been selected in another chart.

Using a Data Store (Redux)

We have already seen in previous articles how to retrieve data from an external source and use that data in a component. We also saw how to pass down data to child components using component properties.

When working on a large application however, multiple components (particularly sibling components) might depend on the same data and changes on the data in one component might need to be reflected in another component. Since multiple components will request for a centralized data and needs to be notified when this data changes, we need a standard library that implements this functionality for us. A Data Store is a common tool in most JavaScript libraries that is used to implement such an architecture. In React, the most used the data store is the Redux library.

When using a data store, we need to perform some standard operations as:

1. Retrieving data from the store
2. Requesting for the data store to update its data
3. Getting notified when data changes (whether as a result of your request or request from other components)

Most data stores achieve this with these components:

1. State: Current state of our application data
2. Actions: Handles fetching new data from rest endpoints
3. Reducers: Applying new data from our actions to current state

Sequence Diagram

Let’s see the various processes of our components:

Implement Redux Data Store

Let us install the various redux libraries we will need:

$ npm install redux
$ npm install redux-thunk
$ npm install react-redux

We need to setup redux boilerplate code. Update your index.js file.

Also create a new file store.js.

We have setup the boilerplate for the using the redux. Let us go ahead and create our actions.

Create a folder Actions. with a file named Actions/fetchCurrency.js.

We have implement an action that we can call to get the list of currencies, and update a currency.

After the data is fetched, we need reducers to update the state of the application.

Create a folder called Reducers.

Create a file with the name index.js with the following content:

And then create a second file that implements the various reducers, currencyReducer.js.

In the section continuing, we would like you to implement the components as needed and explained in our guide. We would like you try implement these yourself, to give you a complete grasp on the project.

If you would like to get access to an implemented solution, feel free to reach out to us at contactus@coderiq.io

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.

Let us start with the Loading component. This is the component that will be rendered when a CurrencyCard is loading its data.

Create a folder with the name Components. Inside this folder, create the following components.

1. Create a folder with name Loader for our Loader component. Inside this folder create a React component with name Loader.js.

Loader/Loader.js.

• Implement a Loading component that will show a Loading spinner whiles our components data is loading.

In addition to create the React component, we need some additional styles. Create a file styles.css inside our Loader folder.

Loader/styles.css

• Implement: place the styles that you need for Loader.js here. Remember to import it into Loader.js component.

Each chart will be handled by a component with the name CurrentData.

Create a React component that will be used for rendering the data from our Web Socket. In the component below, we connect to a Web socket using the provided props, while showing a Loading spinner in the meantime, and then display the chart when the data is available and update the chart as the Web socket is connected.

• When the component is created and initialized, create a Web Socket connection to the web socket endpoint wss://stocksimulator.coderiq.io
• After connection is established send request to web socket in json format.

{"currencyPair":"' + props.country + '"}

• Attach a chart component from the Chart.js library that will be used to render our web socket data.
• When new data arrives from the onmessage event handler, update the data in the state bound to the chart. Remember you don’t want to display very old data so remove old data that you don’t want to display.
• Close the web socket connection when the component is destroyed.
• When rendering your component, you need to show different colors based on the current value.
• Implement the HTML markup to accompany your implementation.

We now implement our CurrencyCard component.

• When the component is created, we initiate an action to our store to fetch the currencies.
• When the user selects an option from the dropdown of currencies, we also emit an action for a state change so other components don’t display that selected currency.
• Implement your CurrencyData here. For the list of 4 selected currencies, you can display their charts.

Finally, let us update our App.css with styles.

Run the application and you should see the following:

Resources

1. Setup React Guide: https://reactjs.org/docs/create-a-new-react-app.html
2. React Getting started: https://create-react-app.dev/docs/getting-started/
3. NodeJs: https://nodejs.org/