CryptoWorld

CryptoWorld is a website created with React to track the prices, stats and news related with cryptocurrencies

cryptoworld.mp4

Description

This application tracks the top cryptocurrencies, data and news using RapidAPI's Coinranking and Bing News Search APIs, and CoinMarketCap's API. Thanks to these APIs we can consult the latest news about cryptos and check our favourites ones prices and evolution over the time.

Installation

Clone down this repository git clone https://github.com/lopdan/cryptoworld. You will need node and npm installed globally on your machine.

To install run npm install in your terminal.

After that you need to get your own API keys from Coinranking, Bing News Search APIs and CoinMarketCap's API. Then you have to replace the dotenv variables (process.env....), with your own.

You can do it replacing them in the code or creating your own dotenv file. The faster way will be with the .env file:

REACT_APP_RAPIDAPI_KEY = 'YOUR OWN COINRANKING'S API KEY'
REACT_APP_CRYPTO_RAPIDAPI_HOST ='coinranking1.p.rapidapi.com'
REACT_APP_CRYPTO_API_URL = 'https://coinranking1.p.rapidapi.com'
REACT_APP_NEWS_API_URL = 'https://bing-news-search1.p.rapidapi.com'
REACT_APP_NEWS_RAPIDAPI_HOST = 'bing-news-search1.p.rapidapi.com'
REACT_APP_COINMARKETCAP_IMG_CHART_URL = 'https://s3.coinmarketcap.com/generated/sparklines/web/7d/2781/'

REACT_APP_COINMARKETCAP_API_CRYPTO_URL = 'https://cors.bridged.cc/https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?sort=market_cap&limit=100'
REACT_APP_COINMARKETCAP_API_METADATA = 'https://cors.bridged.cc/https://pro-api.coinmarketcap.com/v1/cryptocurrency/info'
REACT_APP_COINMARKETCAP_API_KEY = 'YOUR OWN COINMARKETCAP'S API KEY'
 
ESLINT_NO_DEV_ERRORS=true

The first one to change is Coinranking's key and host from cryptoApi, in the lines 3 to 6. It represents the variable x-rapidapi-key value.

const cryptoApiHeaders = {
  'x-rapidapi-host': process.env.REACT_APP_CRYPTO_RAPIDAPI_HOST,
  'x-rapidapi-key': process.env.REACT_APP_RAPIDAPI_KEY
}

The second one to change is Bing News Search APIs's key and url from cryptoNewsApi, in the lines 3 to 7. It represents x-rapidapi-key value.

const cryptoNewsApiHeaders = {
    'x-bingapis-sdk': 'true',
    'x-rapidapi-host': process.env.REACT_APP_NEWS_RAPIDAPI_HOST,
    'x-rapidapi-key': process.env.REACT_APP_RAPIDAPI_KEY
}

Finally you have to change CoinMarketCap's API keys from Cryptocurrencies in each useEffect.

/*Line 37 */
url: 'https://cors.bridged.cc/https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?sort=market_cap&limit=100'
headers: {
  'X-CMC_PRO_API_KEY': YOUR OWN KEY,
  'Accept':'application/json'
}
...
/*Line 56*/
url: 'https://cors.bridged.cc/https://pro-api.coinmarketcap.com/v1/cryptocurrency/info',
headers: {
  'X-CMC_PRO_API_KEY': YOUR OWN KEY,
  'Accept':'application/json'
}