Lab 5

Dylan Carone
Dcarone2014@fau.edu
3/19/2024
COP4808 - Lab5

Step 0 - Setup
First, I needed to register an account with CryptoCompare and generate a free API to use
for this lab.

I created a .env file to securely store my API key for the app
Step 1 - Generate Crypto Compare API
Creating App.jsx
I created the App.jsx file and removed the starter code generated by Vite

Grabbing data from the API

I created a useEffect() function that will be called at the start by passing no parameters
into the [].
I then defined the function that will be called, fetchAllCoinData(), which is an async
function that will grab the api using my API_KEY
It will store the data in a state variable I defined as list.
Starting the HTML
I created a simple page that has a header and an ul that will be used to store the list of
coins as data.
Using the data from the API
I used the map function to take the data and only show the coins that are in the
PlatformType of blockchain.
Here is what it looks like when I display the data from the API.
Step 2 - Creating CoinInfo Component
Component Creation
I created a new component called CoinInfo that will be used to parse the info from the
data into readable HTML form.
I have three variables as props:

• image - displays the logo of the coin’s brand

• name - the coin’s full name (ex. Bitcoin)

• symbol - the abbreviated coin name (ex. BTC)

I have one state variable that will be used to check the price of each coin so it can be
displayed as well.
Using the API again
I created a new call to the API so that my new component can use some data as well. This
time I am passing a symbol from the full coin list and trying to use its own individual data.

In this case, for each coin, I am trying to pull its price in USD. I am using the symbol that
was being passed through App.jsx as a key filter to make sure the data passes correctly.
Updating the App.jsx
I go back to my App.jsx and instead of passing through the raw data, I make use of my new
component and pass the correct image as needed. It will then return the li I created in the
CoinInfo.jsx component.
Current App Status
Here is what it is showing now. Note that sometimes the actual dollar value is not showing
up for some items from the API, however others have been passing through as I will show in
the upcoming steps.
Step 3 - Creating a Search Bar
Adding the HTML
I add a new input right below the header. This will use a function I will define called
searchItems()

Here is what it looks like

State Variables
I create the state variables for the filteredResults and the searchInput.
The searchInput is the input which the user of the app will use to search for the coin they
are looking for. The filteredResults is going to store a copy of the data in just the results
we are looking for.
Search Function
The search function will take a searchValue and run it through the data filtering out
everything not included.

This is where we are updating the HTML to show the filtered results if the user has typed
something in.
Current App Status
The app currently looks like this with the search included. Looking at the search results,
you can see a search of “btc” shows everything with “BTC” included.
Step 4 - Adding CSS
I wanted to go for a more grid style instead of a giant list. Here is the CSS code for this. I set
the ul to be a grid and just stylized each li to it a bit easier to read.
Final App
Here is a screenshot of the final app. This includes the API call of all the coins and the
search bar on top.