CryptoWorld is a website created with React to track the prices, stats and news related with cryptocurrencies
cryptoworld.mp4
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.
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'
}Then when everything is ready, to start the server npm start. To visit the app localhost:3000
- html-react-parser: Used to get the detailed information about each coin from the API
- React: UI Development
- React Redux: State manager and data reducer.
- React-router-dom: Dynamic routing.
- Jest: Javascript testing.
- Language to style a Web page
- CSS with variables, nesting and more
- Package applications into containers