Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video

May 14, 2022 admin Cryptocurrency Trading 44




Learn advanced React best practices, State Management using Redux Toolkit, UI Creation using Ant Design, creating charts …


44 Comments

  2. Great video but it needs to be updated, maybe specify the level one should be, example: i think you should show how you coded the css style sheet instead of us just hving to get the sheet and knowing nothing about it. also you forgot to install react and intall it aftter the issue, and while doing so you stated by words how to terminate the app but didn't show us, which is the purpose of a tutorial. please don't get me wrong is amazing information but i do think this video needs some editing and minor updates.

    Reply

  5. You are freaking amazing bro. I loved hated code from not understanding. With you it is simple to follow and learn. Big hug best teacher ever!!

    Reply

  14. Your tutorial is topnotch from what i'm seeing so far. As a beginner I must say that I'm able to follow every steps with great enthusiasm. However, I do need help in CryptoDetails section as It's showing "undefined" when I click, instead of showing detail of a particular coin. Kindly help out.

    Reply

  16. I am almost done. The only other issue I am having is when I click on the cards to get info about the crypto, I just get a blank page. There might be something wrong in my CryptoDetails.jsx but I'm not sure.

    Reply

  17. HOW TO FIX THE LINE CHART

    1. the V1 API for the crypto API is deprecated, so you can only get 24h price data no matter which timePeriod you use. it also always returns the same date so you have to multiply this number by 1000.

    //in cryptodetails.jsx, this fixes the incorrect timestamps which need to be multiplied by 1000 since they are in milliseconds and also formatted properly
    const coinPrice = [];
    const coinTimestampRaw = [];

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

    2. how to fix the chart
    //in linechart.jsx, this fixes the chart itself
    import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
    } from "chart.js";

    ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
    );

    const data = {
    // X-Axis
    labels: coinTimestamp,
    // Y-Axis
    datasets: [
    {
    label: `Price in USD ($)`,
    data: coinPrice,
    fill: false,
    backgroundColor: "#0071bd",
    borderColor: "#0071bd",
    },
    ],
    };

    const options = { scales: { y: { ticks: { beginAtZero: true } } } };

    return (
    <>
    <Row className="chart-header">
    <Typography.Title level={2} className="chart-title">
    {coinName} 24h Price Chart
    </Typography.Title>
    <Col className="price-container">
    <Typography.Title level={5} className="price-change">
    {coinHistory?.data?.change}%
    </Typography.Title>
    <Typography.Title level={5} className="current-price">
    {coinName} Price: ${currentPrice}
    </Typography.Title>
    </Col>
    </Row>
    <Line data={data} options={options} />
    </>
    );
    };

    if you want to get the price data as he shows. inthe video you'l have to modify your code as. to use the V2 crypto api data

    Reply

  18. Thank you for all this useful information you give out all time. Thank you. I surely know purchasing this courses will cost fortunes, but if you don't mind in your next videos. you can add a payment link to buy you a coffee . You deserve more, but for now, let appreciate you

    Reply

  19. Anyone getting this error while calling the custom hook of "useGetCryptoNewsQuery" :
    Uncaught TypeError: (0 , _services_cryptoNewsApi__WEBPACK_IMPORTED_MODULE_2__.useGetCryptoNewsQuery) is not a function

    Reply

  21. This video was like one of the few good ones I came across on YouTube. You did a great job explaining everything in such a good way that even a person with no programming background could understand. Keep up the great work! Definitely subscribed.

    Reply

  30. Input:

    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';

    const {Title} = Typography;

    const Homepage = () => {

    const{data, isFetching} = useGetCryptosQuery();

    const globalStats = data?.data?.stats;

    if(isFetching) return 'Loading…';

    return (

    <>

    <Title level ={2} className="heading">Global Crypto Stats</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 Total 24h Volume" value = {millify(globalStats.total34hVolume)} /></Col>

    <Col span = {12}><Statistic title = "Total Market" value = {millify(globalStats.totalMarkets)} /></Col>

    </Row>

    </>

    )

    }

    export default Homepage

    Output:

    Failed to compile

    ./src/components/Homepage.jsx 16:25

    Module parse failed: Unexpected token (16:25)

    You may need an appropriate loader to handle this file type.

    | isFetching = _useGetCryptosQuery.isFetching;

    |

    > var globalStats = data?.data?.stats;

    | if (isFetching) return 'Loading…';

    | return /*#_PURE_*/React.createElement(React.Fragment, null, /*#_PURE_*/React.createElement(Tit

    Reply

  33. Hey can anyone just say why am I getting the times stamp in charts as only a single date(1/19/1970) how to get the recent dates???…any help would be appreciated 👍…

    Reply

  34. wish you're available to help with issues…..mine crashes when i populate the App.js with contents from Homepage.jsx and also contents don't align at the middle like in yours!! Any help pls?? Great tutorial!!!!

    Reply

  36. I am currently trying to build this. react-router-dom has been updated. Switch has been replaced by Routes but when I import that it kills the front end. I've been pretty stuck here.

    Reply

  39. Has anyone come across an error with the time filtering "const time = ['3h', '24h', '7d', '30d', '1y', '3m', '3y', '5y'];" – it all looks perfect in my project but when I select a time period e.g 30 days the chart details all remain the same , nothing happens – I've checked the GitHub code and my code is all correct – I've also implemented the changes in the description above – please let me know. Thanks

    Also, great video thank you!!

    Reply

  41. I have a question, if you want to retrieve data from the API, you must use asynchronous but in the Homepage.jsx components there is no asynchronous function, and when you retrieve data from stats you can't because you get an error message "Uncaught TypeError: Cannot read properties of undefined (reading 'total' )"

    How to solve this?

    Reply

Leave a Reply

Your email address will not be published.


*