Crypto Trading Simulator: JavaScript Project

The final project for the fourth phase of Flatiron’s Software Engineering Bootcamp have you build a Single Page Application (SPA) utilizing HTML, CSS, and JavaScript, with a backend API built with Ruby and Rails. For this project, we will be reviving the CLI project we built during the first phase of Flatiron’s Software Engineering Bootcamp, CyptoStats, and using the same API, turn it into a cryptocurrency trading simulator!

Project Requirements

1. The application must be an HTML, CSS, and JavaScript frontend with a Rails API backend where all interactions between the client and server are handled asynchronously using AJAX and the data sent back is rendered as a JSON format.
2. The JavaScript application must use Object Oriented JavaScript to encapsulate related data and behavior.
3. The domain and model served by the Rails backend must include a resource with at least one has-many relationship. (ex: Users have many associated models of a post or photo)
4. The backend and frontend must collaborate to demonstrate Client-Server Communication with at least 3 AJAX calls, covering at least 2 of Create, Read, Update, and Delete (CRUD) operations.

Project Overview

Crypto Trading Simulator (CTS) is a JavaScript web app that simulates a cryptocurrency trading platform. This web app uses the CoinGecko API to fetch up-to date market data of the top 100 cryptocurrencies on their market. The market data is then rendered into the web apps market table which updates the data at an interval. A user is given a $100,000.00 (Fake Currency) as their starting buying power which they can use to buy and sell cryptocurrencies at their current price. Each coin that is bought is then stored into the Rails backend API and rendered into the user’s Wallet table which displays the price and quantity of when the coin (cryptocurrency) was bought, along with the current value of that coin in the market, and the calculated return if sold.

Frontend

The frontend file structure will be separated as follows:

crypto-trading-simulator-frontend

Sending fetch requests to CoinGecko’s remote API

In our coin.js, we will be sending fetch requests to CoinGecko’s remote API were the data received will be rendered into our market table and stored into a static variable as follows:

coin.js

Ajax Calls

We will create a JavaScript file called api.js to dynamically handle our Ajax calls. This class will be utilized by our frontend JavaScript models user.js and trade.js to send fetch requests to our server which will take care of our Create, Read, and Update (CRUD) operations.

api.js

Fetch requests inside each of our JavaScript frontend models can be made using async and await and/or the .then method as follows to create our JavaScript object instances.

fetching using async and await

fetching using the .then method

Backend

The backend structure will be generated with the following commands:

$ rails new crypto-trading-simulator-backend --api
$ rails g scaffold user username buying_power:decimal wallet_value :decimal
$ rails g scaffold trades coin_id user_id:integer sym qty:integer cost:decimal

This should generate our backend structure on API mode, generate our models and migration files, as well as our controllers with the code that will automatically render out our data in as JSON.

crypto-trading-simulator-backend

Whitelisting domains with Rack CORS

We will be utilizing Rack CORS to whitelist the domains that are allowed to connect to our server. This should be commented out in our Gemfile already, so all we need to do is comment that in and run bundle install.

// Gemfile
gem 'rack-cors'

Then, go to /config/initializers/cors.rb

Comment the following code in, and set our origins to * (all), since we will be running this through a local server for now.

This will accept all incoming requests from all domains. Usually you would add the domain of where you are hosting your web app from (ex: Heroku).

Serializing our data with Fast JSON API

We will be utilizing Fast JSON to serialize the data that gets rendered into our API. We will need to include this into our Gemfile and run bundle install.

// Gemfile
gem 'fast_jsonapi'

Then, we can use rails to generate our serializer with the following command:

$ rails g serializer User name buying_power:decimal wallet_value:decimal
$ rails g Trade coin_id user_id:integer qty:integer cost:decimal

And add our associations and the attributes to be rendered out as follows.

user_serializer.rb

trade_serializer.rb

More Information

For more information about the project, you can view my GitHub.

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