A React app for users to view the latest data for the top 50 crytocurrencies. View the app here!

• Intuitive Sorting

  To sort, simply select one of the categories! An indicator will be displayed to show the sort direction (either ascending or descending), click the item again to toggle the direction.

• The Latest Data

  The data is updated every minute using the latest data from Coinranking's Rapid API page

• Scalable Design

  UI designed for any device

• React
• Node / Express
• npm
• Heroku

The focus of this app is the "coins" component where all of the cryptocurrency data is managed and displayed.

Data is updated every minute using the set interval function

A function is used when fetching and updating the data to make sure it stays sorted using the same configuration (EX: Sort by price descending)

The directional indicator is displayed on the desired element by adding a class called "ascending" or "descending". These classes use the :after selector to display a unicode arrow.

The % change is shown as red or green for each element depending on whether it was positive or negative change.

A reusable utility function called sortJSON was created which can sort a list of JSON based on the inputted field name and direction. Greatly reducing the amount of code required as compared to defining a function for each combination of field and direction.

• To avoid exposing the API key to the client, all interactions involving the API key are handled through the server. Stolen API keys can be abused by an attacker to make the victim pay for their own data usage.
• Cross-Origin Resource Sharing is implemented to allow the client to make API request from the backend, while using a whitelist to not allow other domains to make calls.
• The backend hides the API key from being directly exposed in the source code by using environment variables.

Padding and icon size are adjusted, and columns are added or removed based on screen width.

I created this application to practice my skills and learn new technologies.

• Learned that confidential data should not be handled on the client
• Built my first backend to allow me to securely handle my API key, which involved learning how to use Heroku, Node, Express, and environment variables
• Built my first application that makes fetch requests to an API and uses async functions