Project Diary: Crypto Coin Stats

Photo by Jeremy Bezanger on Unsplash

hey there 👋🏻 today we’re gonna talk about my last project and I’ll try to describe what i have done.

What did i would like to build?

i wanted to build something i will use API’s and showing data with fancy way 🙂 As you know there is hype about crypto currencies. So i decided to make a Crypto Currency Status App. That thought was beginning of my learning something new. So lets dive in 👇

1-First Rule “Create-React-App”

i use the React.js in this project which is i still learning about it. I created a new project. After some cleaning the files. I searched APIs to implement to project. Then i found the coinstats, they have a public API. And it has a data what i want to show in project.

2- Explore the API

let’s look into the API data. What we can got it. Base Url is look like this 👉 https://api.cointats.app/public/v1/coinsIt’s return a JSON object of coins and details about them.

API is also takes a few parameters.

• skip takes the number of which amount of you want to skip.
• limit takes the number of how many coin data you want.
• currency it takes the currency of coin prizes (USD,EUR,TRY)

As you can see each coin data have a bunch of detail data. So i’ll use icon, name, price, symbol, priceChange1d, marketCap and websiteUrl data to show on my project.

2- Creating the Components

In this case i have two components. Maybe i should have separated them. 🤔 anyway first one is Header second one is Coin . Header would have a search bar, Github link, option element(for change currency) and the title.

HEADER Component:

i explained most of part in gist file. i also used the module css to styling all things but i’m not gonna dive in. So header components should looks like this 👇

header component

Coin Component:

The components is basically showing data object which is comes as a prop. I explained in gist file 👇 all other details.

So component is looks too much maybe i should have separated few elements as a different components on it. I’ll think about it. So with styling it should looks like this 👇

4 components showing

3- Creating a Context

I figure out to something while writing this blog. I created a context as a separate file but i declared values in App.js file. I’ll fix them later. So my CoinContext.js file is looks like this 👇

import { createContext } from "react";
export const CoinContext = createContext({});

I know its silly 😅 but I’ll definitely refactor all project ASAP. So let’s take look to App.js file.

4- Getting Data From API and Provide to Components

Here we are! 🙂 We almost done with the project. First all of i would like to describe states of app.

const [searchInput, setSearchInput] = useState(“”);

First one is state of input value which is we used in header component. Reason why i did not declared in header component. I’ll use in a function for filter the data. I’m getting data in App.js file. So this is why.

const [coinData, setCoinData] = useState([]);

This state as you can see where i collect the data of coins. I’ll pass this state to Coin component after getting data.

const [currency, setCurrency] = useState(“USD”);

Remember we have options for currency in Header component. API takes parameters currency is a one of them. So default is a “USD”. It’s gonna Call API when you change the currency every time. Because I pass the currency state to useEffect Hook.

const [error, setError] = useState(null);

This is where i collect the error. If there is an error while calling API. It will shown in below the Header component.

const [loading, setLoading] = useState(true);

And the final one is loading state. I’m using this state for while data getting from API. Rendering a loading icon to showing getting data. It will be looks like this 👇

yeah it’s also turning around with power of css

I will explain all other thing in gist file.

Conclusion

I definitely learn more than coding while writing this blog. I saw my mistakes and thought how i should improve my coding skills. I also learned about Context API to “why we should use”, “when we should use”. Also how we should’t use 😅 Hopefully that blog helps you to figure out something. Because it helped me. 🙂

And last thing about this blog. That was a challenge for me writing this blog in English. If you have any question or thoughts please write in a comment. 🙂

Resources:

• https://github.com/eyupucmaz/crypto-app
• https://reactjs.org/docs/context.html
• https://documenter.getpostman.com/view/5734027/RzZ6Hzr3