Build a simple react app that display stock chart

So you are a developer that is interest in finance and you wanna to build a finance web app that display your favorite stock, forex exchange and crypto currency chart. That the guide you need!

In this guide we gonna use:

• React.js
• Redux
• Alpha Vantage a API to get the financial data
• Plot.ly a javascript library that will allow you to display the financial chart

Are you ready? So let’s get started!

Setting up react

Nowadays, there are many ways to scaffold a React application. To scaffold ours, we’ll use a popular tool called create-react-app:

npx create-react-app financial-chart
cd financial-chart

Once the command has finished running, install the following dependency: plotly.js, react-plotly.js, @material-ui/core, redux, react-redux, redux-devtools-extension, redux-thunk, prop-types

Copy this line to do it faster:

npm i plotly.js react-plotly.js @material-ui/core redux react-redux redux-devtools-extension redux-thunk prop-types

Getting the Alpha Vantage API KEY

In order to get the alpha vantage api key you have to go to https://www.alphavantage.co/support/#api-key, compile the form and copy the api key(which is free). That’s the web page:

Of the many financial APIs that I’ve tried this is one of the best. The only limit, with the free version, is that you have 5 api call per minute (that’s enought for small project).

Setting up Redux

Premise: I assume you know how redux work, cause I don’t wanna explain all the detail. I just want to show how I did.

Let’s start to create our reducer, store and actions. Theoretically we wouldn’t even need to use redux, but I’m doing it in case you want to implement the financial plot in a larger application.

Let’s create the actions folder and the reducers folder. Inside the reducer folder let’s create two js file: financialitemReducer.js and index.js. In the financialItemReducer we have our reducer

and in the index.js we have our root reducer:

Now let’s create in the action folder the following js file: financialItem.js and types.js. In types.js we gonna have our actions type,

and in financialItem.js we have our getFinancialItem function, which fetch the data and parse them and dispatch the action to the redux store.

So now that we created the action and the reducer we’re only missing the store. We gonna create it in our src directory.

Binding Redux with ours Components

Now that redux is set up, Let’s create our components and binding them with redux. FIrst of all let’s create our financial Plot. I’ve created two types of plots: a line financial plot, create our financial plot with the close values and a candleStick plot. I’ll pass the financialItem data the these components in the Financialitem component which I’ll talk about it later.

For both the LineChart and the CandleStickChart component I’ve used Ploty.

At the first render of the Financial Item component I call getFinancialItem, and I did that using the Hooks useRef and useLayoutEffect. In order to get the financial data I connected FinancialItem to the redux store using the connect high order function

We’re only missing the App.js file. Let’s clean up the react boilerplate and wrap the App div in the Provider component

Final Result:

If you followed the instructions well, the end result should be this:

line chart

candlestick chart

Of course you can display also forex exchanges and cryptoCurrencies and you can also use different time frames.

If you want more information about the API check the alpha vantage documentation : https://www.alphavantage.co/documentation/

Here’s my github repo: https://github.com/paolodelia99/react-stock-chart