adrianhajdin/project_cryptoverse

Cryptocurrency App powered by RapidAPI

Cryptoverse - Explore the World of Cryptocurrency

🌟 Become a top 1% Next.js 13 developer in only one course

🚀 Land your dream programming job in 6 months

Introduction

This is a code repository for the corresponding video tutorial.

In this video, we will create a cryptocurrency app. We're going to use React and multiple APIs powered by https://rapidapi.com.

By the end of this video, you will become the master of working with APIs.

project_cryptoverse's Issues

Cant get .env to work.

I've created the .env file in the root folder.

REACT_APP_CRYPTO_RAPIDAPI_HOST = 'host url'

REACT_APP_RAPIDAPI_KEY = 'my api key'

REACT_APP_CRYPTO_API_URL = 'api url'

However, when I inspect the page on Chrome, I see "Failed to load resource: the server responded with a status of 404 (Not Found)"

I've tried installing "dotenv" from npm.

TypeError: Cannot read properties of undefined (reading 'total')

×
TypeError: Cannot read properties of undefined (reading 'total')
Homepage
src/components/Homepage.jsx:23

23 |
That's an erroe in HomePage.jsx

What could be the solution? Even the hosted project doesn't load

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

I am developing CryptoDetails.jsx components. I am getting data from API successfully by

const { data, isFetching } = useGetCryptoDetailsQuery(coinId)
console.log(data)

and the specific data history by

console.log(data?.data?.coin.name)

The problem is, I can't acces data with

const cryptoDetails = data?.data?.coin
console.log(cryptoDetails.name)

The 2nd line of avobe code show me

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

• I think, that means the cyrptoDetails can't store the data?.data?.coin value. I have tried let & var instead of const. but didn't get any solution.

Note- If I comment out the line

console.log(cryptoDetails.name)

and do

const cryptoDetails = data?.data?.coin
console.log(data?.data?.coin.name)

reload the browser, than I got the result as I say before.
But in case if I do uncomment the console.log(cryptoDetails.name) & without any reload, It show the data. But then when I reload the browser, It show me the error.

Code of my Components

• CrytoDetails.jsx

