Crypto Trading Simulator v2: React & Redux Project

As we close our final chapter in Flatiron’s Software Engineering Bootcamp, the final project for the 5th phase will have you build a full-stack application using React and Redux for the frontend, and a Rails API on the backend. For this phase, we will recreate our phase 4 project, implement a new interface, and add some new features!

Project Requirements

1. The code should be written in ES6 as much as possible.
2. There should be at least 5 stateless components and 3 routes.
3. The application must make use of react-router and proper RESTful routing.
4. Use Redux middleware to respond to and modify state change.
5. Make use of async actions and redux-thunk middleware to send data to and receive data from a server.
6. Your Rails API should handle the data persistence with a database. You should be using fetch() within your actions to make HTTP requests to your API — do not use jQuery methods.

Project Overview

Crypto Trading Simulator v2 is a React web app that simulates a cryptocurrency trading platform. This web app will have the same features as it did v1 with new features such as a chart component that plots the 30 day price change of a cryptocurrency, updated model associations that will help us keep track of the positions of a user and their trade history, and a transactions table. Redux will be used to handle our state management. We will be utilizing Axios to send async calls to our server. Our backend will be setup as a Rails API and we will be making use of Active Model Serializers to serialize the data we’re sending back to the frontend.

Setting up our React App

We will use create-react-app to generate the initial structure of our project, so make sure you have the latest version of npm and node.js. Once everything is up-to date, create the project folder and run the command below in your terminal:

$ npx create-react-app crypto-trading-sumulator-v2

Once that’s done, let’s install all of our redux dependencies using yarn as the package manager. Make sure yarn is up-to-date before running the command below:

$ yarn add redux react-redux redux-thunk redux-devtools-extension

Next, let’s integrate Material UI. For a complete guide to Material UI’s installation, follow this link.

$ yarn add @material-ui/core @material-ui/icons @material-ui/lab

Finally, let’s add React Router and Axios into our dependencies.

$ yarn add react-router-dom axios

CoinGecko API and Rails API

We will be utilizing a CoinGecko as a remote API to fetch real market data and chart data of their top 100 cryptocurrencies. The market data create the instances of Trades and Positions in our Rails API.

Our Rails API is going to consist of 3 models, controllers, and tables: Users, Trades, and Positions. A User is going to have a has many association with both Trades and Positions. Trades is going to keep track of the type of transaction (Buy or Sell), the coin/cryptocurrency, the quantity bought or sold, and the total investment or return of the transaction. Positions is going keep track of the quantity and the total investment made at the point the coin/cryptocurrency was purchased.

Fetching and Plotting our data with Recharts JS

Our component Chart.js will take care of plotting the chart data we’re getting from the CoinGecko API. Our useEffect hook will send a dispatch and invoke our action method fetchChart once the component has completely rendered.

Our method fetchChart which takes in a coinID as an argument that is set to “bitcoin” by default will then send a dispatch to our Redux store, which will then go into our chartReducer, and set it in a “loading” state. We then send an axios.get request to the URL provided to us by CoinGecko and interpolate the coinID to grab the desired coin/cryptocurrency data.

After the promise is completed, we then send a two dispatches with the responses we’re getting from CoinGecko as our payload to update our Redux store with the new data and set our loading state to false.

Before passing in the chart data we received from CoinGecko to our Recharts components, we will have to format the data. As a response, CoinGecko gives us a JSON that contains an array of key value pairs, prices, market_caps, and total_volumes. We’ve stored the array of values under prices into our Redux store. The first index is a timestamp we will need to format into a date, and the second is the price of the coin at that timestamp.

We’re going to have 2 methods to take care of this for us.

The method createData will take in two arguments, time and price which returns them as a hash with the key time and price.

The method convertTimeStamp takes in a timestamp and returns it in a date format.

Using these two methods, we will map over our chartData and invoke it as follows.

Once everything is neatly formatted, we then pass in the formatted data into Recharts LineChart component as follows.

For further information about the installing, configuration, and the usage of Recharts JS, follow this link.

Building Our Transactions Table

Our transactions table gets data from the instances of a users trade. We will then use this data to render out a table that displays the coin, symbol, transaction_type, qty, and price we’ve stored into our database.

Using useDispatch and useSelector hooks, we’re grabbing the users updated information and trades from the Redux store. We then map through each instance of a trade, format the data during each iteration, and pass them into the Material UI component as shown in the picture above.

For more information about the project, visit my GitHub.

For a video demonstration about how the project works and what it looks like, click here.