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!
- The code should be written in ES6 as much as possible.
- There should be at least 5 stateless components and 3 routes.
- The application must make use of
react-routerand proper RESTful routing.
- Use Redux middleware to respond to and modify state change.
- Make use of async actions and
redux-thunkmiddleware to send data to and receive data from a server.
- 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.
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.
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,
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.
createData will take in two arguments,
price which returns them as a hash with the key time and price.
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
price we’ve stored into our database.
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.