import React, { useState } from 'react'
import millify from 'millify'
import HTMLReactParser from 'html-react-parser'
import { useParams } from 'react-router-dom'
import { Row, Col, Typography, Select } from 'antd'
import { MoneyCollectOutlined, DollarCircleOutlined, FundOutlined, ExclamationCircleOutlined, StopOutlined, TrophyOutlined, CheckOutlined, NumberOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { useGetCryptoDetailsQuery } from '../services/cryptoApi'
const { Title, Text } = Typography
const { Option } = Select

const CryptoDetails = () => {
    const { coinId } = useParams()
    const [timeperiod, setTimeperiod] = useState('7d')
    const { data, isFetching } = useGetCryptoDetailsQuery(coinId)

    console.log(data)
    const cryptoDetails = data?.data?.coin
    console.log(data?.data?.coin)
    console.log(cryptoDetails.name)
    console.log(data?.data?.coin.name)


    // const stats = [
    //     { title: 'Price to USD', value: `$ ${cryptoDetails.price && millify(cryptoDetails.price)}`, icon: <DollarCircleOutlined /> },
    //     { title: 'Rank', value: cryptoDetails.rank, icon: <NumberOutlined /> },
    //     { title: '24h Volume', value: `$ ${cryptoDetails.volume && millify(cryptoDetails.volume)}`, icon: <ThunderboltOutlined /> },
    //     { title: 'Market Cap', value: `$ ${cryptoDetails.marketCap && millify(cryptoDetails.marketCap)}`, icon: <DollarCircleOutlined /> },
    //     { title: 'All-time-high(daily avg.)', value: `$ ${millify(cryptoDetails.allTimeHigh.price)}`, icon: <TrophyOutlined /> },
    // ];

    return (
        <Col className='coin-detail-container'>
            <Col className='coin-heading-container'>
                <Title level={2} className='coin-name'>
                    {/* {cryptoDetails.name}({cryptoDetails.slug}) Price */}
                </Title>
                <p>
                    {/* {cryptoDetails.name} live price in US dollars. */}
                    View value statistics,market cap & supply
                </p>
            </Col>
            <Select
                defaultValue='7d'
                className='select-timeperiod'
                placeholder='Select Time Period'
                onChange={value => setTimeperiod(value)}
            >
                {time.map(date =>
                    <Option key={date}>{date}</Option>
                )}
            </Select>
        </Col>
    )
}

export default CryptoDetails

I have comment out the stats because they can't access cryptoDetails

• cryptoApi.js

import {
    createApi,
    fetchBaseQuery
} from '@reduxjs/toolkit/query/react'

const baseUrl = 'https://coinranking1.p.rapidapi.com'

const createRequest = url => ({
    url,
    headers: cryptoApiHeaders
})

export const cryptoApi = createApi({
    reducerPath: 'cryptoApi',
    baseQuery: fetchBaseQuery({
        baseUrl
    }),
    endpoints: builder => ({
        getCryptos: builder.query({
            query: count => createRequest(`/coins?limit=${count}`)
        }),
        getCryptoDetails: builder.query({
            query: coinId => createRequest(`/coin/${coinId}`)
        })
    })
})

export const {
    useGetCryptosQuery,
    useGetCryptoDetailsQuery
} = cryptoApi

I have remove the cryptoApiHeaders because of the API code. But in main code I have it.

• How to solve it.
• What does it mean data?.data?.coin
  • (?.)

TypeError: can't access property "toString", value is undefined

I'm having the undefined error and can't fix it. Here is my code for Homepage.jsx:-

import React from 'react'
import millify from 'millify'
import { Typography, Row, Col, Statistic } from 'antd'
import { Link } from 'react-router-dom'

import { useGetCryptosQuery } from '../services/cryptoApi'
import Cryptocurrencies from './Cryptocurrencies'
import News from './News'
import Loader from '../components/Loader'

const { Title } = Typography

const Homepage = () => {
  const { data, isFetching } = useGetCryptosQuery(10)
  const globalStats = data?.data?.stats

  if (isFetching) return <Loader />
  console.log(data)

  
  return (
    <>
      <Title level={2} className="heading">
        Global Crypto Statistics
      </Title>
      <Row>
        <Col span={12}>
          <Statistic title="Total Cryptocurrencies" value={globalStats.total} />
        </Col>
        <Col span={12}>
          <Statistic
            title="Total Exchanges"
            value={millify(globalStats.totalExchanges)}
          />
        </Col>
        <Col span={12}>
          <Statistic
            title="Total Market Cap:"
            // value={`$${millify(globalStats.totalMarketCap)}`}
          />
        </Col>
        <Col span={12}>
          <Statistic
            title="Total 24h Volume"
            // value={`$${millify(globalStats.total24hVolume)}`}
          />
        </Col>
        <Col span={12}>
          {/* <Statistic title="Total Markets" value={globalStats.totalMarkets} /> */}
        </Col>
      </Row>
      <div className="home-heading-container">
        <Title level={2} className="home-title">
          Top 10 Cryptocurrencies in the world
        </Title>
        <Title level={3} className="show-more">
          <Link to="/cryptocurrencies">Show more</Link>
        </Title>
      </div>
      <Cryptocurrencies simplified />
      <div className="home-heading-container">
        <Title level={2} className="home-title">
          Latest Crypto News
        </Title>
        <Title level={3}>
          <Link to="/news">Show more</Link>
        </Title>
      </div>
      <News simplified />
    </>
  )
}

export default Homepage

Here is a screenshot of the error - it retrieves the object and you can see success and number of exchanges but I'm getting value is undefined error... Any ideas?

TypeError: Object(...) is not a function

5 |
6 |
7 | const HomePage = () => {

8 | const { data, isFetching } = useGetCryptoQuery();
9 | console.log('test',data);
10 |

I got this error while coding the above lines. need help

Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

How to solve this error

TypeError: Cannot read properties of undefined (reading 'total')

getCryptos query is not fetching any data anymore

Hi all,
I now also have to ask a question about RapidApi. I am about to get the first query "getCryptos" running. But no matter what I try, the console.log always shows "undefined". I have done all updates to v2 and even copied some code from here. I've gotten to the point where I can say that the following code doesn't seem to work properly:

getCryptos: builder.query({ query: (count) => createRequest(/coins?limit=${count}) })

Can anyone help here? I have also update my key in the env file ofc.

Error: "category" is not a registered scale

Make sure to add this line in LineChart.jsx when receiving this error.

My Chart is not starting from 0, even though I added "beginAtZero: true"

This is my code of -

const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};

Getting Error Failed to load config "react-app" to extend from.

Hi, i am trying to run the app on my local system to check the select functionality not working when i coded along with the tutorial. I have replaced all the .env variables with my keys and have installed all the dependencies from package.json. As per comments from stackoverflow i have also entered command 'npm install --force -D eslint-config-react-app'/'yarn add eslint-config-react -D' but still the error persists. Does anybody know how to solve this issue?

I have attached the screenshot for reference

Bugs in Application

Failed to load resource: the server responded with a status of 422 ()

Failed to load resource: the server responded with a status of 422 () and also gettingHomepage.jsx:15 Uncaught TypeError: Cannot read properties of undefined (reading 'total')

/exchanges

Cannot read properties of undefined (reading 'toString')

${millify(exchange.volume)}

24hVolume: "15322810484"
coinrankingUrl: "https://coinranking.com/exchange/-zdvbieRdZ+binance"
iconUrl: "https://cdn.coinranking.com/mDTK5qrmq/binance.svg"
marketShare: "17.94"
name: "Binance"
numberOfCoins: 312
numberOfMarkets: 1220
rank: 1
recommended: true
uuid: "-zdvbieRdZ"
verified: false

exchange.description ?

Fix News Card image and title

the news card images are stretched, titles needs some work

In LineChart.jsx set-up decimals for the data in datasets object

I have values like 0.0000571134 but it shows only 0. I want to show the entire value or at least to 8-9 decimals.

Error with using ant design

After I run npm start a blank page is displayed on my localhost port and the following error is displayed: "Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported". Any suggestions?

Show more not working

I am halfway through the tutorial at the point where you can toggle between the 10 top Cryptos and the 100 top cryptos.
I click and nothing happens. Instead, I get this error while on the Brave browser, while on Google I get no errors but it still does not display the 100 coins.

Error in event handler: TypeError: Cannot read properties of undefined (reading 'observe')
For the news, I am also getting no objects....
"cryptoNews: undefined" and "too many requests" even though I am now paying for the service

I have checked and even copied some of the relevant code, up to that point and I just can't figure out why the ? operator is not getting read when I click on "Show more"

Menu.Item remains active after clicking Cryptoverse button. Menu bar does not close when clicking outside the bar.

I found these two problems and the corresponding solutions. But I can't implement them correctly.

https://stackoverflow.com/questions/52034570/ant-design-deselect-remove-active-status-from-menu-item-programmatically/52042690

https://stackoverflow.com/questions/32553158/detect-click-outside-react-component

scroll fix

HI, @adrianhajdin when user is in bottom of screen in any where in app and navigate to another link or click on any crypto to get its detail user get navigate to another page in bottom of screen. For example:-

** I have solution for this issue and submitted a Pull request for this **
Please give your opinion on this @adrianhajdin happy to listen from you .

bing news api not working

i am getting a bad request error and it is not fetching any data

News Card Not Aligned Vertically

This is happening only because of different title sizes.

A New Pull request has been created for this issue.

Problems with the LineChart.js, the chart doesn't display, also the change. Some help !!!!

Switch is not exported from 'react-router-dom'

./src/App.js
Attempted import error: 'Switch' is not exported from 'react-router-dom'.

It seems that instead of Switch, it must be Routes now but I have tried that and that is not working either

Title problem

Instead of rank and name I am getting the code of title itself. Problem occurred with Cryptocurrencies.jsx , in the Card component title

Change is not affecting in line chart values

Values of chart are not changing after changing the time period from dropdown
It is only fetching the first record from redux and displaying that instead of the latest one
Can someone help with this?

rendering a router inside router?

Error: You cannot render a inside another . You should never have more than one in your app. Fix?

What is simplified ? and those ?.

I don't understand how and what is simplified ?
Is this an Boolean Operator?

{!simplified && ( <div className='search-crypto'> <Input placeholder='Search Cryptocurrency' onChange={(event) => setSearchTerm(event.target.value) } /> </div> )}

and those question marks, are they ternary operators? ...I've never seen them before
const filterData = cryptosList?.data?.coins.filter((coin) => coin.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()));

