kryptocoin - Cryptocurrency prices and some others features

About | Portfolio screen | WatchList screen | Getting started | License

About the project

Kryptocoin

Developed with React Native,Expo, Axios,Context Api,
Recoil, React Memo Async Storage and Coin Gecko API

Features:

See several cryptocurrencies and their respective details such as name, price, market value, etc
By clicking on any of them, you are directed to more specific details of that currency, in addition to the name and value, we also have an animated and minimalistic chart
track their cryptocurrencies that have been "bought" and how they are performing, check balance,
add and delete new assets.

About the project and how it works

Kryptocoin tell us about cryptocurrency prices, very similar to the application available on the market coinMakertCap, The API used was Coin Gecko. On the home screen are shown several cryptocurrencies and their respective details such as name, price, market value, etc. By clicking on any of them, you are directed to more specific details of that currency, in addition to the name and value, we also have an animated and minimalistic chart (rainbow-me/react-native-animated-charts library) showing price variations in 24h, 7d , 30d and 1 year intervals.

Portfolio Screen

On the portfolio screen, the user is able to track their cryptocurrencies that have been "bought" and how they are performing, check balance, add and delete new assets. Concepts like Navigation ,Fetching data with Axios, Bottom Navigation Menu ,Context API ,Recoil , React Memoand Async Storage were implemented.

WatchList Screen

On the WatchList screen the user can favorite desired cryptocurrencies. To have access to the data on this screen without having to pass it as props,ContextAPI was used. Roughly speaking, the Context API provides a way to pass data from components without having to manually pass through every level (avoiding what is known as prop drilling). That being said, The WatchListProvider function returns the created context, which was named as WatchListContext, something like WatchListContext.Provider. Provider is a component that “provides” the context data, as well as its changes, to its “consumers” (Consumers of the same context).

Everything that is rendered in this provider is called children, then we ensure that WatchListProvider is parent of all components thus rendering all children, which in this case is the entire application. That way we can use the "provider data" that was defined in the value of the WatchListContext without having to pass as props from the top to the lowest level component.

As said, the WatchListContext.Provider needs to be a parent of the entire application, so in the App.js component we ensure that all other components, with the exception of the navigationContainer, are children of the WatchListContext. To access the data in any component, the useWatchList Hook was created , which simplifies some steps, imports, etc. That way, just call useWatchList() which will have access to the data.

Coin Gecko API Reference to this project

You can check it out the Coin Gecko docs Here for more info.

Get all Coins

  const { data } = await axios.get(`https://api.coingecko.com/api/v3/coins/list?include_platform=false`)

Parameter	Type	Description
`link`	`string`	Required. the api link

Get Detailed Coin Data

Get current data { name,price,market,...including exchange tickers) for a coin. So when a coin is clicked we fetch the details about that coin using this

   const { data } = await axios.get(
      `https://api.coingecko.com/api/v3/coins/${coinId}?localization=false&tickers=true&market_data=true&community_data=false&developer_data=false&sparkline=false`
    );

Parameter	Type	Description
`coinId` = `bitcoin`,`solana` and so on	`string`	Required. coinId to fetch the coin details data

Get Watch Listed Coins

Get data of all whatch listed coin on the Watch List screen {name, id, currentPrice, image, marketcap and so on}

   const { data } = await axios.get(
      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${coinIds}&order=market_cap_desc&per_page=50&page=${pageNumber}&sparkline=false&price_change_percentage=24h`
    );

Parameter	Type	Description
`[coinId]` = `bitcoin`,`solana` and so on	`string`	Required. coinId to fetch the coin market chart data

Get Coin Market Chart

Get historical data (name,price,market,stats) at a given date for a coin

   const { data } = await axios.get(
      `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=usd&days=${selectedRange}&interval=hourly`
    );

Parameter	Type	Description
`coinId` = `bitcoin`,`solana` and so on	`string`	Required. coinId to fetch the coin market chart data

Getting started

Clone this repo using git@github.com:eulazzo/kryptocoin.git
Move yourself to the appropriate directory: cd kryptcoin
Run npm install to install dependencies
4- Run yarn run dev to start up the app

License

This project is licensed under the MIT License - see the LICENSE page for details.

eulazzo/kryptocoin