[Homepage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Error: GET https://coinranking1.p.rapidapi.com/coins?limit=10 410 (Gone)

when you send a get request for coins app crashes due to this error can someone help. I cloned this project still same error :(

ERROR in src\services\cryptoApi.js Line 15:17: 'builder' is not defined no-undef Line 16:21: 'builder' is not defined no-undef

Failed to compile

Error while loading rule 'jsx-a11y/alt-text': rule.create is not a function
Occurred while linting F:\cryptoapp\src\components\index.js
This error occurred during the build time and cannot be dismissed.

No ouput in browser

TypeError: Cannot read properties of undefined (reading 'price') CryptoDetails

TypeError: Cannot read properties of undefined (reading 'price')
D:/cryptoapp/src/components/CryptoDetails.jsx:27
I don't know how to fix this problem, thanks for your help, I will really appreciate!!!

coinranking API not free anymore

401Unauthorized
Body
Headers
{1 item
"message":"This endpoint is disabled for your subscription"
}
I get this when i try to use the Get exchange
anyway we can use it ?

Forgot to change something!

In CryptoDetails.jsx, the volume property in the CryptoDetails object doesn't exist, it has been replace with 24hVolume for 24 hour volume

https://rapidapi.com/Coinranking/api/coinranking1/

News cards and title in the homepage !!

LineChart.jsx date is same in xAxes 1/20/1970

for(let i=0 ; i < coinHistory?.data?.history?.length; i += 1){
coinTimestamp.push(new Date(coinHistory?.data?.history[i].timestamp).toLocaleDateString());
}

Till yesterday everything was fine but today while accessing the crypto details it is saying toString() function is undefined in node_modules/millify/dist/utils.js in line number 8

"span={6}" issue on Exchange.js Deep Dive

I was getting this issue with alignment of values:

original code:

span={6} seemed to be the issue.

Here's what the code can be. Not perfect but it's functional!

Change out span={6} to style={{ width: "18.9vw" }} inside the

See new layout w/ iPhone and Desktop:

localhost displaying blank screen

After running npm start on my terminal, my react App opens up a localhost page but it displays a blank screen and nothing else. How would I fix this issue.?

My value of line chart is not changing after changing timeperiod

My value of line chart is not changing after changing time period
it is not getting updated with the latest redux state (Setting the date with previous value only)
Can somebody help with this?

TypeError: Cannot read properties of undefined (reading 'total')

_Line 3:10: 'Button' is defined but never used no-unused-vars Line 6:74: 'MenuOutlined' is defined but never used no-unused-vars_

import React from 'react';
// eslint-disable-next-line
import millify from 'millify';
import { Typography, Row, Col, Statistic } from 'antd';
// eslint-disable-next-line
import { Link } from 'react-router-dom';

import { useGetCryptosQuery } from '../services/cryptoApi';

const { Title } = Typography;

const Homepage = () => {
const { data, isFetching } = useGetCryptosQuery(10);
const globalStats = data?.data?.stats;
if(isFetching) return 'Loading...';
return (
<>
<Title level={2} className="heading">Global Crypto Stats</Title>







</>
)
}

export default Homepage

"category" is not a registered scale

I'm am getting this error when trying to click on crypto to see the chart. It doesn't give me a line anywhere in the code where this would be a problem. Please help!
Thank you

Need suggestions for TypeError: Object(...) is not a function

Need help!

Convert Route components in App.js to self-closing tags

In App.js , for better readability, we should convert

  <Switch>
    <Route exact path="/">
        <Homepage />
    </Route>

    <Route exact path="/exchanges">
        <Exchanges />
    </Route>
  </Switch>

to

  <Switch>
    <Route exact path="/" component={Homepage}>
    <Route exact path="/exchanges" component={Exchanges}>
  </Switch>

Would like to know your thoughts @adrianhajdin
I can submit a PR if assigned this issue 😄

TypeError: Object(...) is not a function

any fix for this error

384 | const {
385 | data,
386 | isFetching

387 | } = Object(services_cryptoApi__WEBPACK_IMPORTED_MODULE_4_["useGetCryptosQuery"])();
| ^ 388 | const globalStats = data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.stats;
389 | if (isFetching) return 'Loading Data...';
390 | return /#PURE/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /#PURE/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Title, {

Invalid scale configuration for scale: y

Hello,

Although my application worked fine, it gave me this error in the console, I could solve it by following these steps:

ERROR:
"Invalid scale configuration for scale: y"

SOLUTION:
https://stackoverflow.com/questions/69815975/chartjs-3-x-axis-only-showing-full-moment-object-instead-of-just-month

Greetings

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Cryptodetails.jsx not displaying the 24h Volume correctly after the upgrade to Coinranking API v2, only displays as "undefined".

After the upgrade to the Coinranking API v2 many features of the app stopped working correctly due to the changes in endpoints. One of these problem areas was the 24h Volume criteria on the Cryptodetails.jsx component.

In order to read the correct item from the API JSON object you need to adjust your code from:

{ title: '24h Volume', value: $ ${cryptoDetails.volume && cryptoDetails.volume}, icon: }

to the following:

{ title: '24h Volume', value: $ ${cryptoDetails?.["24hVolume"] && millify(cryptoDetails?.["24hVolume"])}, icon: }

the change being from 'volume' to '["24hVolume"]' as per the changes in the Coinranking API documentation.

I hope this helps the rest of you who are trying to fix the program after the API update.